返回

掌握 TypeScript 基础：原始类型、函数、接口、类、泛型

前端

JavaScript 和 TypeScript

TypeScript 是 JavaScript 的超集，它在 JavaScript 的基础上增加了类型系统，从而使 JavaScript 代码更加健壮和易于维护。TypeScript 代码可以被编译成 JavaScript 代码，因此它可以运行在任何支持 JavaScript 的环境中。

原始类型

TypeScript 中的原始类型包括：

  • 数值类型：number
  • 字符串类型：string
  • 布尔类型：boolean
  • 空值类型：null 和 undefined
  • 符号类型：symbol

原始类型是 TypeScript 中最基本的类型，它们无法被进一步分解。

函数

TypeScript 中的函数使用 function 来定义，函数可以接受参数，也可以返回一个值。函数的语法如下：

function functionName(parameters): returnType {
  // 函数体
}

例如，以下函数计算两个数的和：

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

接口

TypeScript 中的接口是一种用来定义对象的类型的工具。接口可以包含属性和方法，但它本身不包含任何实现。接口的语法如下：

interface InterfaceName {
  // 属性和方法
}

例如，以下接口定义了一个名为 Person 的对象类型，该对象具有 name 和 age 属性：

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

类

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

class ClassName {
  // 属性和方法
}

例如，以下类定义了一个名为 Car 的类，该类具有 make、model 和 year 属性，以及一个 drive() 方法：

class Car {
  make: string;
  model: string;
  year: number;

  constructor(make: string, model: string, year: number) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  drive() {
    console.log("The car is driving!");
  }
}

泛型

TypeScript 中的泛型是一种用来创建可重用的组件的工具。泛型可以被参数化，从而使组件可以适用于不同的类型。泛型的语法如下：

function functionName<T>(parameter: T): T {
  // 函数体
}

例如，以下函数使用泛型来定义一个交换两个变量值的函数：

function swap<T>(a: T, b: T): [T, T] {
  return [b, a];
}

总结

本文简要介绍了 TypeScript 的基础知识，包括原始类型、函数、接口、类和泛型。通过本文的学习，读者可以快速掌握 TypeScript 的基本技能，并能够编写出更加高质量的 TypeScript 代码。

进一步学习

想要进一步学习 TypeScript，可以参考以下资源：