整体介绍

TypeScript带来了什么
- JS类型安全
- 下一代JS特性
- 完善的工具链

不仅仅是一门语言，更是生产力工具。

更多资料

TS开源教程

TS到JS在线编译

TS基础

基础类型

定义变量：

let decLiteral: number = 6;

枚举 enum

enum Direction { 
    Up = 1, 
    Down, 
    Left, 
    Right, 
}

定义了一个数字枚举， Up使用初始化为 1。其余的成员会从 1开始自动增长。换句话说， Direction.Up的值为 1， Down为 2， Left为 3， Right为 4。

enum Direction { 
    Up, 
    Down, 
    Left, 
    Right, 
}

现在， Up的值为 0， Down的值为 1等等。每个枚举成员的值都是不同的。可以由枚举的值得到它的名字:

enum Color {Red = 1, Green, Blue} 
let colorName: string = Color[2]; 
console.log(colorName); // 显示'Green'因为上面代码里它的值是2

any
- 为编程阶段还不清楚类型的变量指定一个类型
unknown
- 可以保证类型安全
- 与 any 一样，所有类型都可以分配给unknown
- 只能将 unknown 类型的变量赋值给 any 和 unknown
- 如果不缩小类型，就无法对 unknown 类型执行任何操作
never
- 永不存在的值的类型
- eg. 总是会抛出异常，或根本就不会有返回值的函数表达式的返回值类型

元组：数组的特殊形式需要标注数组中每一个元素的类型

   // Declare a tuple type 
   let x: [string, number]; 
   // Initialize it 
   x = ['hello', 10]; // OK 
   // Initialize it incorrectly 
   x = [10, 'hello']; // Error

参考来源：TypeScript 手册

www.tslang.cn/docs/handbo…

函数类型

定义：TS定义函数类型时要定义输入参数类型和输出类型
输入参数：参数支持可选参数和默认参数。
输出参数：输出可以自动推断，没有返回值时，默认为void类型
函数重载：名称相同但参数不同，可以通过重载支持多种类型

interface

定义：接口是为了定义对象类型

特点：

可选属性: ?
只读属性: readonly
可以描述函数类型
可以描述自定义属性

interface RandomKey {
    [propName: string]: string
}
const obj: RandomKey = {
    a: "hello',
    b: 'world',
    c: 'typescript',
}

总结：接口非常灵活duck typing

interface SquareConfig { 
    color?: string; 
    width?: number; 
} 
function createSquare(config: SquareConfig): {color: string; area: number} { 
    let newSquare = {color: "white", area: 100}; 
    if (config.color) { newSquare.color = config.color; } 
    if (config.width) { newSquare.area = config.width * config.width; } 
    return newSquare; 
} 

let mySquare = createSquare({color: "black"});

类

定义：写法和JS差不多，增加了一些定义
特点：
- 增加了public、 private（继承类或实例都不可用）、 protected（继承类可用，实例不可用）修饰符
- 抽象类 abstract class:
  - 只能被继承，不能被实例化
  - 作为基类，抽象方法必须被子类实现
- interface约束类，使用implements关键字

TS进阶

高级类型

联合类型 |
- let num: number | string

交叉类型 &

interface Person{
    name: string
    age: number
}
type Student = Person & { grade: number ]

类型断言 as

类型别名(type VS interface)

interface A{
x: number;
y: string;
}

type B = {
x: number;
y: string;
}

定义：给类型起个别名
- 相同点：
  - 都可以定义对象或函数
  - 都允许继承
- 差异点：
  - interface是 TS 用来定义对象，type 是用来定义别名方便使用;
  - type 可以定义基本类型，interface 不行 ;
  - interface 可以合并重复声明，type 不行;

关于差异，推荐阅读：

TS中的接口（interface）与类型别名(type alias) blog.csdn.net/qq_42760049…

泛型 Generics

使用泛型来创建可重用的组件：一个组件可以支持多种类型的数据；用户可以以自己的数据类型来使用组件
例子：

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: <T>(arg: T) => T = identity;

<>里面写类型参数，一般用T表示
使用时有两种方法指定类型
- 定义要使用的类型
- 通过TS类型推断，自动推导类型
泛型的作用是临时占位，之后通过传来的类型进行推导

工具类型

typeof: 获取类型

keyof: 获取所有键

in: 遍历枚举类型

T[K]: 索引访问

extends: 泛型约束

Partial<T>: 将类型属性变为可选
Required<T>: 将类型属性变为必选
Readonly<T>: 将类型属性变为只读
Pick、Record...

工程向

声明文件

declare: 三方库需要类型声明文件
.d.ts: 声明文件定义
@types:三方库TS类型包
tsconfig.json: 定义TS的配置

TypeScript | 青训营笔记