TypeScript 知识体系（不断完善中...）概述 TS 内容概要： TS简介：特性、发展历史、初识TS 类型基础：

TypeScript logo.jpeg

概述

内容概要：

TS简介：特性、发展历史、初识TS
类型基础：原始数据类型、对象类型、其他类型、类型断言
类型进阶：类型适配、组合类型、类型守卫、类型函数、类型（接口、class、泛型）
类型扩展：装饰器、泛型工具、高级类型、模块化、生态
工程实践：tsc编译，tsconfig配置，eslint配置
练习操练：语法练习、项目练习、类型体操

希望通过本文能对你了解和构建TS知识体系所有帮助，也欢迎点赞和留言。

一、TS简介

1.1 重塑“类型思维”

Atwood定律：任何能用JavaScript实现的应用，最终都会用JavaScript实现

这些年，JavaScript应用范围越来越广阔：从移动端到后端服务、从iot到神经网络。

但对语言有了要求的更高，如安全性、健壮性、可维护性。

尽管ES标准有了长足的进步，但在类型检查方面无所建树。

没有类型检测导致的不愉快的场景

调用别人写的函数，但是没有任何注释，只能硬着头皮看代码；
为了健壮性，在自己写的函数作各种类型假设，代码像意大利面一样，可读性差；
在底层框架的函数中添加参数，无法确定多少处引用，慌得一批；
定义好了接口中的数组字段，但调用length时报错，找后端理论。

根本原因

根本原因是JavaScript是动态若类型语言

而且长期使用JS，会导致类型思维缺失。

社区解决方案

2014年，Facebook 推出 Flow
2014年，微软推出 TypeScript1.0

从后来的结果看，TypeScript发展的更好。Angular、Vue 相继支持 TypeScript，Facebook 也在从 Flow 往 TypeScript 迁移。

可以说，在 ECMAScript 准备推出静态类型检查之前，TypeScript 是当下解决此问题的最佳方案。

什么是TypeScript？

官方定义：拥有类型系统的 JS 超集，可以编译为纯JS。

要点：

类型检查：编码阶段发现bug
语言扩展：包含ES和未来提案中的特性，比如异步操作和装饰器，也会和其他语言借鉴某些特性，比如接口、抽象类
工具属性：可以编译为标准JS，可以在任何浏览器操作系统上运行，无需任何运行时上的开销。更像是一个工具，而不是一门独立的语言。

为什么要使用TypeScript？

VSCode：自动补全、导航、重构功能，使得接口定义可以直接代替文档，提高开发效率，降低维护成本。

帮助团队重塑类型思维，接口提供方被迫思考API的边界，从代码编写者蜕变为代码的设计者。

JS是一匹野马，TS是束缚这匹野马的缰绳。

TS可以让你在前端开发路上走的更稳，更远。

1.2 类型基础（1）强类型与弱类型

强类型语言：不允许改变变量的数据类型，除非进行强制类型转换
弱类型语言：变量可以被赋予不同的数据类型

var x
var a = 1;
x = a; // 1
var b = 'hello';
x = b; // 'hello'

1.3 类型基础（2）动态类型与静态类型

静态类型语言：在编译阶段确定所有变量的类型
动态类型语言：在执行阶段确定所有变量的类型

静态类型语言：

对类型极度严格
立即发现错误
运行时性能好
自文档化

动态类型语言：

对类型非常宽松
Bug可能隐藏数月甚至数年
运行时性能差
可读性差

动态类型语言的支持者认为：

性能是可以改善的（V8引擎），而语言的灵活性更重要
隐藏的错误可以通过单元测试发现
文档可以通过工具生成

1.4 安装和编译-编写你的第一个TypeScript程序

环境搭建

1、使用 tsc 工具

1、创建一个目录

mkdir learn-typescript

2、全局安装 ts

npm install -g typescript

3、生成 ts-config.json 文件

tsc --init

4、新建一个 demo.ts 文件，添加如下代码：

const a: boolean = true;
console.info(a);

5、编译 ts 文件

tsc demo.ts

会生成一个 demo.js 文件

var a = true;
console.info(a);

6、自动watch

tsc --watch demo.ts

2、使用 ts-node

1、全局安装ts-node

npm i -g ts-node // 全局安装ts-node

2、运行 ts 文件

tsc demo.ts

ts-node 包可以帮助我们在不需要编译成 js 的前提下就可以直接执行 ts 代码

3、使用 vite脚手架 vanilla-ts模版

1、创建项目

npm create vite@latest

2、项目内置对 ts 的支持，同时每次修改都会自动编译生效

至此，环境搭建就告一段落了。

二、类型基础

基础数据类型

string
number
boolean
undefined
null
symbol
void

对象类型

Interface
Class
Enum
Object
Array
Tuples

其他类型

any
unknown
never

类型断言

as[type]
as any
as const

类型推论

类型组合

联合类型
交叉类型
类型别名
keyof 操作符

类型守卫/保护&类型

instanceof
typeof
Equality
Truthiness
Type Predicates

函数类型

字面量类型

二、类型进阶

类

接口 interface

泛型

三、类型扩展

装饰器、泛型工具、高级类型、模块化、生态

装饰器

泛型工具

四、工程实践

ts 编译工具有哪些？如何集成到构建工具？

tsc：官方工具
vite：默认支持
webpack：ts-loader

www.typescriptlang.org/docs/handbo…

react和vue项目中如何编译ts？

如何编写声明文件？

tsconfig配置

tsconfig参考

五、练习操练

类型体操 type-challenges：推荐使用VSCode插件练习
typescript练习
如何写declare文件，使用npm库时，如何引用库文件的类型声明文件，自己如何写一个类型声明文件

知识体系

typescript 官网

typescript roadmap

doubao

极客时间 TypeScript

TypeScript Cheat Sheet

TypeScript Types.png

TypeScript Classes.png

TypeScript Interfaces.png

TypeScript Control Flow Analysis.png

扩展：从语言设计的角度看TS这门语言？（pending）

TypeScript 知识体系（不断完善中...）

概述