掌握以下TypeScript方法,让你开发更加得心应手

本篇文章汇总了,一些typescript的基础概念和一些常用的类型工具方法 。
 
常见的typescript类型定义const num: number = 123 // 数值const str: string = 'string' // 字符串const boo: boolean = true // 布尔const un: undefined = undefined // undefinedconst nu: null = null // nullconst obj: object = {a: 1} // 对象const big: bigInt = 100n; // 大数const sym: symbol = Symbol('s') // symbolconst arr: number[] = [1,2,3] // 数组const arr: Array<number> = [1,2,3] // 数组元组在一个数组中,定义不同类型的值 。
// 定义数组的第一个值是number类型,第二个是string类型const x: [number, string] = [123, 'hello workd']// 解构const [a,b] = xconsole.log(a,b) // 123, hello worldunknown不可预先定义的类型,和any很相似,但是unknow比any更加安全 。
any是任意类型的父类型,同时也是任意类型的子类型 。
unknown是任意类型的父类型,仅此而已 。
很多场景下,我们不好定义类型,需要根据实际情况做判断来决定类型,此时如果用any就失去了校验的能力,用unknown有any的效果,又保留了校验的能力 。
const str1: unknown = '123'const str2: any = '123'let sex: booleansex = str1 // 报错,因为str类型没有确定,是unknown类型,所以不能赋值给boolean类型sex = str2 // 正常,因为any可以赋值给任意类型枚举可以给数值赋予名字,当我们使用的时候,就可以使用名字而不需要记数字,增加了代码的可读性 。
// 定义一组角色,每个角色都用一个数字代表enum Roles {ADMIN = 0,USER = 1,MANAGER = 2}类型继承接口可以继承,提高了接口的可复用性
interface Animal {type: string;}interface Dog extends Animal{name: sting;age: number;}interface TaiDi extends Dog {color: string;}交叉类型通过&,将多个类型聚合
很多时候,我们不会将类型写在一个type下面,而且拆分成很多个type,通过将这些不同的type聚合组合成一个新的type 。想过与interface的extends很相似
type T1 = {name: string}type T2 = {age: number}type T3 = T1 & T2 // {name: string;age: number}联合类型通过|,使一个类型支持多个类型,听起来比较绕,我们直接看例子 。
// value 支持string和number类型type value = https://www.isolves.com/it/cxkf/yy/js/2022-08-15/string | number;// value 支持number和null类型type value = number | null// score只能支持1,2,3,4这四个数值type score = 1 | 2 | 3 | 4对于联合类型,可以让某个变量的值可以支持多种类型,通过这种方式可以避免写any的情况 。
交叉类型,简单理解就是合并两个对象类型,很像Object.assign 。一个是对于类型,一个是对于对象 。
断言【掌握以下TypeScript方法,让你开发更加得心应手】我们希望写的代码定义的某个变量是什么类型,之后使用就是什么类型 。
可以是在多人协作中,以及组件参数的传递中,还有接口后来返回值的类型和一开始定义的不一样 。
这个时候就可以使用断言,强制定义某个变量是什么类型 。
可以理解成虽然某个变量定义的string类型,但是我知道在某个逻辑下会变成number类型,然后告诉编译器当作number类型吧,我拍胸脯保证不会错的 。
// 例子1,常见就是从JAVAScript迁移代码到TypeScriptconst foo = {}foo.bar = 123 // Property 'bar' does not exist on type '{}'.(2339)interface Foo {bar: number}const foo = {} as Foofoo.bar = 123 // 正常赋值// 例子2const nums: number[] = [1,2,3,4,5,6] // 定义number数组// getNum类型是number | undefinedconst getNum = nums.find(item => item > 2) // 获取大于2的第一个元素// Type 'undefined' is not assignable to type 'number'.(2322)const num : number = getNum // 我们知道这段代码的getNum肯定能获取到值,所以修改如下可以正常const num: number = getNum as number函数// 基本使用function sum(x: number, y: number) : number {return x + y}// 可选参数,通过 ? 实现function sum(x: number, y: number,z?: number) : number {if(z) {return x + y + z} else {return x + y}}// 参数默认值function sum(x: number, y: number = 0) : number {return x + y}// 重载// TypeScript的函数重载通过为一个函数指定多个函数类型定义,从而对函数调用的返回值进行检查function sum(a: number,b:number):numberfunction sum(a: string,b:string): stringfunction sum(a: string | number,b: number | string) : string | number {if(typeof a === 'number' && typeof b === 'number') { // 如果是数值就相加return a + b} else { // 否则字符串通过逗号拼接return a + ',' + b}}// 大家可以试一下,如果不用重载的话,返回的类型就是string | number// 之后在使用ans1和ans2就还得需要断言const ans1 = sum(1,2) // ans返回的number类型const ans2 = sum('1','2') //ans返回的string类型


推荐阅读