一、TypeScript4简介

1.1、TypeScript4简介

TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范，TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 Java、C#这样的面向对象语言，可以让 JavaScript 开发大型企业项目。谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+ 就是基于 Typescript 语法，最新的 Vue 、React 也可以集成 TypeScript。Nodejs 框架中的 Nestjs、midway 中用的就是 TypeScript 语法。

一张图描述 TypeScript 和 JavaScript 之前的关系：

个人感觉它俩之间的关系有点类似 C 和 C++ 之间的关系，语法风格更类似 Java、C# 。

1.2、TypeScript4安装

打开CMD命令行，输入以下代码：

npm install -g typescript@4.1.2

1.3、TypeScript4项目初始化

打开CMD命令行，输入以下代码：

mkdir typescript-demo
cd typescript-demo
tsc --init

1.4、TypeScript4开发工具

开发工具选用： Visual Studio Code，已安装汉化插件

开发工具版本： VSCodeSetup-x64-1.51.1.exe

开发环境版本： node-v14.15.0-x64.msi

开发工具使用：Studio Code

按住快捷键 CTRL + SHIFT + ~ 调出当前项目的终端，我们需要在终端中输入命令，来执行 js目录中的已经编译好的代码。

二、TypeScript4数据类型

变量格式一：

let 变量名: 变量类型 = 初始化值;

变量格式二：

let 变量名: 变量类型 | undefined;
变量名 = 变量值;

2.1、布尔类型

let flag: boolean = true;
console.log(flag);

2.2、数字类型

整数型：

let num: number = 123;
console.log(num);

浮点型：

let num: number = 3.1415926;
console.log(num);

2.3、字符串类型

let str: string = "Hello,TypeScript";
console.log(str);

2.4、数组类型

第一种定义数组的方式：以数字类型数组为例

let arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr);

第二种定义数组的方式：以数字类型数组为例

let arr: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr);

2.5、元组类型

元组属于数组的一种，元组中的元素可以不必全部保持类型一致！

let user: [number, string];
let userId = 10086;
let userName = "Nick";
let randomBoolean = true;

user = [userId, userName];      // 正确
user = [userId, randomBoolean]; // 错误

2.6、枚举类型

枚举类型的介绍：

随着计算机的不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的数据。

例如：性别、月份、星期几、颜色、单位名、学历、职业等，都不是数值数据。

在其它程序设计语言中，一般用一个数值来代表某一状态，这种处理方法不直观，易读性差。

如果能在程序中用自然语言中有相应含义的单词来代表某一状态，则程序就很容易阅读和理解。

也就是说，事先考虑到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值，这种方法称为枚举方法，用这种方法定义的类型称枚举类型。

枚举类型的定义：

enum 枚举名 {
    标识符[= 整型常数/字符串],
    标识符[= 整型常数/字符串], 
    ...
    标识符[= 整型常数/字符串],
};

枚举类型的示例：

enum Flag {
    success,
    error,
    overtime
};

let s: Flag = Flag.overtime;
console.log(s);//2

代码解读：如果标识符没有赋值，它的值就是下标。

enum Flag {
    success = 200,
    error = 404,
    overtime = 500
};

let s: Flag = Flag.overtime;
console.log(s);//500

代码解读：如果标识符已经赋值，它的值就是被赋的值。

enum Flag {
    success,
    error = 100,
    overtime
};

let s: Flag = Flag.overtime;
console.log(s);//101

代码解读：如果标识符没有赋值，它的值就是下标，如果从中间突然指定了一个值，那么它之后的值都会从当前值开始重新计算。

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

let d: Direction = Direction.Up;
console.log(d);//UP

2.7、null类型

let n: null = null;

2.8、undefined类型

let u: undefined = undefined;

2.9、any类型

TypeScript 中的 any 类型表示任意数据类型。

enum Flag {
    success,
    error,
    overtime
};

let flag: any = true;//布尔型
let num: any = 123;//数字型
let str: any = 'Hello,TypeScript';//字符型
let arr: any = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];//数组型
let tuple: any = [10086, 'Nick'];//元组型
let e: any = Flag.success;//枚举型
let n: any = null;//null型
let u: any = undefined;//undefined型

2.10、void类型

TypeScript 中的 void 类型表示没有任何类型，一般用于定义方法的时候方法没有返回值。

function success(): void {
    console.log('执行成功了，我不需要返回值');
}

2.11、never类型

TypeScript 中的 never 类型是任何类型的子类型，也可以赋值给任何类型，但是没有类型是 never 的子类型或可以赋值给 never 类型，即使 any 类型也不可以赋值给never。这意味着声明 never 类型的变量只能被 never 类型所赋值。

function error(): never {
    throw new Error('抛出错误了');
}

2.12、组合类型

TypeScript 中支持一个变量可以赋予多种不同的变量类型，多个变量类型使用 | 分隔。

let num: number | null | undefined;

num = 3;
console.log(num);

num = null;
console.log(num);

num = undefined;
console.log(num);

参考文献：学习TypeScript4这一篇就够了_轻松的小希的博客-CSDN博客

TypeScript简介（上）|青训营