demo

90dcc55 整体迁移

https://chat.deepseek.com/a/chat/s/10d3b519-6dc1-47c9-aab8-36fb0cf859e5

TypeScript（TS）是 JavaScript 的超集，核心是在 JS 基础上增加了静态类型系统。下面按类别整理一份常用 TS 语法一览，适合快速查阅。

一、基础类型

let isDone: boolean = false;
let num: number = 42;
let str: string = "hello";
let arr: number[] = [1, 2, 3];
let arr2: Array<number> = [1, 2, 3];
let tuple: [string, number] = ["age", 18];
let u: undefined = undefined;
let n: null = null;
let obj: object = { a: 1 };
let anyVal: any = 123;        // 任意类型，放弃检查
let unknownVal: unknown = 123; // 未知类型，比 any 安全
let neverVal: never;          // 永远不会返回（抛错/死循环）
let v: void = undefined;      // 无返回值

二、类型注解与推断

// 注解
let count: number = 10;

// 推断：不写类型，TS 自动推导
let name = "Tom"; // string

// 联合类型
let id: string | number = 1;

// 字面量类型
let direction: "up" | "down" = "up";

// 类型别名
type Point = { x: number; y: number };
let p: Point = { x: 1, y: 2 };

// 交叉类型
type A = { a: number };
type B = { b: string };
type C = A & B; // { a: number; b: string }

三、接口 interface

interface User {
  id: number;
  name: string;
  age?: number;          // 可选属性
  readonly email: string; // 只读
  [key: string]: any;     // 索引签名
}

// 函数类型
interface Fn {
  (x: number, y: number): number;
}

// 继承
interface Admin extends User {
  role: string;
}

四、函数

// 参数与返回值类型
function add(a: number, b: number): number {
  return a + b;
}

// 可选参数、默认参数
function greet(name: string, age?: number, msg: string = "hi"): void {}

// 剩余参数
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}

// 箭头函数
const mul = (a: number, b: number): number => a * b;

// 函数重载
function fn(x: string): string;
function fn(x: number): number;
function fn(x: any): any {
  return x;
}

五、类 class

class Person {
  public name: string;        // 公开
  private age: number;        // 私有
  protected gender: string;   // 受保护
  readonly id: number;        // 只读
  static species = "human";   // 静态

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

  // 简写：构造函数参数属性
  // constructor(public name: string, private age: number) {}

  get info(): string {
    return `${this.name}`;
  }
  set info(v: string) {
    this.name = v;
  }

  method(): void {}
}

// 继承
class Student extends Person {
  constructor(name: string, age: number, public grade: number) {
    super(name, age);
  }
  override method(): void {} // override 关键字（可选）
}

// 抽象类
abstract class Animal {
  abstract makeSound(): void;
}

六、泛型

// 泛型函数
function identity<T>(arg: T): T {
  return arg;
}
identity<string>("hi");
identity(123); // 自动推断

// 泛型接口
interface Box<T> {
  value: T;
}

// 泛型类
class Stack<T> {
  private items: T[] = [];
  push(item: T) { this.items.push(item); }
  pop(): T | undefined { return this.items.pop(); }
}

// 泛型约束
function getLength<T extends { length: number }>(arg: T): number {
  return arg.length;
}

// 默认泛型
function create<T = string>(): T { return {} as T; }

// keyof
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

七、枚举 enum

enum Direction {
  Up,      // 0
  Down,    // 1
  Left,    // 2
  Right,   // 3
}

enum Status {
  Success = "SUCCESS",
  Fail = "FAIL",
}

const enum Color { Red, Green } // 编译时内联，无运行时对象

八、类型断言与守卫

// 断言
let val: any = "hello";
let len = (val as string).length;
let len2 = (<string>val).length; // 另一种写法

// 非空断言
let el = document.getElementById("app")!;

// 类型守卫
function isString(x: unknown): x is string {
  return typeof x === "string";
}

