如何启动一个 TypeScript 项目 [2021]

如果你正在学习 TypeScript，你可能会很难找到一种简单的方法从头开始构建 TypeScript 项目。根据你之前学习的是 JavaScript 还是 Go、Swift 或 Kotlin 等静态类型语言，你可能会对项目的运行方式有所期待。

对于我的 JavaScript 朋友们，你们可能只是想要一些可以立即开始工作的东西。

对于静态类型用户，你可能需要 IDE 中的自动补全、编译器错误提示以及简单的零配置编译功能。对于任何与 IDE 相关的事情，使用 VSCode 就足够了。

为了让每个人都满意，让我们介绍一下设置 TypeScript 项目的简单方法。

记住

TypeScript 是一种静态类型语言，是 JavaScript 的超集。因此，TypeScript 可以转译为 JavaScript。

怎么做？当然是用编译器。确切地说是TypeScript 编译器 (TSC) ，或者 Babel 。

无论您使用什么平台或工具，在某个时候，他们都会使用 TypeScript 编译器，因为最终我们仍然必须执行 JavaScript。

如果您想了解 TypeScript 的基础知识，请继续阅读官方手册。

设置 TypeScript 项目（绝对最简单的方法）

在我看来， 执行 JavaScript 最简单的方法是安装 Node 并运行node coolfile.js。

因此 ，在我看来， 编译和执行 TypeScript 的最简单方法是安装 Node 和一个名为 ts-node的包，然后使用 ts-node 以与使用 node 相同的方式执行 TypeScript。

ts-node 的简单做法是同时运行 node 和 tsc 进行编译，然后在单个命令中运行编译后的 JavaScript。

# Locally in your project.
npm install -D typescript
npm install -D ts-node

# Or globally with TypeScript.
npm install -g typescript
npm install -g ts-node

# Execute a script as `node` + `tsc`.
ts-node script.ts

设置 TypeScript 项目（库）

还有另一种简单的方法来启动一个用于实验或与平台无关的库的项目。

简单的方法是使用名为 TSDX 的零配置 CLI。

通过它，您将创建一个带有 TSDX 的库，它将设置运行、构建、检查和测试项目或库所需的一切。

npx tsdx create mylib
cd mylib
yarn start
yarn build
yarn lint
yarn test

我是通过 TailwindCSS 的 TailwindLabs GitHub 了解到 TSDX 的，那里有一个tailwindcss-intellisense项目（一个用于 Tailwind 自动完成、语法高亮和 linting 的 VSCode 扩展）。该项目包含一个“语言服务”包，该包与所使用的平台无关，因此 TSDX 是该库的一个很好的用例。

TSDX 也适用于 React，但我还没有尝试过。我通常会依赖我使用的框架自带的 CLI。