携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

一、react中基于Typescript项目创建

1.1 ts介绍

1、Typescript的定位是静态类型语言，在写代码阶段就能检查错误，而非运行阶段。 2、类型系统是最好的文档，增加了代码的可读性和维护性。 3、有一定的学习成本，需要理解接口（interfaces）、泛型（Generics）、类（Classes）等。 4、ts最后被编译成js

1.2 安装基于ts的react项目

create-react-app my-app --template typescript

如果运行完命令后报以上的错误，那么运行命令： npm i -g create-react-app 然后重新运行命令：create-react-app my-app --template typescript

二、typescript基础语法

创建演示文件夹，并且在index.tsx中引入

2.1 字符串、数字、布尔

可以看到以冒号定义类型，可以看到在写代码阶段就有提示了。可以看到用|来表示这个定义的变量有可能是布尔值也有可能是字符串类型。

2.2 数组

// 数组
var list1:string[] = ['1','2','3']
var list4:Array<string> = ['1','2','3']

var list2:number[] = [1,2,3]
var list5:Array<number> = [1,2,3]


var list3:(string|string)[] = ['1','2','3']
var list6:Array<number|string> = ['1','2','3']

2.3 对象

// 对象
interface IObj {
    name: string,
    age: number,
    flag?: boolean, // ?为可选
    [propName:string]: any, // key为随意的字符串名称，值为任意类型
}
var obj:IObj = {
    name: 'typescript',
    age: 100,
    flag: false
}
var obj1:IObj = {
    name: 'typescript',
    age: 100,
    num: false
}

2.4 函数

// 函数
function test(a:string, b:number, c?:number):string { 
    // 必须有3个形参，a为字符串，b为数字，c可传可不传 返回值为字符串
    return a.substring(0,1) + b
} 

2.5 类

// 类
class Bus {
    public name = 'typescript' // 公有属性，都可以访问到
    private _list:any = [] // private私有的，外部访问不到，继承的类也访问不到
    protected age = 18 // 外部访问不到，继承的类可以访问的到
    subscribe(cb:any) {
        this._list.push(cb)
    }

    dispatch() {
        this._list.forEach((cb:any) => {
            cb&&cb()
        })
    }
}

类+接口的应用：

// 类+接口使用
interface Ifunc {
    getName: () => string
}

class A implements Ifunc {
    getName () {
        return 'AAA'
    }
}

function init(obj:Ifunc) {
    obj.getName()
}

var objA = new A()

init(objA)

在学习React + Typescript的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。