TypeScript是JavaScript類型的超集，他可以編譯成純JavaScript。TypeScript可以在任何瀏覽器、任何計(jì)算機(jī)和任何操作系統(tǒng)上運(yùn)行，并且是開源的。

配置

1、官方文檔已經(jīng)寫的很詳細(xì)了。參考： Using TypeScript with React Native
2、創(chuàng)建項(xiàng)目

react-native init MyAwesomeProject
cd MyAwesomeProject

3、添加TypeScript

yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native

4、取消tsconfig.json中的一句注釋

{
  /* Search the config file for the following line and uncomment it. */
  // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}

5、在rn-cli.config.js寫入以下代碼

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  },
};

嘗試用TypeScript做一個(gè)簡單的聊天列表

1、效果圖

571535384093_.pic.jpg

2、目錄結(jié)構(gòu)

目錄結(jié)構(gòu)

3、App.tsx

import React from 'react'
import { Component } from 'react';
import {
  ChatList
} from './src'

type Props = {};
type State = {};
export default class App extends Component<Props, State> {
  render() {
    return (
      <ChatList />
    );
  }
}

4、src/chat_list.tsx

import React from 'react'
import { Component } from 'react'
import {
    ScrollView,
    Platform
} from 'react-native'
import ChatItem from './chat_item'

interface State {}
interface Props {}

interface Item {
    img: Object,
    name: string,
    time: string,
    conetnt: string
}

const DATAS: Item[] = [
    {
        img: require('../assets/1.jpeg'),
        name: '高春',
        time: '10:43',
        conetnt: '你好啊,你好啊'
    },
    {
        img: require('../assets/2.jpeg'),
        name: '小花',
        time: '10:44',
        conetnt: '你好壞,你好啊'
    },
    {
        img: require('../assets/3.jpeg'),
        name: '小明',
        time: '12:43',
        conetnt: '你好傻,fdf,你好啊'
    },
    {
        img: require('../assets/1.jpeg'),
        name: '小李',
        time: '11:43',
        conetnt: '你好萌'
    },
    {
        img: require('../assets/2.jpeg'),
        name: '小清',
        time: '09:43',
        conetnt: '你好2'
    },
    {
        img: require('../assets/2.jpeg'),
        name: '小清',
        time: '09:43',
        conetnt: '你好2'
    },
    {
        img: require('../assets/2.jpeg'),
        name: '小清',
        time: '09:43',
        conetnt: '你好2'
    },
    {
        img: require('../assets/2.jpeg'),
        name: '小清',
        time: '09:43',
        conetnt: '你好2'
    },
    {
        img: require('../assets/2.jpeg'),
        name: '小清',
        time: '09:43',
        conetnt: '你好2'
    },
    {
        img: require('../assets/2.jpeg'),
        name: '小清',
        time: '09:43',
        conetnt: '你好2'
    },
    {
        img: require('../assets/2.jpeg'),
        name: '小清',
        time: '09:43',
        conetnt: '你好2'
    },
    {
        img: require('../assets/2.jpeg'),
        name: '小清',
        time: '09:43',
        conetnt: '你好2你好2你好2你好2'
    },
]

class ChatList extends Component<Props, State> {
    constructor (props: Props) {
        super(props);
    }
    render () {
        return (
            <ScrollView style={{marginTop: Platform.OS === 'ios' ? 24 : 0}}>
                { DATAS.map((item, index) => {
                    return <ChatItem item={item} key={index} />
                }) }
            </ScrollView>
        )
    }
}

export default ChatList

5、src/chat_item.tsx

import React from 'react'
import { Component } from 'react'
import {
    View,
    Text,
    StyleSheet,
    Image
} from 'react-native'

interface Item {
    img: any,
    name: string,
    time: string,
    conetnt: string
}
interface State {}
interface Props {
    item: Item
}

class ChatItem extends Component<Props, State> {
    render () {
        const { item } = this.props
        return (
            <View>
                <View style={styles.container}>
                    <Image source={item.img} style={styles.headerImg} />
                    <View style={styles.contentView}>
                        <View style={styles.topView}>
                            <Text style={styles.titleText}>{item.name}</Text>
                            <Text style={styles.timeText}>{item.time}</Text>
                        </View>
                        <Text style={styles.contentText}>{item.conetnt}</Text>
                    </View>
                </View>
                <View style={styles.spliteLine} />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        padding: 15,
        flexDirection: 'row'
    },
    headerImg: {
        height: 80,
        width: 80
    },
    titleText: {
        fontSize: 18,
        color: 'black',
        fontWeight: 'bold',
        flex: 1
    },
    contentView: {
        flex: 1,
        paddingLeft: 10
    },
    topView: {
        flex: 1,
        flexDirection: 'row',
        paddingTop: 3
    },
    timeText: {
        fontSize: 14,
        color: '#b2b2b2'
    },
    contentText: {
        paddingBottom: 3,
        color: '#b2b2b2',
        fontSize: 16
    },
    spliteLine: {
        borderTopWidth: 0.5,
        borderTopColor: '#b2b2b2'
    }
})

export default ChatItem

6、src/index.ts

import ChatList from './chat_list'
export {
    ChatList
}

總結(jié)

1、上手很容易
2、比JavaScript寫起來麻煩那么一丟丟
3、總體來說還是不錯(cuò)的