从JavaScript迁移到TypeScript

从JavaScript迁移到TypeScript需要以下几点：

了解JavaScript。
了解项目中使用的模式和构建工具。

假设我们要将JavaScript文件转换为TypeScript。我们知道，当我们编译TypeScript文件时，它会生成同名的JavaScript文件。在这里，我们需要确保我们的原始JavaScript文件作为输入的位置与TypeScript的输出位置不同，以便TypeScript不会覆盖它们。

从以上观点出发，我们将假定我们的目录设置如下结构。这里，我们将所有的输出文件都放在名为“built”的输出目录中。

我们可以使用以下流程从JavaScript迁移到TypeScript：

在项目中添加tsconfig.json文件。
与构建工具集成。
将所有.js文件移动到.ts文件。
检查错误。
使用第三方JavaScript库。

1. 在项目中添加tsconfig.json文件

首先，我们需要在项目中添加一个tsconfig.json文件。TypeScript使用tsconfig.json文件管理项目的编译选项，例如我们想要包含和排除哪些文件。

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}

在上述文件中，我们将一些内容指定给TypeScript：

include选项读取src目录中的所有文件。
allowJs选项接受所有JavaScript文件作为输入。
outDir指定所有输出文件应重定向到built文件夹中。
target选项指定所有JavaScript结构应翻译成较旧版本，如ECMAScript 5。

2. 与构建工具集成

我们知道，大多数JavaScript项目都集成了构建工具，如Gulp或Webpack。

注意：每个构建工具都是不同的。

我们可以使用以下方法将项目与Webpack集成：

a) 在终端上运行以下命令：

$ npm install awesome-typescript-loader source-map-loader

在Webpack集成中，我们使用awesome-typescript-loader（一个TypeScript加载器）与source-map-loader结合使用，以更轻松地调试源代码。

b) 将webpack.config.js文件中的模块配置属性合并到以下加载程序中：

module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "./dist/bundle.js",
    },
    // 为调试Webpack的输出启用源映射。
    devtool: "source-map",
    resolve: {
        // 将'.ts'和'.tsx'添加到可解析的扩展名中。
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    module: {
        loaders: [
            // 所有带有'.ts'或'.tsx'扩展名的文件将由'awesome-typescript-loader'处理。
            { test: /\.tsx? $/, loader: "awesome-typescript-loader" } ], preLoaders: [ // 所有输出的'.js'文件将通过'source-map-loader'重新处理任何源映射。 { test: /\.js$ /, loader: "source-map-loader" }
        ]
    },
    // 其他选项...
};

3. 将所有.js文件移动到.ts文件

在本节中，我们需要将.js文件重命名为.ts文件。同样，如果我们的文件使用了JSX，我们需要将其重命名为.tsx。现在，如果我们在支持TypeScript的编辑器中打开该文件，我们的一些代码可能会开始出现编译错误。因此，逐个转换文件可以更容易地处理编译错误。如果TypeScript在转换过程中发现任何编译错误，它仍然能够像Word打印文档一样转换代码。

4. 检查错误

将js文件转换为ts文件后，TypeScript会立即开始对我们的代码进行类型检查。因此，JavaScript代码中会出现诊断性错误。以下是我们可能遇到的一些错误：

a) 我们可以使用any来消除错误，例如：

在下面的代码中，我们可以通过使用类型断言来删除错误。

var foo = 123;
var bar = 'hey';
bar = foo; // ERROR: cannot assign a number to a string
bar = foo as any  //Ok

b) 参数少或多的函数：

function display(name, age, height) {
    let str1 = "Person named " + name + ",  " + age + " years old";
    let str2 = (height !== undefined) ? (" and " + height +  " feet tall") : '';
    console.log(str1 + str2);
}
display( "Rohit", 32);

在上面的代码中，函数display()接受三个参数：name、age和height。我们可以使用两个值”Rohit”和23来调用这个函数。在JavaScript中，这是完全有效的，因为在JavaScript中，如果一个函数的期望参数缺失，它会将值undefined赋给该参数。

但是，在TypeScript中，相同的代码将会给出编译错误：期望3个参数，但只有2个。为了消除此错误，我们可以在参数height上添加一个可选参数标记，并将我们的代码注释如下：

function display(name: string, age: number, height?: number) {
    let str1: string = "Person named " + name + ",  " + age + " years old";
    let str2: string = (height !== undefined) ? (" and " + height +  " feet tall") : '';
    console.log(str1 + str2);
}

c) 顺序添加属性

以下代码在JavaScript中非常常见。

var options = {};
options.color = "red";
options.volume = 11;

在TypeScript中，类型为{}的options是一个空对象。因此，color和volume不存在，也不能赋值。如果我们将声明移动到对象字面中，就不会得到任何错误：

let options = {
    color: "red",
    volume: 11
};

我们也可以定义options的类型并在对象字面的属性上添加类型断言。

interface Options { color: string; volume: number }

let options = {} as Options;
options.color = "red";
options.volume = 11;

5. 使用第三方JavaScript库

JavaScript项目使用第三方库，如jQuery或Lodash。为了编译文件，TypeScript需要知道这些库中所有对象的类型。我们知道，JavaScript库的TypeScript类型定义文件已经在DefinitelyTyped上可用。因此，我们不需要外部安装此类型。我们只需要安装我们项目中使用的类型。

例如

对于jQuery，安装定义：