TypeScript入门教程

134 阅读2分钟

TypeScript 是一种由微软开发并维护的开源编程语言。它是 JavaScript 的一个超集,增加了静态类型检查、类、接口和命名空间等功能。

在本文中,我们将详细介绍 TypeScript 的使用方法,帮助你更好地掌握这门语言。

安装 TypeScript

首先,我们需要安装 TypeScript。可以使用 npm 安装:

npm install -g typescript

安装完成后,你就可以使用 tsc 命令来编译 TypeScript 代码了。

编写 TypeScript 代码

使用 TypeScript 编写代码和使用普通的 JavaScript 代码基本相同。不同之处在于,我们需要声明变量的类型。

例如,下面是一个使用 TypeScript 编写的简单程序:

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

const person = {
    firstName: "John",
    lastName: "Doe"
};

greet(person.firstName + " " + person.lastName);

其中,我们用 string 来声明了参数 name 的类型,并通过 person.firstNameperson.lastName 来调用 greet 函数。

这份代码在 TypeScript 中可以成功运行。

编译 TypeScript 代码

在终端输入以下命令可以将 TypeScript 代码编译为 JavaScript:

tsc file.ts

如需监视 .ts 文件的变化并自动编译,可使用以下命令:

tsc file.ts --watch

此外,你还可以编译整个目录中的所有 .ts 文件(包括子目录):

tsc -p path/to/tsconfig.json

配置 TypeScript

我们可以使用 tsconfig.json 文件来配置 TypeScript。这个文件的作用类似于 package.json

例如,下面是一个简单的 tsconfig.json 示例:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "outDir": "dist"
    },
    "include": [
        "src/**/*"
    ]
}

其中,compilerOptions 是编译器选项 (compiler options),指定了 TypeScript 编译器应该如何处理代码。而 include 指定要编译的文件。

转换到 JavaScript

TypeScript 最终会转换为 JavaScript,但是每个浏览器或 Node.js 版本支持的 JavaScript 版本可能不同。因此,我们需要将 TypeScript 代码转换为特定版本的 JavaScript。

tsconfig.json 中,我们可以通过 "target" 选项来指定所需的 JavaScript 版本。如果你想要将 TypeScript 转换为最新的 ECMAScript (ES) 标准,可以将 "target" 设置为 "esnext"

如果你想要向后兼容更旧的浏览器或版本的 Node.js,则需要将 "target" 设置为相应的版本号,例如 "es5""es6"

类和接口

TypeScript 支持在代码中定义类和接口。它们可以帮助我们组织代码并更好地表达程序的结构。

例如,下面是一个使用 TypeScript 编写的简单程序:

interface Person {
    firstName: string;
    lastName: string;
}

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    greet(person: Person) {
        return "Hello, " + person.firstName + " " + person.lastName + "!";
    }
}

let greeter = new Greeter("Hello, world!");
let person = {firstName: "John", lastName: "Doe"};

console.log(greeter.greet(person));

这个例子包含了一个 Person 接口和一个 Greeter 类。