导航

理解

什么是 TypeScript（TS）

TypeSeript 简称 TS

TS 和 JS 之间的关系其实就是 Less/Sass 和 CSS 之间的关系

就像 Less/Sass 是对 CSS 进行扩展一样，TS 也是对 JS 进行扩展

就像 Less/Sass 最终会转换成 CSS 一样，我们编写好的 TS 代码最终也会换成 JS

为什么需要 TypeScript

因为 JavaScript 是弱类型，很多错误只有在运行时才会被发现

而 TypeScript 是强类型，它提供了一套静态检测机制，可以帮助我们在编译时就发现错误

TypeScript 特点

支持最新的 JavaScript 新特特性

支持代码静态检查

支持诸如 C,C++，Java,Go 等后端语言中的特性

（枚举、泛型、类型转换、命名空间、声明文件、类、接口等）

安装与编译

npm install typescript -g # 全局安装

tsc demo.ts # 编译ts文件为js文件

基础类型

数值、布尔、字符串类型

TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用

数值类型 number

// 数值类型number
let val: number; // 定义了一个名称叫做 val 的变量，这个变量中将来只能存储数值类型的数据
val = 123;
// val = '123'; // 报错
// 注意点：其它的用法和JS一样
// val = 0x11;
console.log(val);

布尔类型 boolean

let val: boolean;
val = true;
// val = 1; // 报错

字符串类型 string

let val: string;
val = '123';
val = `val=${val}`;

数组和元祖类型

⭐️ 数组类型

// 方式一
let arr1: Array<number>;
arr1 = [1, 3, 5];
// arr1 = ['a', 3, 5]; // 报错

// 方式二
let arr2: string[];
arr2 = ['a', 'b', 'c'];
// arr2 = ['a', 1, 'c']; // 报错

⚪️ 联合类型

let arr3: (number | string)[];
// or let arr3: Array<string | number>;
arr3 = [1, 'b', 2, 'c'];

⚪️ 任意类型

let arr4: any[];
arr4 = [1, 'b', 'false'];

元祖

TS 中的元祖类型其实就是数组类型的扩展元相用于保存定长定数据类型的数据

let arr5: [string, number, boolean];
arr5 = ['a', 1, true];

⭐️ 枚举类型

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

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

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

enum Gender {
  Male,
  Female
}

let val: Gender;
val = Gender.Male;
val = Gender.Female;
// val = 'nan'; // 报错
// val = false'; // 报错

// 注意点：TS中的枚举底层实现的本质其实就是数值类型，所以赋值一个数值不会报错
val = 666; // 不会报错
console.log(Gender.Male); // 0
console.log(Gender.Female); // 1

enum Gender {
  Male: 6,
  Female
}

// 注意点：TS中的枚举类型的取值，默认是从上至下从0开始递增的
虽然默认是从0开始递增的，但是我们也可以手动的指定枚举的取值的值
// 注意点：如果手动指定了前面枚举值的取值，那么后面枚举值的取值会根据前面的值来递增
console.log(Gender.Male); // 6
console.log(Gender.Female); // 7

enum Gender {
  Male,
  Female = 6
}
// 注意点：如果手动指定了后面枚举值的取值，那么前面枚举值的取值不会受到影响
console.log(Gender.Male); // 0
console.log(Gender.Female); // 6

enum Gender {
  Male = 8,
  Female = 6
}

// 注意点：我们还可以同时修改多个枚举值的取值，如果同时修改了多个，那么修改的是什么最后就是什么
console.log(Gender.Male); // 8
console.log(Gender.Female); // 6

// 我们可以通过枚举值拿到它对应的数字
console.log(Gender.Male); // 0
//我们还可以通过它对应的数据拿到它的枚举值
console.log(Gender[0]); // Male

探究底层实现原理

var Gender;
(function (Gender) {
  // Gender[key] = value;
  Gender[Gender["Male"] = 0] = "Male";
  Gender[Gender["Female"] = 1] = "Female";
})(Gender || (Gender = {}));

Gender[Gender['male'] = 0] 就是把 Gender['male'] = 0 的结果 0 赋值给了 Gender 对象
- 代码转换为 Gender[0] = 'Male'

let Gender = {};
Gender["Male"] = 0;
Gender[0] = "Male";
Gender["Female"] = 1;
Gender[1] = "Female";
// 其实是给 Gender 对象添加了4个属性

数字枚举

数字枚举的取值默认从0开始递增

数字枚举的取值可以是字面量，也可以是常量，也可以是计算的结果

const init = 666;
const getNum = (): number => {
    return 888;
}
enum Gender {
    // Male,
    // Male = 66,
    // Male = init, // 注意点：如果使用常量给前面的枚举值赋值了，那么后面的枚举值也需要手动的赋值
    // Female = 9
    Male = getNum(), // 注意点：如果使用计算结果给前面的枚举值赋值了，那么后面的枚举值也需要手动的赋值
    Female = 999
}

console.log(Gender.Male);
console.log(Gender.Female);

字符串枚举

如果使用字符串给前面的枚举值赋值了，那么后面的枚举值也必须手动赋值

enum Gender {
    Male = 'Lance',
    Female = 'Linda' // 如果使用字符串给前面的枚举值赋值了，那么后面的枚举值也必须手动赋值
}

console.log(Gender.Male);
console.log(Gender.Female);

和数字枚举不一样，字符串枚举不能使用常量或者计算结果给枚举值赋值

Untitled

虽然字符串枚举不能够使用常量或者计算结果给枚举值赋值，但是它可以使用内部的其它枚举值来赋值

enum Gender {
    Male = 'Lance',
    Female = 'Linda',
    Yao = Male
}

console.log(Gender.Male);
console.log(Gender.Female);
console.log(Gender.Yao);

枚举反向映射

可以根据枚举值获取到原始值也可以根据原始值获取到枚举值

enum Gender {
    Male,
    Female
}

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

异构枚举

枚举中既包含数字又包含字符串，我们就称之为异构枚举

enum Gender {
    Male = 233,
    Female = 'Linda',
}

console.log(Gender.Male);
console.log(Gender.Female);

注意点：如果是字符串枚举，那么无法通过原始值获取到枚举值

enum Gender {
    Male = 233,
    Female = 'Linda',
}

console.log(Gender.Male);
console.log(Gender.Female);
console.log(Gender[6]);
// console.log(Gender['Linda']); // 报错
console.log(Gender);