从 JavaScript 迁移

假设：

  • 你知道 JavaScript；

  • 你知道在项目中使用常用的方式和构建工具（如：webpack）。
    有了以上假设，从 JavaScript 迁移，总的来说包括一下步骤：

  • 添加一个 tsconfig.json 文件；

  • 把文件扩展名从 .js 改成 .ts，开始使用 any 来减少错误；
  • 开始在 TypeScript 中写代码，尽可能的减少 any 的使用；
  • 回到旧代码，开始添加类型注解，并修复已识别的错误；
  • 为你的第三方 JavaScript 代码定义环境声明。
    让我们进一步讨论其中的某几点。

记住所有的 JavaScript 都是有效的 TypeScript。这意味着，如果让 TypeScript 编译器编译 TypeScript 里的 JavaScript 代码，编译后的结果将会与原始的 JavaScript 代码一摸一样。也就是说，把文件扩展名从 .js 改成 .ts 将不会造成任何负面的影响。

减少错误

TypeScript 将会立即对你的代码进行类型检查，你的 JavaScript 代码可能并不像你想象中那样整齐了，因此你会收到一些报错信息。你可以使用 any 类型来解决它们中的大部分报错：

  1. let foo = 123;
  2. let bar = 'hey';
  4. bar = foo; // Error: 不能把 number 类型赋值给 string 类型

虽然这些错误是有效的（并且在大多数情景下，推断信息的错误提示将比代码库的不同部分的原始作者想象的更好），但是你的重点可能是逐步迁移至 TypeScript，在这里，你可以使用类型断言来减少此错误：

  1. let foo = 123;
  2. let bar = 'hey';
  4. bar = foo as any; // ok

在另一方面来说，你可能想用 any 用作类型注解：

  1. function foo() {
  2.   return 1;
  3. }
  5. let bar = 'hey';
  6. bar = foo(); // Error: 不能把一个 number 类型赋值给 string 类型

抑制这种错误：

  1. function foo(): any {
  2.   // 添加 'any'
  3.   return 1;
  4. }
  6. let bar = 'hey';
  7. bar = foo();

NOTICE

使用此种方式来减少错误是危险的，但是它允许你将注意力转移到你的新 TypeScript 代码错误上。当你离开一段代码时，你可能会留下 // TODO 的注释。

第三方代码

你可以将你的 JavaScript 的代码改成 TypeScript 代码，但是你不能让这个世界都使用 TypeScript。这正是 TypeScript 环境声明支持的地方。我们建议你创建一个 vendor.d.ts 文件作为开始（.d.ts 文件扩展名指定这个文件是一个声明文件），然后我们可以向文件里添加东西。或者，你也可以创建一个针对于特定库的声明文件，如为 jquery 创建 jquery.d.ts 文件。

NOTICE

几乎排名前 90% 的 JavaScript 库的声明文件存在于 DefinitelyTyped 这样一个仓库里，在创建自己定义的声明文件之前，我们建议你先去仓库中寻找。虽然创建一个声明文件这种快速但是不好的方式是减小使用 TypeScript 初始阻力的重要步骤。

考虑使用 jquery 的用例，你可以非常简单快速的为它创建一个定义：

  1. declare var $: any;

有时候，你可能想给某些变量一些明确的定义（如： jquery），并且你会在类型声明空间中使用它。你可以通过 type 关键字快速的实现它：

  1. declare type JQuery = any;
  2. declare var $: JQuery;

这提供给你一个更清晰的使用模式。

再一次说明，一个高质量的 jquery.d.ts 已经在 DefinitelyTyped 中存在。现在你已经知道当你使用 JavaScript 第三方模块时， 如何克服从 JavaScript 至 TypeScript 的阻力。在接下去的章节，我们将会讨论环境声明。

第三方的 NPM 模块

与全局变量声明相似，你可以快速的定义一个全局模块，如：对于 jquery，如果你想把它作为一个模块来使用（NPM），你可以自己通过以下方式实现：

  1. declare module 'jquery';

然后你就可以在必要时导入它：

  1. import * as $ from 'jquery';

TIP

再一次说明，一个高质量的 jquery.d.ts 已经在 DefinitelyTyped 中存在，但是可能在你的包里没有，所以，你现在有一个简单快速的方式来继续迁移。

额外的非 JavaScript 资源

在 TypeScript 中，甚至可以允许你导入任何文件，例如 .css 文件（如果你使用的是 webpack 样式加载器或 css 模块），你只要添加如下代码（放在 globals.d.ts）：

  1. declare module '*.css';

现在你可以使用 import * as foo from './some/file.css'。

与此相似，如果你想使用 html 模版（例如：angular），你可以：

  1. declare module '*.html';

原文: https://jkchao.github.io/typescript-book-chinese/typings/migrating.html