跳到主要内容

TypeScript 语法

TypeScript 是 JavaScript 的超集，它为 JavaScript 添加了静态类型检查和其他高级特性。通过 TypeScript，开发者可以在编写代码时捕获潜在的错误，并提高代码的可维护性和可读性。本文将带你了解 TypeScript 的基本语法，帮助你快速上手。

1. 变量声明与类型注解​

在 TypeScript 中，变量可以通过 let 或 const 声明，并且可以为变量添加类型注解。类型注解可以帮助 TypeScript 编译器检查变量的类型是否正确。

typescript
let message: string = "Hello, TypeScript!";
const count: number = 42;

在上面的代码中，message 被声明为一个字符串类型，而 count 被声明为一个数字类型。如果你尝试将一个不同类型的值赋给这些变量，TypeScript 会报错。

typescript
message = 100; // 错误：不能将类型 'number' 分配给类型 'string'

2. 基本类型​

TypeScript 支持多种基本类型，包括：

  • string: 字符串类型
  • number: 数字类型
  • boolean: 布尔类型
  • null 和 undefined: 空值和未定义
  • any: 任意类型（不推荐使用，因为它会绕过类型检查）
  • void: 表示没有返回值的函数
typescript
let isDone: boolean = false;
let age: number = 30;
let name: string = "Alice";
let nothing: null = null;
let unknown: any = "This could be anything";

3. 函数​

TypeScript 中的函数可以指定参数类型和返回值类型。这有助于确保函数的输入和输出符合预期。

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

const result = add(2, 3); // result 的类型是 number
提示

如果你不指定返回值类型，TypeScript 会根据函数的返回值自动推断类型。

4. 接口​

接口是 TypeScript 中定义对象结构的一种方式。通过接口，你可以指定对象应该包含哪些属性以及这些属性的类型。

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

const person: Person = {
  name: "Bob",
  age: 25,
};

如果你尝试创建一个不符合接口定义的对象，TypeScript 会报错。

typescript
const invalidPerson: Person = {
  name: "Alice",
  // 错误：缺少属性 'age'
};

5. 类​

TypeScript 支持面向对象编程中的类。类可以包含属性、方法以及构造函数。

typescript
class Animal {
  name: string;

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

  speak(): void {
    console.log(`${this.name} makes a noise.`);
  }
}

const dog = new Animal("Dog");
dog.speak(); // 输出: Dog makes a noise.

6. 泛型​

泛型允许你编写可重用的组件，这些组件可以处理多种类型的数据。泛型通常用于函数、类和接口中。

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

const output1 = identity<string>("Hello");
const output2 = identity<number>(42);

在上面的例子中，identity 函数可以接受任何类型的参数，并返回相同类型的值。

7. 实际应用场景​

假设你正在开发一个电商网站，你需要定义一个 Product 接口来表示商品信息，并编写一个函数来计算商品的总价。

typescript
interface Product {
  name: string;
  price: number;
  quantity: number;
}

function calculateTotal(products: Product[]): number {
  return products.reduce((total, product) => total + product.price * product.quantity, 0);
}

const products: Product[] = [
  { name: "Laptop", price: 1000, quantity: 2 },
  { name: "Phone", price: 500, quantity: 3 },
];

const total = calculateTotal(products);
console.log(total); // 输出: 3500

8. 总结​

TypeScript 通过添加类型注解、接口、类等特性，使得 JavaScript 代码更加健壮和易于维护。本文介绍了 TypeScript 的基本语法，包括变量声明、类型注解、函数、接口、类和泛型。通过掌握这些基础知识，你可以开始编写类型安全的 TypeScript 代码。

9. 附加资源与练习​

备注

继续深入学习 TypeScript 的高级特性，如装饰器、命名空间和模块，可以帮助你更好地利用 TypeScript 的强大功能。