TypeScript VS JavaScript

基础

0. boolean、 number、 string

1. 枚举enum

2. any、 unknown、 void

3. never - 防御性编程

4. 数组类型

5. 元组类型 tuple

6. 函数类型

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

   输入参数：参数支持可选参数和默认参数

   输出参数：输出可以自动推断，没有返回值时，默认为void类型

   函数重载：名称相同但参数不同，可以通过重载支持多种类型

7. interface

   定义：接口是为了定义对象类型

   特点：

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

   总结：接口非常灵活 duck typing

8. 类

   定义：写法和JS差不多，增加了一些定义特点：

   • 增加了 public、private、protected 修饰符

   • 抽象类：

     • 只能被继承，不能被实例化
     • 作为基类，抽象方法必须被子类实现
   • interface约束类，使用implements关键字

进阶

• 联合类型

• 交叉类型 - 扩展

• 类型断言 as 手动指定类型

• 类型别名 type

  • 对比 interface

    • 定义：给类型起个别名-
    • 相同点：1. 都可以定义对象或函数2. 都允许继承-
    • 差异点：1. interface是TS用来定义对象，type是用来定义别名方便使用；2. type可以定义基本类型，interface不行；3. interface可以合并重复声明，type不行

• 泛型

  • 通过泛型来创建可重用的组件

     function print(arg: string | number): string | number {
       console.log("arg->", arg);
       return arg;
     }
     function print(arg: any): any {
       console.log("arg->", arg);
       return arg;
     }
     ​
     //使用泛型
     function print<T>(arg: T): T {
       console.log("arg->", arg);
       return arg;
     }
    

    基本定义：1. 泛型的语法是<>里面写类型参数，一般用T表示；2. 使用时有两种方法指定类型：1. 定义要使用的类型2. 通过TS类型推断，自动推导类型3. 泛型的作用是临时占位，之后通过传来的类型进行推导

  • 常用操作符

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

  • 工具类型

    • Partial:将类型属性变为可选
    • Required:将类型属性变为必选
    • Readonly : 将类型属性变为只读
    • Pick、Record

实战