这是我参加「第四届青训营 」笔记创作活动的的第2天

TS实战

​ 最近在做项目中用到了TS，因为刚学TS没多久，于是就想着在项目中进行实战，结合项目和官方文档，收成也是蛮多的。TS作为JS的超集，就连官方都提出了在之后的JS中并入TS，这也足以证明TS做类型限制的一个实用性。而在简略的项目中，想要完成日常开发，只需求了解到 type 和 interface 就足够了，但关于想要开发组件库或许更杂乱情况下，就需求运用TS的更多高档功用了，例如类型揣度、类型束缚、类型结构、条件类型这些功用。这也是所谓的入门容易精通难。在做项目这么久之后，也略微理解了一下TS。

在项目中如何运用TS做基本的类型判断

type

​ type 又叫类型别号，是将各种类型的组合从头赋值给一个新的类型，相当于变量声明，而新结构的变量能够运用于大多数场景，对代码进行类型检查。

type A = string | number;
type B = {a:number} & {b:string};
type C = (a:number) => number

interface

​ TS的中心准则便是对值的一切结构进行检查，被称作“结构性子类型化”。接口的作用便是对你的代码还有第三方代码签订契约，使得代码需求符合接口的结构。

interface FirstInterface {
	name: string,
  readonly size: number, // 只读类型
  state?: string //可选类型
}
function printName(nameObj:FirstInterface) {
  console.log(nameObj.name)
}
let nameObj = {
  size: 10,
  name: 'taiiiyang'
}

以上便是对对象运用接口，只要满意了接口的必要条件，那么该类型就能经过检查。接口不止能够作用于对象，还能够作用于函数、结构器、类。一起接口内部还能支撑索引类型。经过结构不同的接口来实现对类型的限制，在开发过程中也能具有TS提示功用。

interface ClockInterface {
	currentTime: Date
}
// 此刻这个类中就需求有 currentTime 特点
class Clock implements ClockInterface {
	currentTime: Date;
}

接口也支撑继承,一个接口能够继承多个接口，创建出多个接口的组成接口

interface One {
	one: number
}
interface Two {
  two: string
}
interface Final extends One, Two {
  Final: string | number
}

接口和变量重命名的区别是，概念上的不同，变量实际上还是一种类型结构，一个接口中能够包括多个不同中的类型，两者都能够对类型进行限制。而类型别号还能用于类型结构，这也是TS高档的玩法。

泛型

​ 实战中会出现类型不确定的情况，这种时分就轮到泛型进场了

function identify<T>(arg: T): T {
	return arg
}

​ 这也是非常重要的一点，函数或许类型在运用的时分会经过<>去接受一个类型，而在后边的操作中就能够经过泛型来对类型进行确定。经过不同的操作来对类型进行束缚，泛型能够进行简略的类型限制，一起也能进行愈加深邃的类型结构。

​ 泛型束缚：经过extends来对泛型进行束缚，使得泛型能够具备特定的条件，便于之后的特点读取操作

interface FirstExtends {
  a: number 
}
function Hello<T extends FirstExtends>(arg:T):T {
  console.log(arg.a) // 这样TS就不会报错了
}

​ 泛型并不是只能支撑一个，他能够一起支撑多个，也能在传入参数时自动推导类型，也能够在类型重命名中运用泛型进行推导，作为该声明的局部变量运用，这点也是TS高阶的一部分。

总结

​ 以上这些属于TS的根底，在实际开发中经过根本的操作例如交叉类型、联合类型、类型揣度、就能胜任大部分操作，而关于高阶的类型，就需求更杂乱的操作，这些留着之后再聊。