这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
一、本堂课重点内容：
- TypeScript发展历史
- TypeScript的优点
- TypeScript基本类型
二、详细知识点介绍：
TypeScript发展历史
- 2012-10: 微软发布了 TypeScript 第一个版本 (0.8)
- 2014-10: Angular 发布了基于 TypeScript 的 2.0 版本
- 2015-04: 微软发布了 Visual Studio Code
- 2016-05: @types/react 发布，TypeScript 可开发 React
- 2020-09: Vue 发布了 3.0 版本，官方支持 TypeScript
- 2021-11: v4.5版本发布
从发展历史中我们可以看到，前端三大框架Angular、Vue、React都支持了TypeScript，发展前景十分广阔。
TypeScript的优点
- 可读性增强: 基于语法解析TSDoc，ide增强
- 可维护性增强: 在编译阶段暴露大部分错误
- 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；
- TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；
- TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
- 同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS
总体来说，在多人合作的大型项目中，获得更好的稳定性和开发效率
基本类型
- 类型声明
-
- 类型声明是TS非常重要的一个特点
- 通过类型声明可以指定TS中变量（参数、形参）的类型
- 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
- 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
- 语法：
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{
...
}
- 自动类型判断
-
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
- 类型：
| 类型 | 例子 | 描述 |
|---|---|---|
| number | 1, -33, 2.5 | 任意数字 |
| string | 'hi', "hi", hi | 任意字符串 |
| boolean | true、false | 布尔值true或false |
| 字面量 | 其本身 | 限制变量的值就是该字面量的值 |
| any | * | 任意类型 |
| unknown | * | 类型安全的any |
| void | 空值（undefined） | 没有值（或undefined） |
| never | 没有值 | 不能是任何值 |
| object | {name:'孙悟空'} | 任意的JS对象 |
| array | [1,2,3] | 任意JS数组 |
| tuple | [4,5] | 元素，TS新增类型，固定长度数组 |
| enum | enum{A, B} | 枚举，TS中新增类型 |
- number
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
- boolean
let isDone: boolean = false;
- string
let color: string = "blue";
color = 'red';
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
I'll be ${age + 1} years old next month.`;
- 字面量
-
- 也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
- any
let d: any = 4;
d = 'hello';
d = true;
- unknown
let notSure: unknown = 4;
notSure = 'hello';
- void
let unusable: void = undefined;
- never
function error(message: string): never {
throw new Error(message);
}
- object（没啥用）
let obj: object = {};
- array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
- tuple
let x: [string, number];
x = ["hello", 10];
- enum
enum Color {
Red,
Green,
Blue,
}
let c: Color = Color.Green;
enum Color {
Red = 1,
Green,
Blue,
}
let c: Color = Color.Green;
enum Color {
Red = 1,
Green = 2,
Blue = 4,
}
let c: Color = Color.Green;
- 类型断言
-
- 有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：
-
-
- 第一种
-
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;
-
-
- 第二种
-
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;
三、课后个人总结：
- 我在学校里其实基本没怎么听说过TS，但是培训的时候才发现TS越发成为主流，所以说眼界很重要啊。
