类型擦除
如何运行 TypeScript 用一张图就可以说明
- 如何运行一段 JS 代码（图左），只需要放进 Chrome 或者 Node 中即可
- 但是如果只加了一点类型 number，再放进 Chrome 或者 Node 则会报错，所以我们需要把 ts 变成 js，然后再运行 ，这个过程就叫做类型擦除。
如何进行类型擦除
- npm i -g esbuild
- esbuild 1.ts > 1.js
- npm i -g @swc/cli @swc/core
- swc 1.ts -o 1.js
- npm i -g typescript
- tsc 1.ts
- 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/
类型体操
可能很多人一开始做不来不适应，根本原因是类型体操的本质是函数式编程
网友评论