TypeScript全解：起手

类型擦除

如何运行 TypeScript 用一张图就可以说明

1. 如何运行一段 JS 代码（图左），只需要放进 Chrome 或者 Node 中即可
2. 但是如果只加了一点类型 number，再放进 Chrome 或者 Node 则会报错，所以我们需要把 ts 变成 js，然后再运行 ，这个过程就叫做类型擦除。

如何进行类型擦除

1. • npm i -g esbuild

• esbuild 1.ts > 1.js

1. • npm i -g @swc/cli @swc/core

• swc 1.ts -o 1.js

1. • npm i -g typescript

• tsc 1.ts

1. • npm i @babel/core @babel/cli @babel/preset-typescript

• babel – presets @babel/preset-typescript 1.ts

前两个快一点（因为不检查语法，反正都要擦除，没什么好检查了）
后面两个因为还要做类型检查，所以相对慢多了（但是即使不做检查，也会比上面那俩慢），基本已经不用了

Playground

每次写完 ts 代码都要类型擦除后才能运行，太麻烦了，推荐几个在线的：

• https://www.typescriptlang.org/play
• https://playcode.io/（目前世界上最快的前端在线编辑器，缺点是收费）
• https://stackblitz.com/
• https://codesandbox.io/

本地编辑+浏览器

• vite：npm create vite@latest my-vue-app – –template vanilla-ts
• ts-node：https://typestrong.org/ts-node/docs/installation
• swc-node：https://github.com/swc-project/swc-node
• esm-loader：https://github.com/esbuild-kit/esm-loader
• esno：https://github.com/esbuild-kit/esno
• 这些也许以后就不维护了，以后还是得用新工具

如何调试 TypeScript

此调试非彼调试

type Name = string;
type Age = number;
type X = Name & Age

console.log(X) // 报错！

const a:number = 1 + 2

console.log(a)

我们如果想知道 type X 是什么，如何做到，肯定不能用 console.log，他只能打印值，而且如果是运行时，ts 代码都被擦除了，行不通
所以正确的方式是用鼠标：

无需 log，无需运行，在你写代码的时候，编辑器已经给你计算好了

学习资料

书籍

• 编程与类型系统（推荐一点，薄一点）
• TypeScript 编程（根据网上的评论，更适合新手）
• 类型和程序设计语言（相当抽象，如果你希望对类型更加深刻，可以看看）
• 入门教程：https://ts.xcatliu.com/

类型体操
可能很多人一开始做不来不适应，根本原因是类型体操的本质是函数式编程