文章目录
简介
-
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
-
TypeScript 由微软开发的自由和开源的编程语言。
-
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
JavaScript 与 TypeScript 的区别
TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
安装
通过 npm 全局安装：npm install -g typescript
通过 yarn 全局安装：yarn global add typescript
查看版本号：tsc -v
TypeScript 在全局安装后，我们可以在任意位置使用 tsc 命令，tsc 命令负责编译 TypeScript 文件为 JavaScript 文件。
基础类型
1. 数字
和 JavaScript 一样，TypeScript 里的所有数字都是浮点数。 这些浮点数的类型是 number。
除了支持十进制和十六进制字面量，TypeScript 还支持 ECMAScript 2015 中引入的二进制和八进制字面量。
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制
let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制
2. 字符串
使用 string 表示文本数据类型，使用单引号（’）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式
let name: string = "blog";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;
3. 布尔值
最基本的数据类型就是简单的 true/false 值，在JavaScript 和 TypeScript 里叫做 boolean
let flag: boolean = true;
4. 数组
TypeScript 像 JavaScript 一样可以操作数组元素。 有两种方式可以定义数组：
// 在元素类型后面加上[]
let arr: number[] = [1, 2];
// 或者使用数组泛型
let arr: Array<number> = [1, 2];
5. 函数
// 在函数上直接声名 参数any 和 返回值boolean
function isFalsy(val: any): boolean {
return val === 0 ? false : !val;
}
// 函数没有返回值则使用void
function hello(str: string): void {
alert(str);
}
6. any
声明为 any 的变量可以赋予任意类型的值，意味着不做任何类型检查，失去TS的意义 （尽量避免使用）
let x: any = 1; // 数字类型
x = 'hello'; // 字符串类型
x = false; // 布尔类型
7. void
用于标识方法返回值的类型，表示该方法没有返回值或返回 undefined
function warnUser(): void {
console.log("This is my warning message");
}
8. null 和 undefined
null
-
在 JavaScript 中 null 表示 “什么都没有”
-
null是一个只有一个值的特殊类型。表示一个空对象引用
-
用 typeof 检测 null 返回是 object
undefined
-
在 JavaScript 中, undefined 是一个没有设置值的变量。
-
typeof 一个没有值的变量会返回 undefined。
-
Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。
let x: number;
x = 1; // 运行正确
x = undefined; // 运行错误
x = null; // 运行错误
上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined， 可以用 | 来支持多种类型，示例代码如下：
let x: number | null | undefined;
x = 1; // 运行正确
x = undefined; // 运行正确
x = null; // 运行正确
9. object
object表示非原始类型，也就是除 number，string，boolean，symbol，null 或 undefined 之外的类型
function hello(obj: object | null): void {
console.log(obj);
}
hello({ name: 'zhangsan' });
hello(null);
10. 元组
Tuple 类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
x[2] = 'world'; // OK, 字符串可以赋值给(string | number)类型
x[3] = true; // Error, 布尔不是(string | number)类型
11. 枚举
enum 类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
12. never
never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环），示例代码如下：
let x: never;
let y: number;
// 运行错误，数字类型不能转为 never 类型
x = 123;
// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();
// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();
// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
throw new Error(message);
}
// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
while (true) {}
}
啥时候需要声明类型
理论上来说在我们声明任何变量的时候都需要声明类型（包括普通变量、函数、组件、react hook 等），声明函数、组件、react hook 等需要声明参数和返回值的类型
但是在很多情况下，TS可以帮助我们自动推断，我们就不用声明了，比如：
-
这里虽然没有显示声明，但是ts自动推断这个变量是 number 类型：
. -
ts自动推断函数返回值这是个 number 类型：
