TypeScript学习笔记 | 青训营

72 阅读2分钟

什么是 TypeScript

TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的超集,添加了静态类型和其他一些特性。TypeScript 可以编译成纯 JavaScript 代码,在任何支持 JavaScript 的环境中运行。

TypeScript 提供了更强大的类型系统,可以在开发过程中发现和预防一些常见的错误。它还支持 ECMAScript 的新特性,并提供了面向对象编程的能力。

安装和配置 TypeScript

要开始学习 TypeScript,首先需要安装 TypeScript 编译器。可以使用 npm(Node 包管理器)来安装 TypeScript:

npm install -g typescript

安装完成后,可以使用以下命令检查 TypeScript 版本:

tsc --version

接下来,创建一个 TypeScript 文件,例如 hello.ts,并添加以下代码:

function sayHello(name: string) {
  console.log(`Hello, ${name}!`);
}

sayHello("TypeScript");

然后,在终端中运行以下命令编译 TypeScript 文件:

tsc hello.ts

这将生成一个名为 hello.js 的 JavaScript 文件。现在可以运行生成的 JavaScript 文件:

node hello.js

输出结果应为:

Hello, TypeScript!

类型注解

TypeScript 的一个主要特性是静态类型检查。可以使用类型注解来为变量、函数参数和函数返回值指定类型。

let count: number = 5;
let message: string = "Hello, TypeScript!";
let isDone: boolean = false;

function add(x: number, y: number): number {
  return x + y;
}

在上面的代码中,count 是一个 number 类型的变量,message 是一个 string 类型的变量,isDone 是一个 boolean 类型的变量。add 函数接受两个 number 类型的参数,并返回一个 number 类型的值。

类型注解可以帮助我们在编码过程中捕获错误,并提供更好的代码补全和文档。

接口

TypeScript 还支持接口(Interfaces),用于定义对象的结构和类型。

interface Person {
  name: string;
  age: number;
}

function displayPerson(person: Person) {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

let john: Person = { name: "John", age: 25 };
displayPerson(john);

在上面的代码中,我们定义了一个 Person 接口,它包含 name 和 age 两个属性。然后,我们定义了一个 displayPerson 函数,它接受一个 Person 类型的参数,并打印出该对象的信息。

创建一个 john 对象,符合 Person 接口的定义,并将它传递给 displayPerson 函数进行显示。

TypeScript 支持面向对象编程,可以使用类来创建对象和定义方法。

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, I'm ${this.name}!`);
  }
}

let cat = new Animal("Tom");
cat.sayHello();

在上面的代码中,我们定义了一个 Animal 类,它有一个 name 属性和一个 sayHello 方法。使用 constructor 构造函数来初始化对象的属性。

创建一个 cat 对象,并调用它的 sayHello 方法。

泛型

TypeScript 还支持泛型(Generics),可以编写可重用的代码组件。

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("Hello, TypeScript!");
console.log(output);

在上面的代码中,我们定义了一个 identity 函数,它接受一个泛型参数 T 和一个参数 arg,并返回相同类型的值。

使用泛型函数时,可以显式指定泛型类型,也可以让 TypeScript 推断出泛型类型。

模块

TypeScript 支持模块化开发,可以将代码分割成多个模块,并在需要时进行导入和导出。

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

// main.ts
import { add } from "./math";

console.log(add(5, 3));

在上面的代码中,我们创建了一个名为 math.ts 的模块,其中导出了一个 add 函数。然后,在 main.ts 中使用 import 关键字导入了 add 函数,并调用它。