掌握 Vue 3 和 TypeScript：构建类型安全的现代应用

一、TS概念

typescript是js的超集，主要学习ts里面的原始类型、字面量类型、数组类型、函数类型、类类型、接口类型、类型别名、联合与交叉类型、枚举类型、泛型等类型元素，以及类型推断、类型断言、类型缩小、类型放大等特性。

二、原始类型

string，number，boolean，symbol，null，undefined

// 声明不同类型的变量
let num: number = 10;
let str: string = "Hello, TypeScript!";
let bool: boolean = true;
let nul: null = null;
let und: undefined = undefined;
let sym: symbol = Symbol("key");

// 数组类型
let numArray: number[] = [1, 2, 3];
let strArray: string[] = ["a", "b", "c"];
let boolArray: boolean[] = [true, false, true];

// 函数返回类型
function add(x: number, y: number): number {
    return x + y;
}

// void 类型
function log(message: string): void {
    console.log(message);
}

// never 类型
function error(message: string): never {
    throw new Error(message);
}

// 类型断言
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

// 类型推断
let inferenceString = "TypeScript"; // 推断为 string 类型
let inferenceNum = 42; // 推断为 number 类型

注意：

1. void只用在函数没有返回值的情形下。

2. undefined和null最大的价值主要体现在接口类型上，表示可缺省、未定义的属性；null表示对象或者属性是空值。这个可以先有个印象，后面说到接口会讲

3. 如果不写类型，typescript是可以推断类型的，但注意let、const的区别

三、非原始类型 

非原始类型在 TypeScript 中通常指的是对象类型（Object Types），包括类（class）、接口（interface）、数组（array）、元组（tuple）、枚举（enum）、函数（function）等。这些类型是由原始类型构建而来，或者是更复杂的数据结构。

下面是一些示例代码展示 TypeScript 中的非原始类型的使用：

接口（Interfaces）

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

// 使用接口
let person: Person = {
    name: "Alice",
    age: 30
};

类（Classes）

// 定义一个类
class Animal {
    name: string;

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

    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

// 使用类
let dog = new Animal("Dog");
dog.speak(); // 输出 "Dog makes a noise."

数组（Arrays）

// 定义一个数组
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];

元组（Tuples）

// 定义一个元组
let tuple: [string, number] = ["Alice", 30];

枚举（Enums）

// 定义一个枚举
enum Color {
    Red,
    Green,
    Blue,
}

// 使用枚举
let c: Color = Color.Green;

函数（Functions）

// 定义一个函数
function add(x: number, y: number): number {
    return x + y;
}

// 使用函数
let result = add(3, 5); // result 将为 8

类型推断和复杂类型

// 复杂类型的推断
let complexObject = {
    name: "John",
    age: 25,
    address: {
        street: "123 Main St",
        city: "Anytown"
    },
    hobbies: ["reading", "sports"]
};

// 推断 complexObject 的类型为：
// { name: string, age: number, address: { street: string, city: string }, hobbies: string[] }