再次审视TS | 青训营

海陆贝壳
204 阅读3分钟

TS由来及比较

ts语法糖基础

  • 数据类型：
    1. boolean、number、string
    2. undefined、null
    3. any、unknown、void
    4. never
    5. 数组类型[]
    6. 元组类型tuple
  • 函数
    • 定义:TS定义函数类型时要定义输入参数类型和输出类型
    • 输入参数:参数支持可选参数和默认参数
    • 输出参数:输出可以自动推断,没有返回值时,默认为void类型1
    • 函数重载:名称相同但参数不同,可以通过重载支持多种类型
    function add(x:number[]):number
function add(x:string[]): string
function add(x:any[]): any {
if(typeofx[0]==== 'string') {
    return x.join()
}
if(typeofx[0]=== 'number'){
    returnx.reduce((acc,cur)=>acc+cur)
}
  • 接口
    • 定义:接口是为了定义对象类型
    • 特点:
      • 可选属性:?
      • 只读属性:readonly
      • 可以描述函数类型
      • 可以描述自定义属性
      • 总结:接口非常灵活ducktyping
  • 类
    • 定义:写法和JS差不多,增加了一些定义
    • 特点:
      • 增加了public、private、protected修饰符
    • 抽象类:
      • 只能被继承,不能被实例化
      • 作为基类,抽象方法必须被子类实现
      • interface约束类,使用implements关键字

ts进阶

  • 高级类型
    • 联合类型：|
    • 交叉类型：&
    • 类型断言：as
    • 类型别名(typeVSinterface)
      • 定义:给类型起个别名
      • 相同点:
        1. 都可以定义对象或函数
        2. 都允许继承
      • 差异点:
        1. interface是TS用来定义对象,type是用来定义别名方便使用月;
        2. type可以定义基本类型,interface不行;
        3. interface可以合并重复声明,type不行;
    function getlength(arg:number | string):number(
   const str = arg as string
   if(str.length){
       return str.length
   }else{
       const number = arg as number
   }
   return number.toString().length
}
  • 泛型（常用于后端接口约束）：
    • 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。
    • 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。
    • 在像C#和Java这样的语言中,可以使用泛型来创建可重用的组且件,
    • 一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
    function print<T>(arg:T):T{
    console.log(arg)
    return arg
}
  • 泛型语法：
    1. 泛型的语法是 里面写类型参数,一般用T表示;
    2. 使用时有两种方法指定类型:
      1. 定义要使用的类型
      2. 通过TS类型推断,自动推导类型
      3. 泛型的作用是临时占位,之后通过传来的类型进行推导
    3. 操作符：
      • typeof:获取类型
      • keyof:获取所有键
      • in:遍历枚举类型
      • ·T[K]:索引访问
      • extends:泛型约束
  • 泛型工具类型
    • Partial:将类型属性变为可选
    • Required:将类型属性变为必选
    • Readonly:将类型属性变为只读
    • Pick、Record...
    type Partial<T> = {
    [P in keyof T]?: T[P];
};
type Required<T> = {
    [P in keyof T]-?: T[P]
};
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
  • ts编写要点
    • declare:三方库需要类型声明文件
    • .d.ts:声明文件定义
    • @types:三方库TS类型包
    • tsconfig.json:定义TS的配置
avatar
文章
阅读
粉丝