Typescript 多场景详细使用案

TypeScript是一种静态类型的超集于JavaScript，它在大型项目中非常受欢迎，因为它提供了类型检查和更好的开发工具集成。以下是一些TypeScript在不同场景下的详细使用案例：

1. 基本类型注解

场景：为变量、函数参数和返回值添加类型注解。

案例：

let isDone: boolean = false;

function greet(name: string): string {
  return `Hello, ${name}`;
}

const message: string = greet("TypeScript");

2. 接口

场景：定义对象的结构，用于类型检查。

案例：

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

function introduce(person: Person) {
  console.log(`Name: ${person.name}, Age: ${person.age}`);
}

introduce({ name: "Alice", age: 30 });

3. 类

场景：使用类来创建对象，并利用TypeScript的类型系统。

案例：

class Animal {
  protected name: string;

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

  speak(): string {
    return `${this.name} makes a noise`;
  }
}

class Dog extends Animal {
  speak(): string {
    return `${this.name} barks`;
  }
}

const dog = new Dog("Buddy");
console.log(dog.speak());

4. 泛型

场景：创建可重用的组件或函数，这些组件或函数可以适用于不同的数据类型。

案例：

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

const output1 = identity<string>("Hello, World");  // 类型为 string
const output2 = identity<number>(42);            // 类型为 number

5. 枚举

场景：定义命名的常数集合。

案例：

enum Color {
  Red,
  Green,
  Blue
}

function getColorName(color: Color): string {
  switch (color) {
    case Color.Red:
      return "Red";
    case Color.Green:
      return "Green";
    case Color.Blue:
      return "Blue";
  }
}

console.log(getColorName(Color._Red)); // "Red"

6. 联合类型和类型守卫

场景：处理值可以是几种类型之一的情况，并使用类型守卫来确定变量的确切类型。

案例：

type ClickEvent = MouseEvent | TouchEvent;

function handleEvent(event: ClickEvent) {
  if ((event as MouseEvent).clientX) {
    console.log("Mouse clicked at:", (event as MouseEvent).clientX);
  } else {
    console.log("Touch event");
  }
}

7. 模块

场景：使用模块来组织代码。

案例：

// greeting.ts
export function sayHello(name: string) {
  return `Hello, ${name}!`;
}

// app.ts
import { sayHello } from "./greeting";

console.log(sayHello("TypeScript"));

8. 命名空间

场景：使用命名空间来组织大型项目中的代码。

案例：

namespace UserAPI {
  export function getUserInfo() {
    // ...
  }
}

namespace UserAPI {
  export function login() {
    // ...
  }
}

UserAPI.getUserInfo();
UserAPI.login();

9. 装饰器

场景：使用装饰器来添加额外的功能或修改类和类成员的行为。

案例：

function logClassUsage<T extends { new(...args: any[]): {} }>(constructor: T) {
  console.log(`Using class: ${constructor.name}`);
  return class extends constructor {
    // ...
  };
}

@logClassUsage
class MyClass {
  // ...
}

10. 配置文件（tsconfig.json）

场景：使用配置文件来管理编译选项。

案例：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

通过这些案例，你可以看到TypeScript在不同编程场景下的应用，包括类型注解、接口、类、泛型、枚举、模块、命名空间、装饰器以及配置文件的使用。这些特性使得TypeScript非常适合用于构建大型、可维护的应用程序。