TypeScript 基础语法

TypeScript 是 JavaScript 的一个超集，由 Microsoft 开发。它添加了类型系统和一些其他特性，旨在增强代码的可靠性和开发效率。TypeScript 最终会被编译成纯 JavaScript，以便在各种浏览器和节点环境中运行。下面，我们将介绍 TypeScript 的一些基本语法和特性。

1. 类型注解

类型注解是 TypeScript 最核心的特性之一，它允许你明确地指定变量、函数参数和函数返回值的类型。

let isDone: boolean = false;
let age: number = 20;
let firstName: string = "Alice";

function greet(name: string): string {
  return "Hello, " + name;
}

2. 接口（Interfaces）

接口是定义对象形状的强大方式，它指定了对象应该有哪些属性以及对应的类型。

interface User {
  name: string;
  age?: number;  // 可选属性
}

function register(user: User) {
  console.log(user.name);
}

register({ name: "John" }); // 有效
register({ age: 25 }); // 编译错误，缺少'name'属性

3. 类（Classes）

TypeScript 支持基于类的面向对象编程。类可以使用 public、private、protected 这些访问修饰符来控制成员的访问权限。

class Animal {
  private name: string;

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

  public move(distance: number) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

4. 泛型（Generics）

泛型提供了一种方法来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件。

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

let output = identity<string>("myString");
let outputNumber = identity<number>(100);

5. 枚举（Enums）

枚举是一种定义命名常数组的方式，用于创建有限集合的明确值。

enum Color {
  Red,
  Green,
  Blue,
}

let c: Color = Color.Green;

6. 高级类型

• 联合类型：允许一个值可以是几种类型之一。
• 交叉类型：组合多种类型成为一种类型。
• 类型别名：提供类型的新名称。

type StringOrNumber = string | number;
type UserResponse = User & { token: string };

7. 模块

TypeScript 支持模块，允许从外部文件导入其他模块，也可以导出模块使其它文件可以使用。

// some-module.ts
export const pi = 3.14;
export function square(x: number) {
  return x * x;
}

// main.ts
import { pi, square } from "./some-module";
console.log(pi);
console.log(square(10));

8. 装饰器（Decorators）

装饰器是一种特殊类型的声明，它可以被附加到类声明，方法，访问器，属性或参数上。装饰器使用 @expression 这种形式，expression 必须计算为一个函数。

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class BugReport {
  type = "report";
  title: string;

  constructor(t: string) {
    this.title = t;
  }
}

继续深入探讨 TypeScript 的更多高级特性和用法，这些特性可以帮助开发者更有效地编写健壮且可维护的代码。

9. 映射类型（Mapped Types）

映射类型允许你从一个已知的类型创建新类型，它的属性是基于原始类型的属性变换而来。这是一种灵活的方法来创建相关类型，而不必重复定义。

type Keys = 'option1' | 'option2';
type Flags = { [K in Keys]: boolean };

const featureFlags: Flags = {
  option1: true,
  option2: false,
};

10. 条件类型（Conditional Types）

条件类型允许类型具有类似 JavaScript 中 if 语句的逻辑。这可以用于在类型层面进行条件判断。

type Check<T> = T extends string ? 'String' : 'Not String';
type Type1 = Check<string>;  // 'String'
type Type2 = Check<number>;  // 'Not String'

11. 索引访问类型（Indexed Access Types）

通过索引访问类型，可以通过其他类型的索引来查询属性的类型。

type User = { name: string; age: number; };
type UserName = User['name'];  // string

12. Null 安全性（Null Safety）

TypeScript 强制性地处理了 null 和 undefined，可以在编译阶段防止很多运行时错误。

function doSomething(x: string | null) {
  console.log(x!.toUpperCase());  // 使用 '!' 非空断言操作符
}

13. 模块解析

TypeScript 模块解析逻辑决定了模块和导入语句如何互动，支持相对和非相对模块导入。

14. 命名空间（Namespaces）

命名空间是 TypeScript 的一个早期功能，它提供了一种将多个相关的全局类型、接口和类组合到一起的方式。

namespace Validation {
  export interface StringValidator {
    isValid(s: string): boolean;
  }

  const lettersRegexp = /^[A-Za-z]+$/;
  export class LettersOnlyValidator implements StringValidator {
    isValid(s: string) {
      return lettersRegexp.test(s);
    }
  }
}

15. 模块与命名空间的混合使用

TypeScript 允许在模块中使用命名空间来组织代码，反之亦然。

16. 装饰器工厂

装饰器工厂是一个表达式，返回一个函数，该函数在运行时被调用来装饰类或类成员。

function Color(value: string) { // 装饰器工厂
  return function (target) {
    // 这是装饰器
    Object.defineProperty(target, 'color', {
      value: value
    });
  }
}

@Color('blue')
class Car {
}

17. 类型守卫和类型区分（Type Guards and Differentiating Types）

类型守卫允许你在代码块中保证变量属于某个特定类型。这通常通过自定义的类型保护函数实现。

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

// 现在可以安全地使用 'swim' 方法
const pet = getSmallPet();
if (isFish(pet)) {
  pet.swim();
} else {
  pet.fly();
}

18. 高级类型和技巧

TypeScript 支持许多高级类型技巧，如使用 Partial, Readonly, Pick, Record 等实用的内置类型。

19. 模块声明

当需要引入非 TypeScript 模块（如某些 JavaScript 库或 JSON 文件）时，可以使用模块声明来告诉 TypeScript 如何处理它们。

declare module "*.json"

 {
  const value: any;
  export default value;
}