React Native TypeScript 初次尝试

TypeScript是JavaScript类型的超集，他可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

配置

1、官方文档已经写的很详细了。参考： Using TypeScript with React Native
2、创建项目

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做一个简单的聊天列表

1、效果图

571535384093_.pic.jpg

2、目录结构

目录结构

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 {
  render() {
    return (
      
    );
  }
}

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 {
    constructor (props: Props) {
        super(props);
    }
    render () {
        return (
            
                { DATAS.map((item, index) => {
                    return 
                }) }
            
        )
    }
}

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 {
    render () {
        const { item } = this.props
        return (
            
                
                    
                    
                        
                            {item.name}
                            {item.time}
                        
                        {item.conetnt}
                    
                
                
            
        )
    }
}

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
}

总结

1、上手很容易
2、比JavaScript写起来麻烦那么一丢丢
3、总体来说还是不错的