从0到1掌握TypeScript！基础知识大揭秘，前端开发必备技能！

1. TypeScript简介：JavaScript的"进化形态"

TypeScript是JavaScript的超集，通过添加静态类型系统 和面向对象编程特性，解决了JavaScript在大型项目中类型松散、维护困难的问题。其核心优势包括：

静态类型检查：编译时捕捉类型错误，减少运行时崩溃风险。
代码可读性：类型注解明确变量用途，提升团队协作效率。
生态兼容性：完全兼容JavaScript，支持渐进式迁移。

2. 基础类型系统：构建代码的"骨架"

TypeScript的类型系统是其核心，覆盖从基础类型到复杂结构的全面支持：

原始类型：
- boolean： 布尔值，true 或 false。
- number： 数字，包括整数和浮点数。
- string： 字符串。
- array： 数组，例如 number[] 或 Array<number>。
- tuple： 元组，固定长度和类型的数组，例如 [string, number]。
- enum： 枚举，定义一组命名的常量。
- any： 任何类型，可以赋值给任何变量。尽量避免使用 any，因为它会失去类型检查的优势。
- void： 没有返回值，通常用于函数。
- null 和 undefined： 分别表示空值和未定义的值。
- never： 永不存在的值的类型，例如抛出异常的函数。
- object： 非原始类型，例如对象、数组和函数。

数组与元组：

typescript 复制代码

let ids: number[] = [1, 2, 3];          // 数字数组  
let person: [string, number] = ["Alice", 25]; // 元组（固定类型顺序）

联合类型与字面量类型：

typescript 复制代码

let age: string | number = "25";        // 多类型兼容  
let gender: "male" | "female" = "male"; // 限定取值范围

枚举（Enum）：定义命名常量集合，增强代码可读性：

typescript 复制代码

enum Direction { Up, Down, Left, Right }  
let heading: Direction = Direction.Up;  // 使用枚举值

3. 函数与接口：规范代码的"契约"

函数类型 ：指定参数和返回值类型，避免意外行为：
typescript 复制代码
```
function add(x: number, y: number): number {  
  return x + y;  
}  
```

接口（Interface） ：定义对象结构，强制实现一致性：

typescript 复制代码

interface User {  
  name: string;  
  age?: number;  // 可选属性  
  readonly id: number; // 只读属性  
}  
const user: User = { name: "Bob", id: 1 };

4. 类与面向对象编程：代码的"组织艺术"

TypeScript强化了JavaScript的面向对象能力：

类与继承 ：支持public、private、protected访问修饰符：

typescript 复制代码

class Animal {  
  constructor(public name: string) {}  
  move(distance: number) {  
    console.log(`${this.name}移动了${distance}米`);  
  }  
}  
class Dog extends Animal {  
  bark() { console.log("Woof!"); }  
}

实现接口 ：通过接口约束类行为：

typescript 复制代码

interface Loggable { log(): void; }  
class Logger implements Loggable {  
  log() { console.log("记录日志"); }  
}

5. 高级类型与工具：解锁"高阶玩法"

泛型（Generics） ：创建灵活可复用的组件：

typescript 复制代码

function identity<T>(arg: T): T { return arg; }  
let output = identity<string>("hello");  // 明确类型参数

类型别名与交叉类型 ：

typescript 复制代码

type Person = { name: string };  
type Employee = Person & { salary: number }; // 合并类型

类型断言与守卫 ：手动指定类型或运行时检查：

typescript 复制代码

let input: any = "hello";  
let length: number = (input as string).length; // 类型断言