TS漫游指南——基础篇

2023-10-24 14:36:01

TypeScript 入门漫游指南

序言

TypeScript 是微软开发的一个开源的编程语言，是 JavaScript 的超集，通过在 JavaScript 的基础上添加静态类型定义构建而成。TypeScript 编译后可以生成纯 JavaScript 代码，因此可以在任何支持 JavaScript 的环境中运行。TypeScript 因其强大的类型系统和丰富的特性而受到许多开发者的青睐。

变量

变量用于在 TypeScript 中存储数据。声明一个变量时，需要指定变量的名称和类型。例如：

let name: string = "John Doe";
let age: number = 30;

在上面的代码中，我们声明了两个变量：name 和 age。name 的类型是 string，age 的类型是 number。

数据类型

TypeScript 中的数据类型分为基本类型和引用类型。基本类型包括：

number：用于表示数字。
string：用于表示字符串。
boolean：用于表示布尔值。
null：表示空值。
undefined：表示未定义的值。

引用类型包括：

Array：用于表示数组。
Object：用于表示对象。
Function：用于表示函数。

声明

在 TypeScript 中，变量的声明和初始化可以同时进行，也可以分开进行。例如：

// 同时声明和初始化
let name: string = "John Doe";

// 分开声明和初始化
let age: number;
age = 30;

初始化

变量的初始化是指为变量赋值。变量的初始化可以在声明的时候进行，也可以在声明之后进行。例如：

// 在声明的时候初始化
let name: string = "John Doe";

// 在声明之后初始化
let age: number;
age = 30;

类型推断

TypeScript 中的类型推断是指编译器根据变量的赋值来推断变量的类型。例如：

let name = "John Doe"; // 类型推断为 string
let age = 30; // 类型推断为 number

在上面的代码中，编译器根据变量的赋值推断出 name 的类型为 string，age 的类型为 number。

接口

接口是一种定义对象类型的机制。接口可以包含属性、方法和索引签名。例如：

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

在上面的代码中，我们定义了一个名为 Person 的接口。这个接口包含三个成员：属性 name 和 age，方法 greet()。

类

类是一种创建对象的蓝图。类可以包含属性、方法和构造函数。例如：

class Person {
  name: string;
  age: number;

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

在上面的代码中，我们定义了一个名为 Person 的类。这个类包含两个属性：name 和 age，一个构造函数和一个方法 greet()。

继承

继承是一种创建新类的方式，新类可以继承父类的属性和方法。例如：

class Employee extends Person {
  salary: number;

  constructor(name: string, age: number, salary: number) {
    super(name, age);
    this.salary = salary;
  }

  getSalary() {
    return this.salary;
  }
}

在上面的代码中，我们定义了一个名为 Employee 的类，Employee 类继承了 Person 类。Employee 类包含了一个新的属性 salary 和一个新的方法 getSalary()。

多态

多态是指对象可以以不同的方式响应相同的操作。例如：

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

class Employee extends Person {
  greet() {
    console.log("Hello, my name is " + this.name + " and I am an employee.");
  }
}

function greetPerson(person: Person) {
  person.greet();
}

greetPerson(new Person("John Doe")); // 输出：Hello, my name is John Doe
greetPerson(new Employee("Jane Doe")); // 输出：Hello, my name is Jane Doe and I am an employee.

在上面的代码中，我们定义了两个类：Person 和 Employee。Employee 类继承了 Person 类。greetPerson() 函数接收一个 Person 对象作为参数，并调用该对象的 greet() 方法。当我们传入一个 Person 对象时，greet() 方法会输出 "Hello, my name is " + this.name。当我们传入一个 Employee 对象时，greet() 方法会输出 "Hello, my name is " + this.name + " and I am an employee."。

模块

模块是一种将相关代码组织在一起的方式。例如：

// 定义一个模块
module MyModule {
  export class Person {
    name: string;
    age: number;

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

    greet() {
      console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
  }
}

// 使用模块
import { Person } from "./MyModule";

let person = new MyModule.Person("John Doe", 30);
person.greet(); // 输出：Hello, my name is John Doe and I am 30 years old.