// typeof / instanceof / in
if (typeof x === "number") {}
if (x instanceof Date) {}
if ("name" in obj) {}

// 可辨识联合
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "square"; side: number };

function area(s: Shape) {
  switch (s.kind) {
    case "circle": return Math.PI * s.radius ** 2;
    case "square": return s.side ** 2;
  }
}

九、工具类型（内置）

interface User {
  id: number;
  name: string;
  age: number;
}

Partial<User>       // 全部可选
Required<User>      // 全部必填
Readonly<User>      // 全部只读
Pick<User, "id">    // 选取部分属性
Omit<User, "id">    // 排除部分属性
Record<string, number> // 键值对类型
Exclude<"a"|"b"|"c", "a"> // "b"|"c"
Extract<"a"|"b", "a"|"c"> // "a"
NonNullable<string | null> // string
ReturnType<typeof fn>      // 函数返回值类型
Parameters<typeof fn>      // 函数参数类型元组
Awaited<Promise<string>>   // string

十、模块与命名空间

// 导出
export const a = 1;
export default function () {}
export type { User };
export interface Foo {}

// 导入
import { a } from "./mod";
import type { User } from "./types"; // 仅类型导入
import * as ns from "./mod";

// 命名空间（较少用）
namespace Utils {
  export function log(msg: string) {}
}

十一、装饰器（实验特性）

function Log(target: any, key: string, desc: PropertyDescriptor) {
  console.log(key);
}

class Demo {
  @Log
  method() {}
}

需在 tsconfig.json 开启 experimentalDecorators。

十二、tsconfig 常用配置

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "lib": ["ES2020", "DOM"]
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

十三、进阶类型操作

// 条件类型
type IsString<T> = T extends string ? true : false;

// 映射类型
type MyPartial<T> = { [K in keyof T]?: T[K] };

// infer 推断
type ElementType<T> = T extends (infer U)[] ? U : never;

// 模板字面量类型
type Greeting = `hello ${string}`;

// satisfies（TS 4.9+）
const config = { port: 3000 } satisfies Record<string, number>;

这份是提纲式速查，实际开发中高频用到的是：基础类型、interface/type、泛型、联合与守卫、工具类型、class、模块。如果你需要某一块的深入讲解（比如泛型进阶、条件类型、装饰器实战），可以告诉我，我再展开。

as <> 泛型，null 区别

const btn = document.querySelector<HTMLButtonElement>('#btn3')!;
const btn2 = document.querySelector('#btn2') as HTMLButtonElement;
区别？

node 直接支持 ts吗？

https://chat.deepseek.com/a/chat/s/09e9d7ec-d8f7-4ada-a261-8645b5ce6bde

Node.js 并非内置了完整的 TypeScript 编译器，而是采用了类型剥离 (Type Stripping) 机制。它只是在运行时将代码中的 TypeScript 类型注解（如 : string、interface 等）替换为空白，然后当作普通 JavaScript 执行。这个过程不进行任何类型检查，因此速度很快，也不需要生成 source map

vscode 还报错

• codex://threads/01a12994-9b22-75f2-ad03-bbb47b80f97b
• https://chat.deepseek.com/a/chat/s/d30fa233-6272-452e-bec9-fa2415e12153

解释原理： "references": [
 { "path": "./tsconfig.node.json" },
 { "path": "./tsconfig.renderer.json" },
 { "path": "./tsconfig.scripts.json" },
 { "path": "./tsconfig.wsh.json" }
 ]

声明合并

interface SyncManager extends SyncManagerLibraryMethods {}
class SyncManager {...

// Preserve method descriptors on the existing public prototype.
for (const name of Object.getOwnPropertyNames(SyncManagerLibraryMethods.prototype)) {

• codex://threads/01a12a1b-d998-7a52-ab11-86f26bf8a01a
• 需注意：类型声明本身不能保证运行时方法已经挂载。

unknown Record

let src: unknown;
let dest = src as Record<string, unknown>;
console.log(src.a, dest.a);