Typescript+React学习笔记（一）- typescript相关内容

1.安装typescript

npm install -g typescript

2.编译ts文件，将ts文件编译成js文件

tsc xxx.ts

3.ts-node (用于快速运行ts文件)

• 默认情况下，执行ts文件，需要先 tsc xxx.ts 将文件转化为 xxx.js文件，然后用 node xxx.js 才能执行
• 用ts-node则可以一步到位，如：ts-node xxx.ts

4.特殊类型

• any：声明为任何类型
• void：声明为什么类型都不是(一般用在声明函数的返回值)
• null：声明为null类型
• undefined：声明为undefined类型
• never：声明为永不存在的值的类型(一般用在声明某些特殊函数<如抛出异常 或 永远无法执行完>的返回值)

提示1：null/undefined/never都是任何类型的子类型，即它们这些类型的值 可以赋值给其他任何类型
提示2：never类型的变量，只能接受never类型的值(即使any类型的值也不接受)
注意：任何类型检测通过，只能说明代码符合typescript的规则，并可以编译通过，但不代表代码没有问题(比如死循环)

5.implements和extends

class继承另一个class，用extends

class Cat extends Animal

class接受interface的类型约束，用implements

class Test implements Inters

泛型 接受interface的类型约束，用extends

function Test<T extends Inters>(形参: T): T {...}

6.联合类型的方法

声明为联合类型的变量，只能使用这些类型的公共属性/方法

比如 const b: string | number = 123; 中，b是访问不到.length这个属性的，因为它不是这2种类型公共的

7.类型断言

作用：由于联合类型的变量只能使用其公共属性，断言可以让变量使用某个私有属性，且不会编译报错

let test: string | number = "aaa";
(test as string).length		//写法1
(<string>test).length   	//写法2，react的jsx文件中不支持这种写法

8.类型别名

像声明变量用来存储数据一样，类型也可以声明变量来存储

type myType = string | number

9.函数类型

写法1：直接在具体函数中写

function add(x: number, y: number): number {
	return x + y;
}

写法2：仅声明类型(包括入参类型 和 返回类型)

type myType = (x: number, y: number) => number
const add: myType = (x: number, y: number): number => x + y

10.使用第三方插件

除了先引入第三方插件之外，还必选用declare进行声明才可在typescript中使用，可借助 @types这个库进行声明

如npm install -g @types/jquery，用于对jQuery插件进行声明

11.ts中的常用工具类 Partial

Partial<{ name: string;	age: number; }> 
//转换后为：
{ 
	name?: string | undefined;
	age?: number | undefined; 
}