快乐使用 typescript 的方式，小白都懂得typescript运行环境搭建

flow 折戟，typescript 是越来越火了。 那么小白就要发问了，咋子用 typescript 嘞？node 可以用么？vue 可以用么。 本文便记录一下 使用 typescript 的编译器或运行时，让大家入个门，将手中的 ts 代码跑起来。

ts-node

ts-node work like node. 只要安装 并 使用 ts-node 替代 node，那么你就可以愉快地运行 typescript 文件啦。

## 安装
npm install ts-node
## 运行
ts-node index.ts

@babel/node + @babel/preset-typescript

作为前端的大家都应该知道 babel 这个神器，给 JavaScript 提供类似宏的操作体验。 而他内置了 typescript 的编译预设插件，设置好 babel.config.js 就可以愉快地玩耍了

同上 用 babel/node 替代 node 需要设置 babelconfig

# 安装
npm install @babel/node -g

npm i -D @babel/core @babel/preset-env @babel/preset-typescript typescript

配置 babel.config.js

module.exports = {
    presets: [
        '@babel/preset-typescript',
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current',
                },
            },
        ],
    ],
}

运行

babel-node -x .ts -- index.ts

好处就是 可以通过 babel 进行进一步语法增强

deno : A modern runtime for JavaScript and TypeScript

node 创始人出走搞了这个玩意er，号称 更快更强更安全，可直接运行 typescript

可以直接使用 deno 代替 node 运行 ts 代码

# 安装
scoop install deno
# 运行
deno run index.ts

@swc/register

swc 号称 babel 的替代者，所以同理也可以通过他的编译预设运行 typescript

# 安装 
npm install @swc/core @swc/register
# 运行
node -r @swc/register index.ts

---

new :

tsx

tsx 比 tsnode兼容性更强

vite

如果你想要构建前端的库，也可以使用vite作为预览和编译工具。

tsup

tsup是简单易用的基于 esbuild 的ts编译工具

tsdown

tsdown 的api借鉴了 tsup，而底层是基于rust的 rolldown