TS简明教程1

为了后续内容 (如nestjs 等框架)的开展，本文更新 TS 相关的基础知识。

关注获取更多TS 精品文章

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。
TypeScript 可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。
Typescript 由微软开发，与 C# 出自同一人之手!

TS 与 JS 的区别

TS 是 JS 的超集，扩展了 TS 的语法，因此现有的 JS 代码可 直接与 TS 一起工作无需任何修改，TS 通过类型注解提供编译时的静态类型检查。

由于 TS 与 JS 语法大部分一致，本文只对有差异的部分进行讲解。

目录

有些知识点可能是交叉的建议通读完本文再开始真正的开发，这样疑惑会比较少一点

1. 数据类型与类型断言
2. 函数
3. 接口和类
4. 泛型
5. 枚举
6. 命名空间和模块
7. 装饰器(注解)
8. 高级类型
9. 声明文件
10. tsconfig.json

11. 示例

    1. React 示例(前端)
    2. Koa 示例(后端)

数据类型与类型声明

TS 使用 : 语法对类型进行声明。基础类型如下：

布尔类型

TS 使用 boolean 来声明布尔类型。

let succeed: boolean = false; // 声明 succeed 为 boolean 类型

数字

TS 对数字的支持与 JS 一致，所有数字都是浮点数，所以 TS 并不存在 int,float 之类的数字类型声明，只有 number。
除了支持十进制和十六进制，TS 还支持 ES6 的二进制和八进制数字。

const age: number = 16; // 声明年龄为数字类型
const price: number = 99.99; // 声明价格为数字类型

字符串

TS 使用 string 声明字符串，和 JS 一样，支持 单引号 和双引号。

let name: string = "demo";

name = "demo1";

const description = ` 我是 ${name}`; // ES6 语法

数组

TS 使用 类型 [] 声明数组的元素类型，与 JS 不一样的地方在于，TS中一旦指明一个类型，所有元素必须是该类型。JS则可以往数组放任意类型的元素。

const numbers: number[] = [];
numbers.push(1);
numbers.push(2);
numbers.push('3'); // 错误，'3' 不是数字类型

对象

与 JS 一样，TS 的对象也是由 键值对 构成，类型声明可以分别作用与 键类型 以及 值类型。

声明语法：{[key 名称: key 类型]: 值类型}
key 名称可以 自定义 ，如key,index 都是合法的。

const config: {[key: string]: string} = {}; // 声明键和值都只能是字符串类型
config.version = '1.0.0';

const ages: {[key: number]: number} = {}; // 声明键值对都是数字类型
ages[10] = '1.0.0'; // 赋值

上例中赋值语法虽然和数组一致，但是 ages 对象的长度为 1，如果 ages 是数组的话，长度为 11。(0- 9 个元素为 undefined)

任意类型

TS 用 any 用来声明 任意类型 ，被any 修饰的变量 (或常量以及返回值等等) 在编译阶段会 直接通过 ，但是运行阶段可能会 抛出 undefined 或 null 相关错误。

any的出现使得现有的 JS 代码能够很快速的切换到 TS。

let age:any = 10;
age = 'name'; // 编译通过

空类型

TS 使用 void 声明空类型。与 any 相反，表示没有任何类型，常用在函数返回值中。
void类型只能被赋值为 null 和undefined。

function test(name: string): void { // 声明函数无返回值，编译成 JS 之后取返回值会取到 undefined，与 JS 一致
    console.log(name);
}

let v: void = null;

null 和 undefined

TS 中 默认情况 下，null和 undefined 是所有类型的子类型，换句话说，你可以把 null 和undefined直接赋值给 number/string/boolean 等类型。
但是不能反过来干，你不能把 number/string/boolean 类型赋值给 null 或者undefined

let u: undefined = undefined;
let n: null = null;

never

never是 100% 不存在的值 的类型。比如函数中直接抛出异常或者有死循环。

function error(message: string): never {throw new Error(message);
}

function fail() { // TS 自动类型推断返回值类型为 never，类型推断在下文中会提到
    return error('failed');
}

function loop(): never { // 死循环，肯定不会返回
    while(true) {}}

never和 void 区别

1. 被 void 修饰的函数 能正常终止，只不过没有返回值
2. 被 never 修饰的函数 不能正常终止，如抛出异常或死循环

枚举

枚举是对 JS 的一个扩展。TS 使用 enum 关键字定义枚举类型。

enum Color {
    Red,
    Green,
    Yellow
}
let c: Color = Color.Red;

Object

TS 使用 object 类修饰对象类型，TS 中表示 非原始类型。原始类型如下：

1. number
2. string
3. boolean
4. null
5. undefined
6. symbol(ES6 新出类型)

let a: object = {}; // ok
let a: object = 1; // error
let a: object = Symbol(); / error

虽然 Symbol 长得像 对象类型 ，不过在ES6 规范中，人家就是 原始类型。

函数声明

TS 中可以对函数的 形参 以及 返回值 进行类型声明。

function a(name: string, age: number): string {return `name:${name},age:${age}`;
}

类型断言

类型断言说白了就是 告诉编译器，你按照我指定的类型进行处理。

let value: any = 'a string';
const length: number = (<string>value).length;

编译结果(正常编译且正常运行)

let value = 'a string';
const length = value.length;

类型推断

当没有手动指定类型时，TS 编译器利用类型推断来推断类型。
如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

let num = 2; // 推断为 number 类型

函数

TS 函数与 JS 函数没有大的区别，多了一个类型系统。

function test(name: string) { // 自动推断返回类型为 string
    return name;
}

可选参数

TS 中函数每个形参都是 必须 的，当然你可以传递 null 和undefined，因为 他们是值 。但是在 JS 中，每个形参都是可选的，没传的情况下取值会得到undefined。
TS 中 在参数名后面使用? 号指明该参数为可选参数

function test(name: string, age?: number) {console.log(`${name}:${age}`);
}
test('a'); // 输出 a:undefined

默认参数

与 ES6 一致，TS 也的函数也支持默认参数。需要注意的是 可选参数 和默认参数 是互斥 的。因为如果使用了默认参数，不管外部传不传值，取值的时候都是有值的，和可选参数矛盾。

function test(name: string, age: number = 10) {console.log(`${name}:${age}`)
}
test('a'); // 输出 a:10

剩余参数

剩余参数和 ES6 表现一致，但是多了类型声明：

function test(name1: string, ...names: string[]) {console.log(name1, names);
}
test('1','2','3');// 输出 1 ['2', '3']

this 执行

TS 中 this 指向和 JS 一致，这里不做赘述。

结语

未完待续~ 欢迎加我交流 TS 相关的知识~