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

taiiiyang
VIP.5 如鱼得水
1,203 阅读3分钟

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

TS实战

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

IMG_9032.JPG

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的基础，在实际开发中通过基本的操作例如交叉类型、联合类型、类型推断、就能胜任大部分操作，而对于高阶的类型，就需要更复杂的操作，这些留着之后再聊。

avatar
文章
阅读
粉丝