TypeScript 的发展与基本语法

罗伊斯
111 阅读3分钟

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

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

（仅供自己参考，技术点请看字节整理的资料和相应官方技术文档）

这是前端入门 - 理论篇系列里的第1篇《TypeScript 的发展与基本语法》

1. 本堂课重点内容：

1.1 课程介绍

本节课程主要分为四个方面：

  1. Typescript 见解
  2. Typescript 基础语法，包括类型、泛型、类型别名、类型字面量等
  3. Typescript 高级类型讲解及实例
  4. Typescript 工程应用介绍

1.2 课程重点

  1. TS入门

    1. TS历史，为什么要用TS
    2. TS基础语法

  2. TS高级数据类型

    1. 联合交叉类型
    2. 类型保护与类型守卫
    3. Merge 函数类型实现
    4. 函数返回值类型
    5. TypeScript 工程应用

2. 详细知识点介绍：

2.1 为什么要用TypeScript

image-20230211214542657

动态类型：执行时才决定类型，静态类型：编译时就决定类型

弱类型语言（"1" + 1，合法，可以类型转换）vs 强类型语言

JS为动态类型+弱类型语言

TS为静态类型+弱类型语言

image-20230211215110255

2.2 基础语法

基础数据类型

string, number, boolean, null, undefined 5种

image-20230211215436720

对象类型

image-20230211215421869

函数类型

image-20230211215639885

函数重载

不太懂

image-20230211220404080

数组类型

image-20230211220546345

TS补充类型：空类型、任意类型、枚举类型

image-20230211220717719

泛型

image-20230211220937856

image-20230211222444382

下面不懂

image-20230211222616485

image-20230211222628115

2.3 高级用法

联合/交叉类型

image-20230212225401697

image-20230212225648509

类型保护与类型守卫

以下代码只在JS可以运行，在TS会报错

image-20230212230113537

类型守卫的函数getIsIA()

image-20230212230129849

arg as IA类型断言：

reverse(string or obj)

type of string, then

else (type is obj) then

image-20230212230446269

高级类型

image-20230212232208201

image-20230212232239521

泛型：定义时类型不明确，使用时明确

image-20230212232300305

返回值类型

image-20230212232101783

image-20230212232043366

2.4 TS工程应用

image-20230212232413744

image-20230212232457311

avatar
文章
阅读
粉丝