工作中常用的TS速查笔记📔

80 阅读3分钟

TypeScript

是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

欢迎大佬们驻足留言,谢谢~

1、定义数组

//定于数组内只能写字符串类型

let typeArr:string[]=[]

//元祖

let typeArr:[string,number]=[]

typeArr=['age',18]

2、枚举

给第一个赋值后,下面会依次递增

enum msgs{

 '成功'=200,

 '密码错误',

 '账号错误'

}



//msgs={

//'成功':200,

//'密码错误':201,

//'账号错误':202

//}

3、没有值void

let vts:void;

vts=undefined;

//最佳场景:规范一个函数没有返回值

4、接口interface

interface infoint{

  name:string,

  id:number

}

let obj:infoint={

  name:'张三',

  id:1

}

5、只读readonly

interface infoint{

  name:string,

  id:number,

  readonly age:number//只读

}

readonly 跟const的区别:const规范变量;readonly规范属性

6、添加未知属性

interface infoint{

  name:string,

  id:number,

  [propsName:string]:any//可选

}

let obj:infoint={

  name:'张三',

  id:1,

}

obj.type=true

7、接口继承

interface vipint{

  isvip:Boolean,

  viptype:Number,

}



interface infoint{

  name:string,

  id:number,

  [propsName:string]:any//可选

}

//接口组合

interface vipinfoInt extends vipint,infoint{

  isAdd:Boolean,

}

//赋值

let obj:vipinfoInt ={

  isvip:false,

  viptype:2,

  name:'张三',

  id:1,

  isAdd:true

}

8、函数的剩余参数

//不知道参数有多少个的情况,使用剩余参数

function getnum(number1: number, number2: number,...numbers:number[]):number{

  let count= number1+ number2

  numbers.forEach(v=>{

    count = getnum(count,v)

  })

  return count

}

const count = getnum(1,2,3,4,5)

函数:可选参数需要定义在必传参数后面

9、泛型

是指在定义函数/接口/ 类时,不预先指定具体的类型,而是在使用的时候再指定类型限制的一种特性

//1、约束函数

function getnum<T>(numbers:T):T[]{

  return [numbers]

}

const numberType= getnum(1)



//2、约束接口

interface configInt<T>{

   (userName:T):T

}

const userInfo: configInt<string> =(userName)=> userName

userInfo('你好~')



//3、继承泛型-泛型扩展

interface lengthInt{

   length:number

}

function getName<T extends lengthInt>(userName:T):T{

  //扩展出length属性

  console.log(userName.length)

  return userName

}

//getName({name:'李四',length:3})

getName([1,4,5,8,9,0])//必须要有length属性才不报错

T表示的是返回值T是泛型,T是一个占位符,用来告诉编译器,这个东西先留着,等编译的时候,再告诉你

9、Record 定义一个对象的 key 和 value 类型

但是如果要定义一个对象的 key 和 value 类型该怎么做呢?这时候就需要用到 TS 的 Record 了

interface PageInfo { title: string; } 

type Page = "home" | "about" | "contact"; 

const nav: Record<Page, PageInfo> = { 

    about: { title: "about" }, 

    contact: { title: "contact" }, 

    home: { title: "home" }

};



//比如我需要一个对象,有 ABC 三个属性,属性的值必须是数字,那么就这么写:

type keys = 'A' | 'B' | 'C' 

const result: Record<keys, number> = { 

 A: 1,

 B: 2, 

 C: 3 

}

10、总结

一张图概括内容,如下:

有bug?想补充?

感谢大家观看这篇文章,有任何问题或想和我交流,请直接留言,

发现文章有不妥之处,也可指出交流,感谢阅读~

image.png

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天,点击查看活动详情