深入浅出TypeScript

简单的基础、后面在使用过程中再深入学习。

TS 官网：www.typescriptlang.org/

TS语法学习参考文章：juejin.cn/post/722406…

为什么要学习TS

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

TS 和 JS 简单对比：

TS带来了什么？

类型安全
下一代JS特性
完善的工具链

TS相关推荐：

TS开源教程及应用：github.com/dzharii/awe…

TS到JS在线编译：www.typescriptlang.org/play?#code/…

TS基础

函数类型

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

interface

定义：接口是为了定义对象类型
特点：
- 可选属性: ?
- 只读属性: readonly
- 可以描述函数类型
- 可以描述自定义属性
总结：接口非常灵活duck typing

类

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

TS进阶

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

泛型

软件工程中，我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件, 一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

泛型简介：

泛型工具类型-基础操作符：

typeof：获取类型
keyof：获取所有键
in：遍历枚举类型
T[k]：索引访问
extends：泛型约束

泛型工具类型-常用工具类型：

实战&工程向

声明文件：

ts
复制代码
import { axios } from "node_modules/vue/types/umd";

interface API {
    api11: {
        id: number;
    };
    api22: {
        id: number;
        comments: string;
    };
}

function request<T extends keyof API>(url: T, data: API[T]) {
    return axios.post(url, data);
}

request("api11", {
    id: 1,
    comments: "url错误"
});

request("api22", {
    id: 1
});

作者：安酱
链接：juejin.cn/post/722624…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

深入浅出TypeScript｜ 青训营笔记