一. 类型擦除 有这样一段js代码,把它丢到浏览器或者node中就能运行得到3
const a = 1 + 2
console.log(a)
但是如果是这样一段ts代码,就会报错
const a: number = 1 + 2
console.log(a)
我们可以通过Deno来直接运行ts,Deno是nodejs之父抛弃js之后,新搞出来的一套东西,注意看Deno,就是node的反过来。Deno的原理其实很简单,核心就是rust+v8,通过rust把ts翻译成js,然后把js用v8执行一下就行了。好处就是不需要手动配置,全部自动化。另外Deno不流行,前端都不怎么用。 当然我们还有一条路,我们可以把TS变成js,然后再放到chrome中,这个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
// 以上两种会做类型检查,速度慢,但是就算不做类型检查,第一第二种也会快很多,因为esbuild是go写的,swc是rust写的,后面两种是js写的
三. 结论-最新推荐esno工具这个来运行ts
- 推荐这个的原因是esbuild是最快的,比swc还要快,这种方式是直接将ts变成js并运行,上面的esbuild是输出ts到js的文件,另外vite也是一个不错的选择,但vite通常是搭配vue3或者react再结合ts作为脚手架
npm i -g esno
esno index.ts
四. 如何调试ts
type Name = string;
type Age = number;
type X = Name & Age;
// 如何知道X的类型,在vscode中把鼠标移上去