初学者这样玩 TypeScript，迟早进大厂系列！

arr2 = ['a', 'b', 'c'];

// arr2 = [1, 'b', 'c']; // 报错

console.log(arr2);

// 联合类型

let arr3:(number | string)[];// 表示定义了一个名称叫做 arr3 的数组, 这个数组中将来既可以存储数值类型的数据, 也可以存储字符串类型的数据

arr3 = [1, 'b', 2, 'c'];

// arr3 = [1, 'b', 2, 'c', false]; // 报错

console.log(arr3);

// 任意类型

let arr4:any[]; // 表示定义了一个名称叫做 arr4 的数组, 这个数组中将来可以存储任意类型的数据

arr4 = [1, 'b', false];

console.log(arr4);

// 元祖类型

// TS 中的元祖类型其实就是数组类型的扩展

// 元祖用于保存定长定数据类型的数据

let arr5:[string, number, boolean]; // 表示定义了一个名称叫做 arr5 的元祖, 这个元祖中将来可以存储 3 个元素, 第一个元素必须是字符串类型, 第二个元素必须是数字类型, 第三个元素必须是布尔类型

arr5 = ['a', 1, true];

// arr5 = ['a', 1, true, false]; // 超过指定的长度会报错

arr5 = ['a', 1, true];

console.log(arr5);

5. TypeScript 枚举类型

• 枚举类型是 TS 为 JS 扩展的一种类型, 在原生的 JS 中是没有枚举类型的

/*

枚举用于表示固定的几个取值

例如: 一年只有四季、人的性别只能是男或者女

*/

enum Gender{ // 定义了一个名称叫做 Gender 的枚举类型, 这个枚举类型的取值有两个, 分别是 Male 和 Femal

Male,

Femal

}

let val:Gender; // 定义了一个名称叫做 val 的变量, 这个变量中只能保存 Male 或者 Femal

val = Gender.Male;

val = Gender.Femal;

// val = 'nan'; // 报错

// val = false;// 报错

// 注意点: TS 中的枚举底层实现的本质其实就是数值类型, 所以赋值一个数值不会报错

// val = 666; // 不会报错

// console.log(Gender.Male); // 0

// console.log(Gender.Femal);// 1

// 注意点: TS 中的枚举类型的取值, 默认是从上至下从 0 开始递增的

// 虽然默认是从 0 开始递增的, 但是我们也可以手动的指定枚举的取值的值

// 注意点: 如果手动指定了前面枚举值的取值, 那么后面枚举值的取值会根据前面的值来递增

// console.log(Gender.Male); // 6

// console.log(Gender.Femal);// 7

// 注意点: 如果手动指定了后面枚举值的取值, 那么前面枚举值的取值不会受到影响

// console.log(Gender.Male); // 0

// console.log(Gender.Femal);// 6

// 注意点: 我们还可以同时修改多个枚举值的取值, 如果同时修改了多个, 那么修改的是什么最后就是什么

// console.log(Gender.Male); // 8

// console.log(Gender.Femal);// 6

// 我们可以通过枚举值拿到它对应的数字

console.log(Gender.Male); // 0

// 我们还可以通过它对应的数据拿到它的枚举值

console.log(Gender[0]); // Male

// 探究底层实现原理

/*

var Gender;

(function (Gender

【一线大厂Java面试题解析+核心总结学习笔记+最新架构讲解视频+实战项目源码讲义】
浏览器打开：qq.cn.hn/FTf 免费领取

) {

// Gender[key] = value;

Gender[Gender["Male"] = 0] = "Male";

Gender[Gender["Femal"] = 1] = "Femal";

})(Gender || (Gender = {}));

let Gender = {};

Gender["Male"] = 0;

Gender[0] = "Male";

Gender["Femal"] = 1;

Gender[1] = "Femal";

• */

6. any-void 类型

// any 类型

// any 表示任意类型, 当我们不清楚某个值的具体类型的时候我们就可以使用 any

// 一般用于定义一些通用性比较强的变量, 或者用于保存从其它框架中获取的不确定类型的值

// 在 TS 中任何数据类型的值都可以负责给 any 类型

// let value:any; // 定义了一个可以保存任意类型数据的变量

// value = 123;

// value = "abc";

// value = true;

// value = [1, 3, 5];

// void 类型

// void 与 any 正好相反, 表示没有任何类型, 一般用于函数返回值

// 在 TS 中只有 null 和 undefined 可以赋值给 void 类型

function test():void {

console.log("hello world");

}

test();

let value:void; // 定义了一个不可以保存任意类型数据的变量, 只能保存 null 和 undefined

// value = 123; // 报错

// value = "abc";// 报错

// value = true;// 报错

// 注意点: null 和 undefined 是所有类型的子类型, 所以我们可以将 null 和 undefined 赋值给任意类型

// value = null; // 不会报错

value = undefined;// 不会报错

7. Never-object 类型

// Never 类型

// 表示的是那些永不存在的值的类型

// 一般用于抛出异常或根本不可能有返回值的函数

// function demo():never {

// throw new Error('报错了');

// }

// demo();

// function demo2():never {

// while (true){}

// }

// demo2();

// Object 类型

// 表示一个对象

let obj:object; // 定义了一个只能保存对象的变量

// obj = 1;

// obj = "123";

// obj = true;

obj = {name:'lnj', age:13};

console.log(obj);

8. 类型断言

• 什么是类型断言?

• TS 中的类型断言和其它编程语言的类型转换很像, 可以将一种类型强制转换成另外一种类型

• 类型断言就是告诉编译器, 你不要帮我们检查了, 相信我，我知道自己在干什么。

/*

例如: 我们拿到了一个 any 类型的变量, 但是我们明确的知道这个变量中保存的是字符串类型

此时我们就可以通过类型断言告诉编译器, 这个变量是一个字符串类型

此时我们就可以通过类型断言将 any 类型转换成 string 类型, 使用字符串类型中相关的方法了

• */

let str:any = 'it666';

// 方式一

// let len = (<string>str).length;

// 方式二

// 注意点: 在企业开发中推荐使用 as 来进行类型转换(类型断言)

// 因为第一种方式有兼容性问题, 在使用到了 JSX 的时候兼容性不是很好

let len = (str as string).length;

console.log(len);

码字不易，在线求个三连支持。

大家记得收藏前，先点个赞哦！好的文章值得被更多人看到。