TypeScript 速成

1. 类型约束

1.1 类型推断（不建议使用）

let str1 = "abc"; // 推断 `str1` 为字符串类型

str1 = 10; // 报错，不能将数值赋值给字符串类型

1.2 类型注解（建议使用）

let str2: string = "abc"; // 显式指定 `str2` 为字符串类型

str2 = 10; // 报错，不能将数值赋值给字符串类型

1.3 类型断言

let numArr = [1, 2, 3];

const result = numArr.find((item) => item > 2) as number;

result * 5; // 若 `result` 为 `undefined`，则无法进行乘法运算，会报错

2. 基础类型、联合类型和交叉类型

let v1: string = "abc";
let v2: number = 10;
let v3: boolean = true;
let nu: null = null;
let un: undefined = undefined;

// 联合类型：v4 只能被分配 `string` 或 `null` 类型
let v4: string | null = null;
let v5: 1 | 2 | 3 = 2; // `v5` 只能取 1, 2, 3 中的任意一个值

// 交叉类型
interface objI {
  name: string,
  age: number
}
interface objI2 {
  name: string,
  sex: boolean
}
let v6: objI & objI2 = {
  name: '正常执行',
  age: 12,
  sex: true
}

3. 数组

// 数组的类型约束
let arr1: number[] = [1, 2, 3];
let arr2: Array<string> = ["a", "b", "c"];

4. 元组

// 元组：指定数组的元素个数和每个元素的类型
let t1: [number, string, number?] = [1, "a", 2]; 
// '?' 表示该位置的元素为可选项，且类型需与定义一致

5. 枚举

// 定义枚举
enum MyEnum {
    A = 1,
    B, // 默认递增到 2
    C,
    D = 10,
    E, // 默认递增到 11
    F,
}

// 访问枚举值
console.log(MyEnum.A);   // 输出：1
console.log(MyEnum[1]);  // 输出："B"
console.log(MyEnum[10]); // 输出："D"

6. 函数

6.1 基本用法

function MyFn1(a: number, b: string): string {
  return a + b; // 参数和返回值均进行了类型约束
}

// void的使用：用于那些不需要返回值的函数
function MyFn2(): void {
  console.log("Hello, World!");
}

// never的使用：用于函数永不返回正常结果或者返回结果超出了正常类型系统的表示范围
function MyFn3(): never {
  throw new Error("Error");
}

6.2 带默认值和可选参数的函数

function MyFn2(a: boolean, b = 10, c?: string, ...rest: number[]): boolean {
  return a;
}

// 使用该函数
const f: boolean = MyFn2(true, 20, "zx", 1, 2, 3, 4, 5);
console.log(f); // 输出：true

7. 接口

7.1 普通对象定义

const obj = {
  name: "xiaomin",
  age: 15,
};

7.2 使用接口定义对象类型

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

const obj: Person = {
  name: "a",
  age: 10,
};

// 接口继承
interface Student extends Person {
  grade: number;
}

const student: Student = {
  name: "b",
  age: 12,
  grade: 1,
};

8. 类型别名

8.1 基本用法

let a: string | number = 10;
let b: string | number = 20;
let c: string | number = 30;

8.2 使用类型别名简化代码

type MyType = string | number;

let a: MyType = 10;
let b: MyType = 20;
let c: MyType = 30;

9. 泛型

9.1 泛型函数

function myFn<T>(a: T, b: T, ...r: T[]): T[] {
  return [a, b, ...r];
}

// 使用泛型函数
const arr: number[] = myFn<number>(1, 2, 3, 12, 3);
console.log(arr); // 输出：[1, 2, 3, 12, 3]

10. 命名空间

namespace Greetings {
    export function sayHello(name: string): string {
        return `Hello, ${name}!`;
    }

    export function sayGoodbye(name: string): string {
        return `Goodbye, ${name}!`;
    }
}

let helloMessage = Greetings.sayHello("Alice");
let goodbyeMessage = Greetings.sayGoodbye("Bob");

console.log(helloMessage);  // 输出: Hello, Alice!
console.log(goodbyeMessage);  // 输出: Goodbye, Bob!