TS简明教程1

jiezi

5 年前

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

关注获取更多TS 精品文章

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

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

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

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

数据类型与类型断言
函数
接口和类
泛型
枚举
命名空间和模块
装饰器(注解)
高级类型
声明文件
tsconfig.json
示例
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;

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

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

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 区别

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

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

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

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

number
string
boolean
null
undefined
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']

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

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

TS简明教程1

TS 与 JS 的区别

目录

数据类型与类型声明

布尔类型

数字

字符串

数组

对象

任意类型

空类型

null 和 undefined

never

枚举

Object

函数声明

类型断言

类型推断

函数

可选参数

默认参数

剩余参数

this 执行

结语