TypeScript 的发展与基本语法 | 青训营笔记

富鑫伟
23 阅读4分钟

TypeScript 的发展与基本语法

这是我参与第五届青训营笔记创作活动的第3天，记录了关于TypeScript的一些基础知识。

一、为什么是TypeScript

  • JS

    • 动态类型：执行阶段才会进行类型的匹配和检验

    • 弱类型语言：数据类型可以被忽略，一个变量可以赋不同数据类型的值

  • TS

    • 静态类型：编译时便已经确定变量的类型，预编译就可发现类型不匹配的错误

    • 弱类型语言

  • TS优点

    • 静态类型

      • 可读性增强：基于语法解析TSDoc，ide增强

      • 可维护性增强：在编译阶段暴露大部分错误

        • 多人合作的大型项目中，获得更好的稳定性和开发效率

    • JS的超集

      • 包含于兼容所有JS特性，支持共存

      • 支持渐进式引入与升级

二、基本语法

1. 五大基本数据类型：字符串、数字类型、布尔类型、null、undefined

  • JS原生代码即可正常运行，TS的类型定义就是在后面打上": 类型"

1.png

2. 对象类型

  • 不像基本数据类型TS原生具有，对象的类型通常由我们自定义，即:后面的类型

  • 在TS编写约定中，一般以大写字母I开头表示这是一个类型，用以与其他变量类型区分

  • 通过关键字interface进行类型定义

    • interface 类型名称{
    /*类似对象属性，不过以 属性名:数据类型 方式写*/
    /*属性前加readonly关键字，表示只读属性，约束属性不可在对象初始化外赋值*/
    readonly jobId: number;
    name: string;
    sex: 'man' | 'woman' | 'other';
    /*可选属性: 定义该属性可以不存在*/
    /*定义方法: 在:前加上?*/
    hobby?: string;
    /*任意属性：允许接口有任意的属性*/
    /*一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：*/
    [key: string]: any;/*any: TS特有类型，代表全部*/
}

2.png

3. 函数类型

  • 可以直接在函数上加上变量类型和返回值类型，但结构太长可读性差

  • 也可以定义接口，将类型整合在接口中，更清晰

3.png

函数重载

  • 函数重载返回值必须是函数实现的子集，或者超集。

  • TS 在检查一个函数重载的返回值与其实现的返回值是否兼容时，是直接看整体的。

    • 如果函数重载无返回值，兼容。
    • 如果函数重载的返回值是函数实现的返回值的子集，兼容。
    • 如果函数重载的返回值是函数实现的返回值的超集，也兼容。

4.png

4. 数组类型

  • 类型+方括号

  • 泛型表示

  • 元祖表示

  • 接口表示

5.png

5. 补充类型——空类型、任意类型、枚举类型

6.png

6. 泛型

  • 大部分编程语言都有，为了方便变量约束，并在不同变量类型情况下达到不同效果

7.png

泛型约束

8.png

7. 类型别名 和 类型断言

  • type关键字定义类型别名

  • as关键字进行类型断言

9.png

8. 字符串/数字 字面量（限定范围）

10.png

三、高级类型

1. 联合/交叉类型

  • 联合类型：IA | IB;联合类型表示一个值可以是几种类型之一

  • 交叉类型：IA & IB;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

11.png

2. 类型保护与类型守卫

  • 访问联合类型时，出于程序安全，仅能访问联合类型中的交集部分。

12.png

  • 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域

13.png

3. keyof、in关键字

我们有这样的需求，函数有两个参数sourceObj,targetObj,并且sourceObj为targetObj的子集

怎么判断子集呢？现在我们不需要循环遍历判断，只需要keyof和in关键字

14.png

4. 函数返回值类型，关键字extends和infer

我们知道可以将一个函数作为参数，但是在TS中我们怎么写返回值呢

15.png

16.png

四、工程应用

  • webpack

17.png

  • Node.js

18.png

五、参考

  • 字节录播课 - TypeScript 的发展与基本语法
  • 字节录播课 - TypeScript 高级数据类型
avatar
文章
阅读
粉丝