添加 TypeScript 到现有项目中
这一切都始于在终端中执行的一个命令。
如果你使用 Yarn，执行：
yarn add --dev typescript
如果你使用 npm，执行：
npm install --save-dev typescript
恭喜！你已将最新版本的 TypeScript 安装到项目中。安装 TypeScript 后我们就可以使用 tsc 命令。在配置编译器之前，让我们将 tsc 添加到 package.json 中的 “scripts” 部分：
{
// ...
"scripts": {
"build": "tsc", // ...
},
// ...
}
配置 TypeScript 编译器
没有配置项，编译器提供不了任何帮助。在 TypeScript 里，这些配置项都在一个名为 tsconfig.json 的特殊文件中定义。可以通过执行以下命令生成该文件：
如果你使用 Yarn，执行：
yarn run tsc --init
如果你使用 npm，执行：
npx tsc --init
tsconfig.json 文件中，有许多配置项用于配置编译器。查看所有配置项的的详细说明，请参考此文档。
我们来看一下 rootDir 和 outDir 这两个配置项。编译器将从项目中找到 TypeScript 文件并编译成相对应 JavaScript 文件。但我们不想混淆源文件和编译后的输出文件。
为了解决该问题，我们将执行以下两个步骤：
- 首先，让我们重新整理下项目目录，把所有的源代码放入
src目录中。
├── package.json
├── src
│ └── index.ts
└── tsconfig.json
- 其次，我们将通过配置项告诉编译器源码和输出的位置。
// tsconfig.json
{
"compilerOptions": {
// ...
"rootDir": "src", "outDir": "build" // ...
},
}
很好！现在，当我们运行构建脚本时，编译器会将生成的 javascript 输出到 build 文件夹。 TypeScript React Starter 提供了一套默认的 tsconfig.json 帮助你快速上手。
通常情况下，你不希望将编译后生成的 JavaScript 文件保留在版本控制内。因此，应该把构建文件夹添加到 .gitignore 中。
文件扩展名
在 React 中，你的组件文件大多数使用 .js 作为扩展名。在 TypeScript 中，提供两种文件扩展名：
.ts 是默认的文件扩展名，而 .tsx 是一个用于包含 JSX 代码的特殊扩展名。
运行 TypeScript
如果你按照上面的说明操作，现在应该能运行 TypeScript 了。
yarn build
如果你使用 npm，执行：
npm run build
如果你没有看到输出信息，这意味着它编译成功了。
类型定义
为了能够显示来自其他包的错误和提示，编译器依赖于声明文件。声明文件提供有关库的所有类型信息。这样，我们的项目就可以用上像 npm 这样的平台提供的三方 JavaScript 库。
获取一个库的声明文件有两种方式：
Bundled - 该库包含了自己的声明文件。这样很好，因为我们只需要安装这个库，就可以立即使用它了。要知道一个库是否包含类型，看库中是否有 index.d.ts 文件。有些库会在 package.json 文件的 typings 或 types 属性中指定类型文件。
DefinitelyTyped - DefinitelyTyped 是一个庞大的声明仓库，为没有声明文件的 JavaScript 库提供类型定义。这些类型定义通过众包的方式完成，并由微软和开源贡献者一起管理。例如，React 库并没有自己的声明文件。但我们可以从 DefinitelyTyped 获取它的声明文件。只要执行以下命令。
# yarn
yarn add --dev @types/react
# npm
npm i --save-dev @types/react
局部声明 有时，你要使用的包里没有声明文件，在 DefinitelyTyped 上也没有。在这种情况下，我们可以创建一个本地的定义文件。因此，在项目的根目录中创建一个 declarations.d.ts 文件。一个简单的声明可能是这样的：
declare module 'querystring' {
export function stringify(val: object): string
export function parse(val: string): object
}
有关 TypeScript 的更多知识：
