将 JavaScript 转换为 TypeScript

概述

我们知道 typescript 是一种类型化语言，可读性更强，每个变量都声明了数据类型，因此代码更易于阅读，因此今天在本文中我们将介绍如何将 javascript 转换为 typescript，因为 typescript 现在变得非常流行

安装 TypeScript 编译器和加载器

我们可以通过在编译器中写入以下行来安装 typescript 编译器：

npm install --save-dev typescript ts-loader

将“tsconfig.json”文件添加到项目

我们必须向我们的项目添加一个tsconfig.json文件，它将管理项目的编译选项以及要包含和排除的文件。

{
    "compilerOptions": {
        "outerdirect": "./junk",
        "allow_js": true,
        "convert": "es5"
    },
        "include": [
        "./src/**/*"
    ]
}

借助构建工具进行集成

我们知道我们需要使用 webpack，因为大多数 JavaScript 项目都使用它。Webpack用于处理所有 .ts 和 .tsx 文件。

我们通过代码看一下如何在 TypeScript 中添加两个加载器：

module: {
    loader1: [

        { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
    ],

    loader2: [

        { test: /\.js$/, loader: "source-map-loader" }
    ]
}

将所有“ts”文件更改为“js”文件

在此过程中，我们需要将所有 js 文件更改为 ts，方法是将文件名从.js重命名为.ts，并将所有jsx文件从.jsx重命名为.tsx。如果我们这样做，我们的代码可能会出现一些错误，为此，我们需要检查这些错误。
 将var 替换为 const /let ; 
 用箭头函数=>替代大部分函数绑定；
 对属性、函数参数和返回值进行类型标注；
 对代码进行局部的重构和优化。

检查错误

比如说：

let student = {};
student.id = 1520;
student.name = "swagata";
console.log(student);

在上面的代码中，typescript 会显示错误，因为 id 和 name 不属于 type {}。为了纠正这个问题，我们必须重写如下：

let student = {
   id: 10,
   name: "Swagata",
};

从模块导入

你可能会收到一堆错误，例如Cannot find name 'require'.、 和Cannot find name 'define'.。

获取声明文件

遇到类似这样的错误Cannot find module 'foo'.

解决

npm install -S @types/lodash

从模块导出

之前的

function foo() {
  // ...
}
module.exports = foo;

在 TypeScript 中，您可以使用构造对此进行建模export =

function foo() {
  // ...
}
export = foo;

参数太多/太少

顺序添加的属性

any，Object， 和{}

结论

• Typescript是一种类型化语言，比 javascript 更具可读性。
• Typescript 就是 javascript，只是多了一些特性，主要的特性是可以明确地书写数据类型。
• 使用 TypeScript 的主要优点之一是类型推断，它提供了类型的一些好处，而无需实际使用它们。
• Typescript 为我们提供了一些对 JavaScript 包装的内置支持。
• 众所周知，typeScript 是 JavaScript 本身的超集，因此任何有效的 JavaScript 代码本身都是有效的 TypeScript 代码。