探索TypeScript基础语法：让你的JavaScript项目更强大(下)

📈「作者简介」：不知名十八线技术博主【ai_todo】
📚「推荐主页」：前端小姐姐【阿珊和她的猫】
🎁「推荐专栏」：《从0到0.01入门React》
🕐「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

• Vue.js 和 Egg.js 开发企业级健康管理项目
• 带你从入门到实战全面掌握 uni-app

函数

在TypeScript中，函数是一种能够执行特定任务的可调用对象。

可以使用以下语法声明和定义一个函数：

function functionName(parameter1: type1, parameter2: type2, ...): returnType {
  // 函数体
  // 执行特定任务的代码
  return value; // 可选，指定函数的返回值类型和返回值
}

让我们逐个解释这些部分：

• functionName：函数名称，用于在调用函数时引用该函数。
• parameter1, parameter2, …：函数参数，用于接收传递给函数的值。可以在函数声明中指定参数的类型注解，并根据需要添加默认值。
• type1, type2, …：参数的类型注解，指定参数的预期类型。
• returnType：函数的返回值类型，指定函数执行后返回的值的类型。可以省略，如果省略，则函数的返回类型将是void（无返回值）。
• return value：可选的返回语句，指定函数执行后的返回值。如果函数有返回值，并且指定了返回类型，那么返回值的类型必须与返回类型兼容。

以下是一些示例来说明不同类型的函数：

1. 无参数和无返回值的函数

function sayHello(): void {
  console.log("Hello!");
}

2. 带参数函数和返回值的函数

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

3. 默认参数值的函数

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

4. 匿名函数

const square = function(x: number): number {
  return x * x;
};

5. 函数表达式

const multiply = (a: number, b: number): number => {
  return a * b;
};

除了以上示例，TypeScript还支持更多的函数特性，如可选参数、剩余参数、函数重载等。这些特性可以让您更灵活、更精确地定义函数的行为。

类与面向对象编程

在TypeScript中，可以使用类和面向对象编程的概念来组织和抽象代码。

类是对象的蓝图，它定义了对象所具有的属性和方法。

下面我们将介绍如何在TypeScript中定义类和使用面向对象编程的一些特性。

1. 定义类

可以使用class关键字来定义一个类，并使用constructor方法来初始化类的实例。类可以包含属性、方法和构造函数等成员。

class Person {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

2. 创建类的实例

通过使用new关键字，可以创建类的实例，并调用类的构造函数来初始化对象的属性。

const person1 = new Person("Alice", 25);
person1.sayHello(); // 输出：Hello, my name is Alice and I'm 25 years old.

3. 继承

TypeScript支持类的继承，可以使用extends关键字来创建一个子类并继承父类的属性和方法。

class Student extends Person {
  grade: number;

  constructor(name: string, age: number, grade: number) {
    super(name, age); // 调用父类的构造函数来初始化继承的属性
    this.grade = grade;
  }

  study(): void {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

4. 方法重写

子类可以重写父类的方法，以改变方法的实现。

class Student extends Person {
  // ...

  sayHello(): void {
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old, and I'm a student.`);
  }
}

5. 访问修饰符

TypeScript提供了访问修饰符，用于限制类成员的访问权限。常用的访问修饰符有public、private和protected。

• public：公共访问修饰符，可以在类内部、子类和类外部访问。
• private：私有访问修饰符，只能在类内部访问。
• protected：受保护访问修饰符，可以在类内部和子类中访问，但不能在类外部访问。

class Person {
  private name: string;
  protected age: number;
  public gender: string;

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

  // ...
}

通过访问修饰符，可以灵活地控制属性和方法的访问权限，增加类的封装性和安全性。

这只是面向对象编程在TypeScript中的简要介绍，还有许多其他概念和特性，如抽象类、接口、多态等，可以进行更深入的学习和实践。

接口

在TypeScript中，接口（Interfaces）用于定义对象的结构，包括属性和方法的类型。

接口提供了一种方式来描述对象的形状，并定义了对象应该具有的属性和方法。

以下是在TypeScript中定义和使用接口的示例：

1. 定义接口

使用interface关键字来定义一个接口，并在接口中声明对象的属性和方法。

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

2. 实现接口

在类中可以使用implements关键字来实现一个或多个接口，表示类将遵循接口中定义的结构。

class Student implements Person {
  name: string;
  age: number;

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

  sayHello(): void {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

3. 接口可选属性

可以使用?符号表示接口中的属性为可选的。

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

4. 接口可读写属性

可以使用readonly关键字表示接口中的属性只读，无法修改。

interface Point {
  readonly x: number;
  readonly y: number;
}

5. 接口函数类型的定义

接口可以定义函数类型的属性，例如回调函数。

interface OnClick {
  (event: MouseEvent): void;
}

通过使用接口，可以使代码更具可读性和可维护性，同时提供类型检查，确保对象符合预期的结构和行为。

除了上述示例，TypeScript的接口还支持继承、接口之间的实现、可索引类型等高级特性，这些特性能够更灵活、更精确地描述对象结构。

泛型

在TypeScript中，泛型（Generics）允许我们参数化类型，从而在多个地方重用一段代码，并增强代码的类型安全性。使用泛型能够创建具有通用性的函数、类和接口。

以下是在TypeScript中使用泛型的几个示例：

1. 泛型函数

可以使用<T>语法声明一个泛型参数，并在函数的参数、返回类型或函数体中使用这个参数。

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

// 使用泛型函数
let result = identity<number>(10); // 指定泛型参数为number类型
console.log(result); // 输出：10

// 在很多情况下，编译器可以推断泛型参数的类型：
let result2 = identity("Hello"); // 编译器推断泛型参数为string类型
console.log(result2); // 输出：Hello

2. 泛型类

可以将泛型参数应用于类中的属性、方法和构造函数等成员。

class Box<T> {
  private item: T;

  constructor(item: T) {
    this.item = item;
  }

  getItem(): T {
    return this.item;
  }
}

// 使用泛型类
let box1 = new Box<number>(10); // 指定泛型参数为number类型
console.log(box1.getItem()); // 输出：10

let box2 = new Box<string>("Apple"); // 指定泛型参数为string类型
console.log(box2.getItem()); // 输出：Apple

3. 泛型接口

可以使用接口和泛型结合，定义具有泛型类型的接口。

interface KeyValuePair<K, V> {
  key: K;
  value: V;
}

// 使用泛型接口
let pair: KeyValuePair<number, string> = { key: 1, value: "Apple" };
console.log(pair); // 输出：{ key: 1, value: 'Apple' }

泛型在编写可重用和类型安全的代码时非常有用，它们允许我们针对不同的数据类型编写通用的函数和类。

需要注意的是，泛型是在编译时进行类型检查的，并在编译为JavaScript时被擦除，不会影响运行时的性能。

附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app