快速学习 「 TypeScript 」 相关语法

以下是包含注释的 TypeScript 核心概念示例：

1. 基本类型

TypeScript 提供了一些基本的类型，可以为变量、函数参数和函数返回值指定类型。

// 声明一个布尔类型的变量
let isDone: boolean = false;

// 声明一个数字类型的变量
let decimal: number = 6;

// 声明一个字符串类型的变量
let color: string = "blue";

// 声明一个数组类型的变量
let list: number[] = [1, 2, 3];

// 声明一个元组类型的变量，包含一个字符串和一个数字
let x: [string, number];
x = ["hello", 10]; // 正确的初始化

// 声明一个枚举类型的变量
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// 声明一个 any 类型的变量，可以赋予任意类型的值
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

2. 接口 (Interface)

接口用于定义对象的类型。

// 定义一个接口，用于描述一个人的类型
interface Person {
  firstName: string;
  lastName: string;
}

// 使用接口定义的类型作为参数类型
function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

// 创建一个符合接口类型的对象
let user = { firstName: "Jane", lastName: "Doe" };
console.log(greeter(user)); // 输出：Hello, Jane Doe

3. 类 (Class)

TypeScript 支持类和继承，允许你使用面向对象编程（OOP）。

// 定义一个 Animal 类
class Animal {
  // 私有属性 name
  private name: string;

  // 构造函数，用于初始化 name 属性
  constructor(theName: string) {
    this.name = theName;
  }

  // 方法 move，打印动物移动的距离
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

// 定义一个 Dog 类，继承自 Animal 类
class Dog extends Animal {
  // 方法 bark，打印 "Woof! Woof!"
  bark() {
    console.log("Woof! Woof!");
  }
}

// 创建一个 Dog 的实例
let dog = new Dog("Rex");
dog.bark(); // 输出：Woof! Woof!
dog.move(10); // 输出：Rex moved 10m.

4. 泛型 (Generics)

泛型允许你创建可重用的组件，使组件可以适用于多个类型。

// 定义一个泛型函数 identity，返回传入的参数
function identity<T>(arg: T): T {
  return arg;
}

// 使用泛型函数，传入字符串类型
let output1 = identity<string>("myString"); // 类型为 string

// 使用泛型函数，传入数字类型
let output2 = identity<number>(42); // 类型为 number

5. 枚举 (Enum)

枚举是一种常见的类型，使用枚举可以为一组相关的值赋予友好的名字。

// 定义一个 Direction 枚举
enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

// 使用枚举类型的变量
let dir: Direction = Direction.Up;
console.log(dir); // 输出：1

6. 类型断言 (Type Assertions)

类型断言可以告诉编译器将某个值视为特定的类型。

// 定义一个 any 类型的变量
let someValue: any = "this is a string";

// 使用类型断言，将 someValue 视为 string 类型
let strLength: number = (someValue as string).length;

7. 联合类型 (Union Types)

联合类型表示一个值可以是几种类型之一。

// 定义一个联合类型的变量，可以是 string 或 number 类型
let value: string | number;
value = "Hello"; // 正确
value = 123; // 也正确

// 定义一个函数，参数可以是 string 或 number 类型
function printId(id: number | string) {
  if (typeof id === "string") {
    // 如果 id 是字符串类型，打印大写形式
    console.log("ID: " + id.toUpperCase());
  } else {
    // 如果 id 是数字类型，直接打印
    console.log("ID: " + id);
  }
}

8. 交叉类型 (Intersection Types)

交叉类型将多个类型合并为一个类型。

// 定义一个接口，用于处理错误
interface ErrorHandling {
  success: boolean;
  error?: { message: string };
}

// 定义一个接口，用于描述艺术品数据
interface ArtworksData {
  artworks: { title: string }[];
}

// 交叉类型，将两个接口合并为一个类型
type ArtworksResponse = ArtworksData & ErrorHandling;

// 创建一个符合交叉类型的对象
let response: ArtworksResponse = {
  success: true,
  artworks: [{ title: "Mona Lisa" }]
};

9. 类型别名 (Type Aliases)

类型别名可以为一个类型创建一个新的名字。

// 定义一个字符串类型的别名
type Name = string;

// 定义一个返回字符串的函数类型别名
type NameResolver = () => string;

// 定义一个联合类型别名，可以是 Name 或 NameResolver
type NameOrResolver = Name | NameResolver;

// 定义一个函数，根据类型返回字符串
function getName(n: NameOrResolver): Name {
  if (typeof n === "string") {
    return n;
  } else {
    return n();
  }
}

10. 命名空间 (Namespace)

命名空间用于组织代码，以避免命名冲突。

// 定义一个命名空间 Validation
namespace Validation {
  // 定义一个接口，用于字符串验证
  export interface StringValidator {
    isAcceptable(s: string): boolean;
  }

  // 定义一个正则表达式，用于字母验证
  const lettersRegexp = /^[A-Za-z]+$/;

  // 实现 StringValidator 接口的类
  export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
      return lettersRegexp.test(s);
    }
  }
}

// 使用命名空间中的类和接口
let validator = new Validation.LettersOnlyValidator();
console.log(validator.isAcceptable("Hello")); // true

11. 模块 (Modules)

模块用于将代码分割成多个文件，并通过 import 和 export 进行导入和导出。

// math.ts
// 导出一个加法函数
export function add(x: number, y: number): number {
  return x + y;
}

// main.ts
// 导入加法函数
import { add } from "./math";
console.log(add(1, 2)); // 输出：3

这些示例涵盖了 TypeScript 的核心概念，并通过注释帮助理解每个示例的具体功能和用途。通过这些示例，你可以更快地掌握 TypeScript 的基本用法和特性。