从JavaScript项目迁移到TypeScript项目 – TypeScript开发教程

上一章TypeScript教程请查看：TypeScript项目构建工具合集

从JavaScript迁移到TypeScript需要做以下事情:

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

假设我们有需要转换成TypeScript的JavaScript文件。我们知道，当编译TypeScript文件时，它会生成相应的同名JavaScript文件。在这里，我们需要确保作为输入的原始JavaScript文件不能在相同的目录中，这样TypeScript就不会覆盖它们。

从上面的观点出发，我们将假设我们的目录是如下面的结构所设置的。在这里，我们将所有输出文件保存在一个名为“build”的输出目录中。

我们可以使用以下过程从JavaScript迁移到TypeScript:

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

1. 添加tsconfig.json文件到项目

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

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

• 在上述文件中，我们指定打印稿几件事:
• 包括选择读取所有文件在src目录中。
• allowJs选项接受所有JavaScript文件作为输入。
• outDir指定,所有的输出文件应在建立文件夹重定向。
• target选项指定，所有JavaScript构造应该翻译成一个旧版本像ECMAScript 5。

2. 集成构建工具

我们知道,大多数JavaScript项目集成构建工具如Gulp或webpack。

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

我们可以用webpack集成项目在以下方式:

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

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

在webpack集成中，我们使用awesome-typescript-loader(一种TypeScript加载器)与源代码映射加载器相结合，以便更容易地调试源代码。

b)在我们的webpack.config.js文件中合并模块配置属性，以包含以下加载器:

module.exports = {  
    entry: "./src/index.ts",  
    output: {  
        filename: "./dist/bundle.js",  
    },  
    // 启用sourcemaps来调试webpack的输出  
    devtool: "source-map",  
    resolve: {  
        // Add '.ts' and '.tsx' as resolvable extensions.  
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]  
    },  
    module: {  
        loaders: [  
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.  
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" }  
        ],  
        preLoaders: [  
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.  
            { test: /\.js$/, loader: "source-map-loader" }  
        ]  
    },  
    // Other options...  
};  

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( "AAA", 32);  

在上面的代码中，函数display()接受三个参数:名称、年龄和身高。我们可以用两个值来调用这个函数:“AAA”和23。它在JavaScript中是完全有效的，因为在JavaScript中，如果一个函数缺少预期的参数，它会将未定义的值赋给该参数。

但是，TypeScript中的相同代码将给出编译错误: compilation error: Expected three arguments but got two。要删除这个错误，我们可以添加一个可选的参数符号到参数高度和注释我们的代码如下:

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中，{}这样的选项类型是空对象。所以，颜色和体积是不存在的，是不可赋值的。如果我们将声明移动到对象字面量本身，我们不会得到任何错误:

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

我们还可以定义选项的类型，并在对象字面量上添加类型断言。

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，安装定义:

$ npm install @types/jquery  

对于Lodash，安装定义

$ npm install -S @types/lodash  

一旦我们对JavaScript项目进行了更改，就运行构建工具。现在，我们应该将TypeScript项目编译成可以在浏览器中运行的纯JavaScript。