为什么要学习TypeScript?
先贴上课件:
从中我们可以捕捉到几个关键词:“JavaScript的超集”、“强类型”、“可实时纠错”,这三个关键词其实就能很好的引出TypeScript的优势:
- 类型安全
TypeScript 是一种静态类型语言,它允许程序员在编码期间指定变量、函数参数和返回类型的类型,使得代码更加清晰易读,更容易维护。TypeScript 还提供了强制类型检查,它可以在编译时检查代码是否符合类型规定,避免了一些运行时错误,使得代码更加健壮和安全。
- 具有下一代“JS”特性
TypeScript 可以编译成纯 JavaScript 代码,因此它能够支持 ECMAScript 中的新特性,如箭头函数、类、模块等等。TypeScript 还提供了对 ECMAScript 最新版本(如 ES2022)中特性的支持,使得开发者可以使用最新的 JavaScript 语言特性。
- 完善的工具链
TypeScript 提供了一整套工具,如 tsc 编译器、tslint 代码风格检查器和 tsconfig.json 配置文件等等,这些工具的支持使得开发者可以更方便地编写、调试和维护 TypeScript 代码。此外,TypeScript 还可以与流行的代码编辑器和集成开发环境(如 Visual Studio Code、WebStorm)等进行集成,提供了强大的代码自动补全、重构和调试功能,大大提高了开发效率。
TypeScript基础
基础类型归纳
| 类型 | 描述 |
|---|---|
undefined | 表示变量未定义或值未被分配。 |
null | 表示值为 null 或一个空对象指针。 |
void | 表示没有任何类型。在函数中通常用于指示函数不返回任何值。 |
boolean | 表示布尔值,值为 true 或 false。 |
number | 表示数字,可以是整数或浮点数。 |
string | 表示字符串值。 |
symbol | 表示 ES6 中的符号类型。 |
object | 表示非原始类型,即任何不是 number、string、boolean、bigint、symbol、null 或 undefined 的类型。 |
any | 表示任何类型。如果变量没有指定类型,那么它默认为 any 类型。 |
never | 表示不会出现的值。在函数中通常用于指示函数不会返回任何值或会抛出异常。 |
unknown | 表示未知类型。与 any 类型不同的是,变量如果指定为 unknown 类型,那么它不能被直接使用,必须先经过类型判断后才能使用。 |
辨析any & never & unknown
直接上代码!
let x: any = "Hello, world!"; x = 123; x = true;在这个例子中,变量
x的类型为any,可以存储任何类型的值,包括字符串、数字和布尔值。
let x: unknown = "Hello, world!"; if (typeof x === "string") { console.log(x.toUpperCase()); }在这个例子中,变量
x的类型为unknown,它不能直接使用,必须经过类型判断后才能使用。在if语句中,我们使用typeof运算符判断变量x的类型是否为字符串,如果是,则调用字符串的toUpperCase()方法。
function throwError(): never { throw new Error("Something went wrong!"); }在这个例子中,
throwError()函数的返回值类型为never,表示它不会正常返回,而是抛出异常。
TS中的类
总的来说,TypeScript中的类与我们常用的面向对象语言中类的定义并没有什么逻辑上的不同。其在JS的基础上,增加了一些定义:
- 增加了public、private、protected修饰符
- 增加了抽象类
- 引入了interface来约束类
TypeScript进阶
type vs interface
相同之处:
- 都可以定义对象和函数
- 都允许继承
不同之处:
- interface-定义对象,type-定义别名方便使用
- type可以定义基本类型,interface不行
- interface可以合并重复声明,type不行(两个同名interface会自动合并成一个包含这两个接口里面所有成员的接口,但两个同名type会报错)
关于泛型
泛型是 TypeScript 中非常重要的一个特性,它可以让我们编写更加灵活、安全的代码。它有点类似C语言中的模板。
函数中可以使用泛型:
接口和类中也可以使用泛型: