TS 学习笔记

TypeScript 是 JavaScript 的超集，在 JS 之上增加静态类型系统，编译时把类型擦除后输出纯 JS 再运行。

1. 了解TS的原理，先解析成js

• 核心概念：TS = JS + 类型。TS 不能直接在浏览器/Node 中运行，必须先编译（转译）成 JS。
• 编译流程：源码 → 解析生成 AST → 类型检查 → 类型擦除 → 输出 JS。
• 类型是编译期概念：所有类型标注、接口、泛型在编译产物中都不存在，运行时 0 开销。
• 与 JS 差异：JS 是动态类型、运行时才暴露错误；TS 在编译期就能报错。注意：类型正确 ≠ 逻辑正确，编译通过不保证程序没 bug。
• 易错点：vite、esbuild、ts-node 等只做转译、不做类型检查，"能跑起来"不代表类型没问题，CI 里用 tsc --noEmit 兜底。

// 源码（TS）
let num: number = 42;
num = "str"; // ❌ 编译期报错：不能将 string 类型赋给 number

// 编译后的 JS（类型被擦除）
let num = 42; // 产物里不再有 : number

// 命令行：tsc 把 .ts 编译成 .js
// tsc index.ts    → 生成 index.js
// tsc --noEmit    → 只做类型检查，不输出文件（CI 常用）
// tsc --watch     → 监听文件变更自动编译

2. 简单的数据类型的了解

• 基础类型：number、string、boolean、null、undefined、symbol、bigint，对应 JS 原始类型；void 表示无返回值，never 表示永不返回（如抛异常）。
• 数组与元组：number[] 是任意长度的数组；[string, number] 是固定长度、逐位定型的元组，两者别混。
• any 与 unknown：any 关闭所有类型检查，少用；unknown 是"安全的 any"，使用前必须做类型收窄。
• 类型推断：能推断的类型可以省略注解，但要避免"隐式 any"（TS 会报错）。
• 与 JS 差异：JS 没有这些类型概念；typeof 是运行时运算符，TS 类型标注只存在于编译期。
• 易错点：undefined/null 在 strictNullChecks 开启时不能直接赋给其他类型，要用联合类型显式声明可空。

// 基础类型
const name: string = "TS";
const age: number = 26;
const active: boolean = true;

// 数组 / 元组
const tags: string[] = ["typescript", "前端"];
const pair: [string, number] = ["ts", 1]; // 元组：长度固定、按位定型
pair[0] = 2;      // ❌ 第 0 位必须是 string
pair[2] = true;   // ❌ 越界访问不允许

// 对象与函数
const user: { name: string; age: number } = { name: "ts", age: 26 };
function add(a: number, b: number): number {
  return a + b;
}

// any / unknown
let x: any = "随便什么";       // any：完全放开检查，慎用
let y: unknown = "未知类型";
if (typeof y === "string") {  // unknown 必须先收窄
  console.log(y.length);
}

// 可空值：联合类型
let maybe: string | null = null;