Typescript，前端开发的新宠！附大量代码指南！

2024-02-11 18:31:30

类型定义和静态检查

类型是Typescript的一大亮点。它允许你为变量、函数和对象定义类型。这可以帮助你捕获错误，并在编译时就发现它们。静态检查器还会检查你的代码，以确保它遵循你定义的类型。这意味着你在运行代码之前就能发现很多潜在的错误。

// 定义一个名为name的变量，类型为string
let name: string = "Alice";

// 定义一个名为age的变量，类型为number
let age: number = 25;

// 定义一个名为printName的函数，类型为(name: string) => void
const printName = (name: string): void => {
  console.log(name);
};

// 调用printName函数，并传入变量name
printName(name); // 输出：Alice

接口和类

接口和类是Typescript中两种重要的数据类型。接口定义了一组方法和属性，类可以实现这些接口。这可以帮助你组织代码，并确保代码的可重用性。

// 定义一个名为Person的接口
interface Person {
  name: string;
  age: number;
}

// 定义一个名为Student的类，它实现了Person接口
class Student implements Person {
  name: string;
  age: number;

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

  // 实现Person接口中的printName方法
  printName(): void {
    console.log(this.name);
  }
}

// 创建一个Student类的实例
const student = new Student("Alice", 25);

// 调用printName方法
student.printName(); // 输出：Alice

模块和命名空间

模块和命名空间可以帮助你组织代码，并防止命名冲突。模块可以将相关代码分组在一起，而命名空间可以将相关模块分组在一起。

// 定义一个名为utils的模块
module utils {
  // 定义一个名为add函数
  export function add(a: number, b: number): number {
    return a + b;
  }
}

// 导入utils模块
import { add } from "./utils";

// 调用add函数
const result = add(1, 2); // 输出：3

泛型

泛型允许你定义具有类型参数的函数和类。这可以让你编写可重用的代码，而无需为每种数据类型编写单独的代码。

// 定义一个名为sum函数的泛型函数
function sum<T>(array: T[]): T {
  let total: T = array[0];
  for (let i = 1; i < array.length; i++) {
    total = add(total, array[i]);
  }
  return total;
}

// 调用sum函数，传入一个字符串数组
const result = sum(["a", "b", "c"]); // 输出："abc"

// 调用sum函数，传入一个数字数组
const result = sum([1, 2, 3]); // 输出：6

异步编程

Typescript支持异步编程，允许你编写异步代码，而不必担心回调函数。

// 定义一个名为fetchData函数的异步函数
async function fetchData(): Promise<string> {
  const response = await fetch("https://example.com/data");
  const data = await response.json();
  return data;
}

// 调用fetchData函数
fetchData().then((data) => {
  console.log(data); // 输出：数据
});