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相关的知识~