千锋教育前端TypeScript入门视频教程(陆神顶配版TS入门教程)

TypeScript 基础类型
js的数据类型
number 、string、 null 、 undefined、 boolean、 object、 function、 array
ts新增的数据类型
any任意类型 enum 枚举 联合类型 字面量类型 unknown void
Boolean 类型
声明一个变量flag,同时指定它的类型为boolean
const flag: boolean = true;
Number 类型
声明一个变量a,同时指定它的类型为number
const count: number = 10;
String 类型
声明一个变量str,同时指定它的类型为string
let name: string = "树哥";
Enum 枚举类型
枚举类型用于定义数值集合,使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。,如周一到周日,方位上下左右等
· 普通枚举
1. enum Color {
2. RED,
3. PINK,
4. BLUE,
5. }
6.
7. const red: Color = Color.RED;
8. console.log(red); // 0
初始值默认为 0 其余的成员会会按顺序自动增长 可以理解为数组下标
· 设置初始值
1. enum Color {
2. RED = 2,
3. PINK,
4. BLUE,
5. }
6. const pink: Color = Color.PINK;
7. console.log(pink); // 3
· 字符串枚举
1. enum Color {
2. RED = "红色",
3. PINK = "粉色",
4. BLUE = "蓝色",
5. }
6.
7. const pink: Color = Color.PINK;
8. console.log(pink); // 粉色
· 常量枚举
使用 const 关键字修饰的枚举,常量枚举与普通枚举的区别是,整个枚举会在编译阶段被删除 我们可以看下编译之后的效果
1. const enum Color {
2. RED,
3. PINK,
4. BLUE,
5. }
6.
7. const color: Color[] = [Color.RED, Color.PINK, Color.BLUE];
8. console.log(color); //[0, 1, 2]
9.
10. //编译之后的js如下:
11. var color = [0 /* RED */, 1 /* PINK */, 2 /* BLUE */];
12. // 可以看到我们的枚举并没有被编译成js代码 只是把color这个数组变量编译出来了
Array 类型
对数组类型的定义有两种方式:
1. const arr: number[] = [1,2,3];
2. const arr2: Array<number> = [1,2,3];
元组(tuple)类型
上面数组类型的方式,只能定义出内部全为同种类型的数组。对于内部不同类型的数组可以使用元组类型来定义
元组( Tuple )表示一个已知数量和类型的数组,可以理解为他是一种特殊的数组
元组,元组就是固定长度的数组 语法:[类型, 类型, 类型]
const tuple: [number, string] = [1, "zhangmazi"];
需要注意的是,元组类型只能表示一个已知元素数量和类型的数组,长度已指定,越界访问会提示错误。例如,一个数组中可能有多种类型,数量和类型都不确定,那就直接any[]。
undefined和null
默认情况下 null 和 undefined 是所有类型的子类型。 也就是说你可以把 null 和 undefined 赋值给其他类型。
let a: undefined = undefined;
let b: null = null;
let str: string = 'zhangmazi';
str = null; // 编译正确
str = undefined; // 编译正确
如果你在tsconfig.json指定了"strictNullChecks":true ,即开启严格模式后, null 和 undefined 只能赋值给 void 和它们各自的类型。 (这里感谢评论区指出) null 和 undefined 只能给它们自己的类型赋值
// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined; // 编译错误
x = null; // 编译错误
但是 undefined 可以给 void 赋值
let c:void = undefined // 编译正确
let d:void = null // 编译错误
any 类型
any会跳过类型检查器对值的检查,任何值都可以赋值给any类型 any类型就是js(建议不要用)
ts会有命名规范,不能命名为any
any 表示的是任意类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
使用TS时,不建议使用any类型
声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any (隐式的any)
any是可以赋值任何类型
let value: any = 1;
value = "zhangmazi"; // 编译正确
value = []; // 编译正确
value = {};// 编译正确
void 类型
void 意思就是无效的, 一般只用在函数上,告诉别人这个函数没有返回值。
function sayHello(): void {
console.log("hello 啊,树哥!");
}
never 类型
抛出异常
never 类型表示的是那些永不存在的值的类型。 例如never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型
值会永不存在的两种情况:
· 1 如果一个函数执行时抛出了异常,那么这个函数永远不存在返回值(因为抛出异常会直接中断程序运行,这使得程序运行不到返回值那一步,即具有不可达的终点,也就永不存在返回了)
· 2 函数中执行无限循环的代码(死循环),使得程序永远无法运行到函数返回值那一步,永不存在返回。
// 异常
function error(msg: string): never { // 编译正确
throw new Error(msg);
}
// 死循环
function loopForever(): never { // 编译正确
while (true) { };
}
Unknown 类型
unknown与any一样,所有类型都可以分配给unknown:
unknown 表示未知类型的值
只能赋值给unkonwn any
let value: unknown = 1;
value = "zhangmazi"; // 编译正确
value = false; // 编译正确
unknown与any的最大区别是:
任何类型的值可以赋值给any,同时any类型的值也可以赋值给任何类型。unknown 任何类型的值都可以赋值给它,但它只能赋值给unknown和any