TypeScript基础

TypeScript 是 JavaScript 的超集，它为 JavaScript 添加了静态类型检查和其他高级特性。通过 TypeScript，开发者可以在编写代码时捕获潜在的错误，并提高代码的可维护性和可读性。本文将带你了解 TypeScript 的基础知识，并通过实际案例展示其应用场景。

什么是 TypeScript？

TypeScript 是由微软开发的开源编程语言，它在 JavaScript 的基础上添加了静态类型系统。这意味着你可以在编写代码时定义变量的类型，并在编译时检查类型错误。TypeScript 最终会被编译成纯 JavaScript，因此它可以在任何支持 JavaScript 的环境中运行。

备注

TypeScript 并不是一种全新的语言，而是 JavaScript 的扩展。它完全兼容 JavaScript，因此你可以逐步将现有的 JavaScript 项目迁移到 TypeScript。

类型系统

TypeScript 的核心特性之一是它的类型系统。通过类型系统，你可以为变量、函数参数、返回值等定义类型。以下是一些常见的类型：

基本类型：string, number, boolean, null, undefined, void, any
数组：number[], Array<number>
元组：[string, number]
对象：{ name: string, age: number }
函数：(a: number, b: number) => number

基本类型示例

typescript
let name: string = "Alice";
let age: number = 30;
let isActive: boolean = true;

数组和元组示例

typescript
let numbers: number[] = [1, 2, 3];
let person: [string, number] = ["Alice", 30];

函数示例

typescript
function add(a: number, b: number): number {
  return a + b;
}

接口

接口是 TypeScript 中定义对象结构的一种方式。通过接口，你可以定义对象的属性和方法，并确保对象符合特定的结构。

typescript
interface Person {
  name: string;
  age: number;
  greet(): void;
}

let alice: Person = {
  name: "Alice",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

提示

接口不仅可以用于定义对象的结构，还可以用于定义函数的类型、类的结构等。

类

TypeScript 支持面向对象编程，你可以使用类来创建对象。类可以包含属性、方法、构造函数等。

typescript
class Animal {
  name: string;

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

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

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

继承

TypeScript 支持类的继承，你可以通过 extends 关键字创建一个子类。

typescript
class Dog extends Animal {
  breed: string;

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

  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

let myDog = new Dog("Buddy", "Golden Retriever");
myDog.speak(); // 输出: Buddy barks.

实际案例

假设你正在开发一个简单的用户管理系统，你需要定义一个 User 类，并确保每个用户都有 name 和 age 属性。你可以使用 TypeScript 来实现这个功能。

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

class UserManager {
  users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  listUsers(): void {
    this.users.forEach(user => {
      console.log(`Name: ${user.name}, Age: ${user.age}`);
    });
  }
}

let manager = new UserManager();
manager.addUser({ name: "Alice", age: 30 });
manager.addUser({ name: "Bob", age: 25 });
manager.listUsers();

警告

在实际开发中，确保类型定义准确是非常重要的。错误的类型定义可能导致运行时错误或逻辑错误。

总结

TypeScript 为 JavaScript 添加了静态类型检查，使得代码更加健壮和可维护。通过本文，你已经了解了 TypeScript 的基础知识，包括类型系统、接口、类等核心概念。希望这些知识能帮助你在实际项目中更好地使用 TypeScript。

附加资源

练习

定义一个 Car 类，包含 brand 和 speed 属性，并实现一个 accelerate 方法，每次调用时增加速度。
创建一个 Person 接口，包含 name 和 age 属性，并实现一个 greet 方法，输出问候语。
使用 TypeScript 编写一个简单的计算器类，支持加、减、乘、除操作。

通过完成这些练习，你将进一步巩固 TypeScript 的基础知识。

什么是 TypeScript？​

类型系统​

基本类型示例​

数组和元组示例​

函数示例​

接口​

类​

继承​

实际案例​

总结​

附加资源​

练习​