TypeScript核心玩法，顺便附赠面试通关秘籍！

学相声不练嘴，学TS先搞懂类型

🎯 一、TypeScript 是啥？为啥要学它？

你可以理解为 "给 JavaScript 加了个智能纠错仪"：

身份：JavaScript 的超集（JS 代码直接扔进 TS 里也能跑）。
绝活：静态类型检查------代码没运行就能揪出错误，比如把字符串当数字用？当场报错！。
适用场景：适合团队协作、大型项目，避免"你传了个啥？我返回了个啥？"的灵魂拷问。

💡 JS vs TS 相声式对比

JS："我动态，我自由！"（运行时可能崩给你看）

TS："我严谨，我靠谱！"（写代码时就逼你写说明书）

🚀 二、新手必会：TS 核心语法速成班

1. 类型标注：给变量贴标签

基础类型 ：string, number, boolean 三大护法：

typescript 复制代码

let name: string = "阿强";  
let age: number = 28;  
let isCoder: boolean = true;

数组与元组 ：

typescript 复制代码

let hobbies: string[] = ["写bug", "改bug"]; // 字符串数组  
let profile: [string, number] = ["阿强", 28]; // 元组：固定长度+类型

any vs unknown ：
- any："我不管了"模式（慎用，等于回到 JS）
- unknown："先验明正身再用"（更安全，用前需类型断言）

2. 函数：告别"参数迷魂阵"

给参数和返回值加类型，避免传错被喷：

typescript 复制代码

function greet(name: string): string {  
  return `你好，${name}！今天写bug了吗？`;  
}

可选参数 ：参数后加 ?，比如 age?: number。

3. 接口（Interface）：给对象立规矩

定义对象该长啥样，缺属性？多属性？TS 直接红牌警告：

typescript 复制代码

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

const user: User = { name: "阿珍", age: 25 }; // 必须包含 name 和 age

4. 类（Class）：面向对象真香

TS 的类支持 继承、封装、修饰符 （public/private/protected）：

typescript 复制代码

class Animal {  
  constructor(public name: string) {} // public 自动赋值  
  move(distance: number = 0) {  
    console.log(`${this.name} 移动了 ${distance} 米`);  
  }  
}  

class Cat extends Animal {  
  constructor(name: string) {  
    super(name); // 调用父类构造函数  
  }  
  meow() {  
    console.log("喵~");  
  }  
}  

const cat = new Cat("橘座");  
cat.move(10); // 输出：橘座 移动了 10 米

⚡ 三、进阶技巧：装X与实用并存

1. 泛型（Generics）：万能类型模板

需求：写一个函数，既能处理数字也能处理字符串，但不想写两遍？
方案：用泛型 T 占位！

typescript 复制代码

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

echo<string>("hello"); // 返回 string  
echo<number>(42);      // 返回 number

2. 联合类型（|）与交叉类型（&）

联合类型 ：string | number ------ 要么是字符串，要么是数字。
交叉类型 ：Programmer & Designer ------ 既是程序员又是设计师（全能大佬）。

3. 类型别名（type） vs 接口（interface）

相同点：都能定义对象类型。
不同点 ：
- interface：可重复声明自动合并（适合扩展）。
- type：能定义联合类型、元组等（更灵活）。

typescript 复制代码

type ID = string | number; // type 能搞联合，interface 不行

🎓 四、面试急救包：高频题+骚操作

🔥 TS 灵魂拷问 Top 5

TS 和 JS 有啥区别？
- TS 是静态类型，需编译；JS 是动态类型，直接执行。
any 和 unknown 怎么选？
- 能用 unknown 就别用 any！unknown 用前必须断言（比如 as string），更安全。
type 和 interface 怎么选？
- 对象用 interface，联合类型用 type。
never 类型是干啥的？
- 表示"不可能发生"，比如函数抛出错误或死循环。
如何定义一个只读数组？
- ReadonlyArray<string> 或 readonly string[]，防止手贱改数据。

💼 面试实战代码题

题目：用 TS 实现一个简易 Todo 应用（类+接口）

typescript 复制代码

interface Todo {  
  id: number;  
  text: string;  
  completed: boolean;  
}  

class TodoList {  
  private todos: Todo[] = [];  

  addTodo(text: string): number {  
    const newTodo: Todo = {  
      id: Date.now(),  
      text,  
      completed: false  
    };  
    this.todos.push(newTodo);  
    return newTodo.id;  
  }  

  removeTodo(id: number): void {  
    this.todos = this.todos.filter(todo => todo.id !== id);  
  }  
}  

const myTodoList = new TodoList();  
myTodoList.addTodo("学TS面试技巧");

📚 五、学习资源：从入门到拿Offer

资源类型	推荐内容	特点
在线练习	TypeScript Playground	免安装，实时编译，适合摸鱼
入门教程	知乎《最全TypeScript 入门教程》	图文并茂，段子多
面试题库	《互联网大厂200道TS面试题》	刷完底气+50%
官方手册	TypeScript Handbook	权威，但较枯燥（建议当字典查）

💎 结语：TS 学习心法

"类型标得好，加班来得少；泛型用得溜，代码像散文。 "

初期多写多报错，IDE 会手把手教你做人（VSCode 对 TS 支持极佳）。面试时把类型系统、接口、泛型讲明白，Offer 已在路上！ 🚀

（注：若你正被同事的"屎山JS"折磨，不妨把文章转发TA："试试TS吧，它能救你命。" 😉）