将 JS 转换为 TS - Javascript

如果你正在使用 JavaScript 编写大型的 Web 应用程序，你可能会遇到代码难以维护和调试等问题。TypeScript 是一个 JavaScript 的超集，添加了静态类型和其他功能。它可以在编译时发现错误并让你更轻松地重构代码。

安装 TypeScript

在开始将 JavaScript 代码转换为 TypeScript 之前，你需要先安装 TypeScript。你可以在命令行中运行以下命令安装最新版本的 TypeScript：

npm install -g typescript

将 JavaScript 转换为 TypeScript

要将 JavaScript 转换为 TypeScript，你只需更改文件扩展名为 .ts。由于 TypeScript 是 JavaScript 的超集，所以 JavaScript 代码将是合法的 TypeScript 代码。这意味着你可以在代码中使用任何 JavaScript 语言特性。

下面是一个简单的 JavaScript 示例：

function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("World");

我们可以将上面的代码转换为 TypeScript，只需将文件扩展名更改为 .ts：

function greet(name: string) {
  console.log("Hello, " + name + "!");
}
greet("World");

请注意，我们添加了一个类型注释来声明 name 参数的类型为 string。这使得 TypeScript 在编译时可以进行类型检查。

类型注释

在 TypeScript 中，你可以使用类型注释来指定变量类型。类型注释是一种用于说明变量类型的语法，以帮助编译器检测错误并提供有用的代码提示。

下面是一个类型注释的例子：

let age: number = 24;
let name: string = "Lily";
let isMarried: boolean = false;

该代码段声明了三个变量，分别是 age， name 和 isMarried，它们的类型分别为 number，string 和 boolean。

接口

接口是 TypeScript 中用于描述对象外观的重要构造。在一个接口中，你可以描述对象具有的属性，以及属性的类型。

例如，下面是一个简单的 TypeScript 接口定义：

interface IPerson {
  name: string;
  age: number;
  isMarried: boolean;
}

这个接口描述了一个 Person 对象，它具有 name，age 和 isMarried 三个属性，它们的类型分别为 string，number 和 boolean。

如果你要创建一个 Person 对象，你可以为其提供符合 IPerson 接口的数据：

const person: IPerson = {
  name: "Lily",
  age: 24,
  isMarried: false,
};

类

在 TypeScript 中，你可以使用类来定义对象类型和对象方法。类是一种面向对象编程的重要构造，它使得你可以封装数据和行为以进行重用和扩展。

下面是一个简单的 TypeScript 类定义：

class Person {
  name: string;
  age: number;
  isMarried: boolean;

  constructor(name: string, age: number, isMarried: boolean) {
    this.name = name;
    this.age = age;
    this.isMarried = isMarried;
  }

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

该代码段定义了一个叫做 Person 的类，它具有 name，age 和 isMarried 三个属性，它们的类型分别为 string，number 和 boolean。它还定义了一个 greet 方法，用于打印一个问候语。

如果你要创建一个 Person 对象，你可以使用 new 关键字来实例化该类：

const person = new Person("Lily", 24, false);
person.greet(); // 输出 "Hello, my name is Lily"

泛型

在 TypeScript 中，你可以使用泛型来指定类型参数。泛型是一种声明可重用代码的方式，用于让代码与多种类型一起工作。

下面是一个使用泛型的例子：

function identity<T>(arg: T): T {
  return arg;
}
let output = identity<string>("Hello, world");
console.log(output);

该代码定义了一个叫做 identity 的函数，它接受一个类型为 T 的参数，并返回类型为 T 的结果。在调用该函数时，我们传递了一个字符串类型的参数，并显式指定类型为 string。

编译 TypeScript

要将 TypeScript 代码编译为 JavaScript 代码，你可以使用 tsc 命令：

tsc myfile.ts

该命令将编译 myfile.ts 文件，并生成一个对应的 myfile.js 文件。

TypeScript 编辑器支持

大多数主流的代码编辑器都支持 TypeScript 的编写。对于 Visual Studio Code，你可以安装一个名为 TypeScript 的插件来获得语法高亮、代码提示和其他有用的功能。