TypeScript 初学者练习小 Demo

前端

2023-09-14 12:03:37

大家好，最近我在准备使用 TypeScript 来写点东西，但是关于 TypeScript 的知识只停留在理论层面，上一次实践还是去年在携程实习的时候。

所以，为了巩固我对 TypeScript 的理解，我决定写一个 TypeScript 的入门练习小 Demo，这个 Demo 会涵盖 TypeScript 的一些基础知识，比如类型系统、接口、类等。

TypeScript 基础

在开始写 Demo 之前，我们先简单回顾一下 TypeScript 的一些基础知识。

类型系统

TypeScript 是一门强类型语言，这意味着在 TypeScript 中，每个变量都必须有明确的类型。这有助于 TypeScript 在编译时检查代码中的类型错误，从而提高代码的健壮性和可维护性。

TypeScript 中的类型可以是基本类型（如 number、string、boolean）或复合类型（如数组、对象、类等）。

接口

接口是 TypeScript 中用来定义对象形状的工具。接口可以定义一个对象应该具有的属性和方法，但不能实现这些属性和方法。

类

类是 TypeScript 中用来创建对象的工具。类可以定义对象的属性和方法，并且可以继承自其他类。

TypeScript 练习小 Demo

现在，我们来写一个 TypeScript 的入门练习小 Demo。这个 Demo 的目的是实现一个简单的计算器，它可以进行加、减、乘、除四种基本运算。

1. 创建一个 TypeScript 文件

首先，我们需要创建一个 TypeScript 文件，比如 calculator.ts。

// calculator.ts

2. 定义接口

我们先来定义一个 Calculator 接口，这个接口定义了计算器应该具有的属性和方法。

// calculator.ts
interface Calculator {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
  multiply(a: number, b: number): number;
  divide(a: number, b: number): number;
}

3. 创建类

接下来，我们创建一个 Calculator 类，这个类实现了 Calculator 接口。

// calculator.ts
class Calculator implements Calculator {
  add(a: number, b: number): number {
    return a + b;
  }

  subtract(a: number, b: number): number {
    return a - b;
  }

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

  divide(a: number, b: number): number {
    return a / b;
  }
}

4. 测试计算器

最后，我们来测试一下这个计算器。

// calculator.ts
const calculator = new Calculator();

console.log(calculator.add(1, 2)); // 3
console.log(calculator.subtract(3, 2)); // 1
console.log(calculator.multiply(4, 5)); // 20
console.log(calculator.divide(10, 2)); // 5