首先先说下webstorm配置typescript及安装

网络配图

安装 typescript

npm install -g typescript

顺便安装下 yarn

curl -o- -L https://yarnpkg.com/install.sh | bash

注：提示没有权限就加上 sudo

over

使用中遇到的坑

1.文件的创建

image.png

2. react的引用方式

···
import * as React from "react";

···

3. class声明

image.png

export interface HomeItemProps {
    item: string,
    itemClick: ()=>void,
    addItemClick: ()=>void,
}
export interface HomeItemState{
}
export default class HomeItem extends React.Component<HomeItemProps, HomeItemState>{
    constructor(props: any) {
        super(props);
    }
 render() {
        return (
            <View>
            </View>
        )
    }
}

4.变量的声明

变量的声明都要加上类型

const screenWidth:number = Dimensions.get('window').width;
const imageWidth:number = 100;
const imageHeight:number = 80;

5.state的声明和改变

image.png

image.png

6.定义字段出现波浪线

image.png

看出来区别没？！
这就是单词拼写搞出来的👻。如果单词正确就没有波浪线，不正确就有波浪线。。。
去掉恶心的波浪线

单词上鼠标右键点击

image.png