『TypeScript』深入理解变量声明、函数定义、类与接口及泛型

本文链接：https://blog.csdn.net/qq_34202873/article/details/134865794

本文详细介绍了TypeScript中的变量声明、类型注解、函数与方法、类与接口的使用，以及泛型的概念和应用，帮助读者从基础入门到深入理解TypeScript的核心特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请添加图片描述

请添加图片描述
📣读完这篇文章里你能收获到

了解TypeScript变量声明与类型注解
掌握TypeScript函数与方法的使用
掌握TypeScript类与接口的使用
掌握TypeScript泛型的应用

请添加图片描述

一、变量声明与类型注解

1. 变量声明

在TypeScript中，我们可以使用关键字let或const来声明变量。let用于声明可变的变量，而const用于声明不可变的变量（常量）。通过这种方式，我们可以限制变量被修改的范围，减少潜在的错误。

let count: number = 10;
const name: string = "John";

2. 类型注解

类型注解是TypeScript中的一个重要概念，它允许我们明确指定变量的类型。通过在变量后面使用冒号（:）加上类型，我们可以告诉编译器应该为变量分配何种类型。

let count: number = 10;
let name: string = "John";

类型注解能够提供更好的类型安全性，让我们在编码过程中更早地发现潜在的类型错误。

3. 类型推断

TypeScript还支持类型推断，即根据变量的初始值自动推断出变量的类型。当我们没有显式地指定变量的类型时，TypeScript会根据上下文推断出变量的类型。

let count = 10; // 推断为number类型
let name = "John"; // 推断为string类型

类型推断的好处是可以减少代码中的冗余，同时仍然提供了类型安全性。我们无需在每一个变量声明中都显式地指定类型，TypeScript能够自动推断正确的类型。

请添加图片描述

二、函数与方法定义

在TypeScript中，函数和方法的定义是非常重要的，因为它们是构建可维护、可扩展和可重用代码的基础。本文将介绍如何在TypeScript中定义函数和方法，并探讨一些最佳实践。

1. 函数定义

在TypeScript中，你可以使用function关键字来定义一个函数。下面是一个简单的示例：

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

上面的代码定义了一个名为greet的函数，它接受一个字符串类型的参数name并且不返回任何值（void表示没有返回值）。在调用这个函数时，你需要传入一个字符串作为参数。

2. 方法定义

在面向对象的编程中，方法是与类相关联的函数。在TypeScript中，方法的定义也很简单：

class Greeter {
  private greeting: string;

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

  greet() {
    console.log(`Hello, ${this.greeting}!`);
  }
}

上面的代码定义了一个名为Greeter的类，其中包含一个名为greet的方法。在这个例子中，greet方法并不接受任何参数，它直接访问类的成员变量greeting并输出相应的问候语。

3. 参数和返回类型

在TypeScript中，你可以为函数和方法指定参数的类型以及返回值的类型。这有助于提高代码的可读性和健壮性。下面是一个带有参数和返回类型的函数定义示例：

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

在上面的示例中，add函数接受两个number类型的参数x和y，并返回它们的和作为number类型的结果。

请添加图片描述

三、类与接口的使用

1. 类（Class）

类是面向对象编程的基本概念，它是一种将数据和行为组合在一起的结构。在 TypeScript 中，我们可以使用类来创建对象，并通过类的实例来访问对象的属性和方法。

1.1 定义类

类使用 class 关键字进行定义，以下是一个简单的类示例：

class Animal {
  name: string;

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

  walk(): void {
    console.log(`${this.name} is walking.`);
  }
}

1.2 创建对象

通过类来创建对象的过程称为实例化。我们可以使用 new 关键字来实例化一个类，并获取一个类的实例。

const cat = new Animal("Tom");
cat.walk(); // 输出: "Tom is walking."

2. 接口（Interface）

接口是一种抽象的定义，它描述了对象的行为和属性。在 TypeScript 中，我们可以使用接口来定义对象的结构，并进行类型检查。

2.1 定义接口

接口使用 interface 关键字进行定义，以下是一个简单的接口示例：

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

2.2 实现接口

接口本身并不具备任何实际的数据，它只是一种规范或约束。我们需要通过类来实现接口，并提供具体的实现。

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}, I'm ${this.age} years old.`);
  }
}

2.3 使用接口

一旦我们定义了接口，并且通过类实现了接口，我们就可以使用接口来进行类型检查和约束。

function printInfo(person: Person): void {
  person.sayHello();
}

const student = new Student("Tom", 20);
printInfo(student);

请添加图片描述

四、泛型的应用

1. 什么是泛型？

泛型是一种在编程中使用类型参数来创建可重用代码的方法。通过泛型，我们可以编写能够处理多种类型数据的代码，而不需要针对每种类型都编写一遍。

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

在上面的示例中，我们定义了一个identity函数，它使用了一个类型参数T。这个函数可以接收任何类型的值，并返回相同类型的值。在这里，我们可以将T看作是一个占位符，当我们实际调用这个函数时传入的类型会替换掉它。

2. 泛型类型

除了可以使用泛型函数，我们还可以创建泛型类型。泛型类型在实现某些数据结构时非常有用，例如数组或元组。

interface Box<T> {
  contents: T;
}

let box1: Box<number> = { contents: 42 };
let box2: Box<string> = { contents: "hello" };

在上面的示例中，我们定义了一个Box接口，它使用了一个类型参数T，表示这个盒子中可以装任何类型的物品。我们可以使用不同的类型参数来定义不同的Box，例如box1是一个存储数字的盒子，而box2是一个存储字符串的盒子。

3. 泛型约束

有时候，我们希望泛型能够处理某些特定类型的数据，而不是任何类型。在这种情况下，我们可以使用泛型约束。

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity("hello world"); // 输出 11