从 JavaScript 迁移

    • 你知道 JavaScript；

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

    • 添加一个 文件；

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

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

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

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

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

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

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

    抑制这种错误：

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

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

    NOTICE

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

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

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

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

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

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

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

    1. import * as $ from 'jquery';

    TIP

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

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

    1. declare module '*.css';

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

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