一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

为什么要TS

TS为静态类型，静态类型有以下好处

• 可读性增强 基于语法解析TSDoc，增强ide
• 可维护性增强 编译阶段暴露大部分错误 多人合作的大型项目 获得更好的稳定性和开发效率

TS为JS的超集

• 兼容JS的所有特性
• 渐进式引入与升级

JS Diff TS

基本类型

引用类型

interface IMifan{
  //readonly 只读属性 无法被赋值
  readonly jobId:number;
  name:string;
  sex:`man`|`woman`|`other`;
  //? 可选属性
  hobby?:string;
  //其余任意属性
  [key:string]:any;
}
​
const mifan:IMifan={
  jobId:007,
  name:`zjl`,
  sex:`man`,
  hobby:`sleep`
}
​
mifan.jobId=995;//报错 readonly
mifan.platform=`game`;//成功 任意属性
​
const mifan:IMifan={
  jobId:008,
  sex:`man`,
}//报错 hobby可以却 但是name不能缺
​

函数类型

//JS function
function add(x,y){
  return x+y
}
​
//TS function
function add(x:number,y:number):number{
  return x+y
}
​
//JS➡️function
const mult=(x,y)=>x*y
​
//TS with interface ➡️function
interface IMult{
  (x:number,y:number):number;
}
const mult: IMult =(x,y)=>x*y
​
//TS without interface ➡️function
const mult: (x:number,y:number)=>number =(x,y)=>x*y
​
​

函数重载

function add(x:number,y:number):number;
​
//进行重载
interface IAdd{
  (x:number,y:number):number;
  (x:string,y:string):string;
}
const add2:IAdd=(x,y)=>x+y

数组类型

//类型+方括号
type IArr1=number[]
//范型
//Record表示的是一种映射关系 如{a:1}为Record<string,number>类型
type IArr2=Array<string | number | Record<string,number>>
//元祖
type IArr3=[number,number,string,string]
//接口
interface IArr4{
  [key:number]:any
}
​
const arr1:IArr1=[1,2,3,4]
const arr2:IArr2=[1,2,'3','4',{a:1}]
const arr3:IArr3=[1,2,'3','4']
const arr4:IArr4=['sss',()=>console.log(995),{mi:995}]]

补充类型

• void 空
• any 任意
• 枚举类型

enum ESign{
  add = '+',
  mult = '*',
}
Esign['add'] === '+'

• 泛型

function iniArr(target){
  return new Array(995).fill(target)
}
​
interface IIniArr{
  <T>(target:T)=>T[]
}
​
const iniArr2 : IIniArr =(target)=>new Array(995).fill(target)
​
//多泛型
interface IMuti<T,U>{
  key:T,
  val:U
}
//泛型类
class IPerson<T>{
  instace:T
}
​
//泛型别名
type IArr<T>= Array<T>
​
//泛型约束
type IGetRepeatStr =<T extends string>(target:T)=>T[]
​
//泛型参数默认类型
type IGetRepeatStr =<T = number>(target:T)=>T[]
​
​
​

字符串/数字 字面量

//必须为html div...的一种
type IDomTag='html'|'body'|'div'|'span'
//必须为1,3,5,7,9的一种
type IOddNumber=1 |3| 5 | 7| 9|
​

高级类型

• 联合类型｜
• 交叉类型&

const array=[{
  name:`111`,
  age:20
},{
  name:`222`,
  gender:1
}]
​
//联合类型
interface IAge{
  name:string,
  age:number
}
interface IGender{
  name:string,
  gender:string | number
}
​
type IInfoList=Array<IAge | IGender>
​
//交叉类型
type IInfoList=Array<
  {
    name:string
  }& ({age:number} | {gender:string|number})
>

还有一些，类型守卫 infer之类