TypeScript随堂记|青训营

90 阅读2分钟

什么是TS?

  • TS是一种用于前端开发编程语言,TS是JS的超集,用于解决大型项目的代码复杂性。TS扩展了JS,并添加了静态类型检查、类、接口、模块等特性,以提供更好的开发工具和编码体验。JS是弱语言类型,这样,在编程过程中会出现很多潜在的风险,而利用TS,开发者可以在编程时便捕获潜在的类型错误,提供了更好的代码智能提示和自动补全,提高了代码的可维护性和可扩展性。
  • TS最终会被编译为JS在浏览器中运行。
  • TS提供了更多的功能和类型安全性,提高了开发效率和代码质量。

TS基础类型

  • boolean、number、string
  • 枚举enum
  • any、unknown、void
  • never
  • 数组类型[]
  • 元组类型tulpe

函数类型

TS定义函数类型时要定义输入参数类型和输出类型。

  • 输入参数:参数支持可选参数和默认参数。
  • 输出参数:输出可以自动推断,没有返回值时,默认是void类型。
  • 函数重载:名称相同但参数不同,可以通过重载支持多种类型。
function add(x:number[]):number
function add(x:string[]):string
function add(x:any[]):any{
    if(typeof x[0]==='string'){
        return x.join()
    }
    if(typeof x[0]==="number"){
        return x.reduce((acc,cur)=>acc+cur
    }
}

接口interface

接口是为了定义对象类型 特点:

  • 可选属性:?
  • 只读属性:readonly
  • 可以描述函数类型
  • 可以描述自定义属性

写法和js差不多,增加了一些定义

特点:

  • 增加了public、private、protected修饰符
  • 抽象类:
    • 只能被继承,不能被实例化
    • 作为基类,抽象方法必须被子类实现
  • interface约束类,使用implements关键字。

高级类型

  • 联合类型 |
  • 交叉类型 &
  • 类型断言 as
  • 类型别名:给类型起一个别名

泛型

  • 泛型(Generics)是一种允许我们在定义函数、类或接口时使用参数化类型的机制。通过使用泛型,我们可以编写更灵活和可重用的代码,以处理多种类型的数据,而不必针对每种类型编写重复的代码。
  • 泛型允许我们在定义函数或类时使用类型参数,这些类型参数在使用时可以被具体的类型替代。通过使用尖括号(<>)来指定类型参数,并在函数或类的定义中使用它们。
function identity<T>(arg: T): T {
  return arg;
}

泛型工具类型-基础操作符

  • typeof:获取类型
  • keyof:获取所有键
  • in:遍历枚举类型
  • T[k]:索引访问
  • extends:泛型约束

总体而言,学习 TypeScript 可以为前端开发者带来更好的代码质量、开发效率和可维护性。虽然在一开始可能需要投入一些时间来学习 TypeScript 的特性和类型系统,但它的优点和带来的好处往往是值得的。