内置工具类型全景速查

// 使用 Partial 使所有属性可选
type PartialUser = Partial<User>

// 使用 Required 使所有属性必填
type RequiredUser = Required<User>

// 使用 readonly 修饰符
interface Point {
    readonly x: number
    readonly y: number
}

// 使用 Readonly 工具类型
type ReadonlyUser = Readonly<User>

interface NoteMeta {
  title: string;
  tags: string[];
  pinned: boolean;
  updatedAt: string; // 服务端维护，客户端只读
}

// PATCH /api/notes/:id 的请求体：只传改动的字段
type NotePatch = Partial<NoteMeta>;

async function patchNote(id: string, patch: NotePatch): Promise<void> {
  await fetch(`/api/notes/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(patch),
  });
}

patchNote('n1', { pinned: true });        // OK：只置顶
// patchNote('n1', { titel: 'x' });       // 报错：拼错字段名立刻被抓

type NoteDraft = Partial<NoteMeta>;                       // 半成品
type NoteSubmission = Required<Omit<NoteMeta, 'updatedAt'>>; // 提交时除服务端字段外全必填

function saveDraft(draft: NoteDraft) { /* 存 localStorage，见 javascript/460-StorageForTheWeb */ }
function submitNote(sub: NoteSubmission) { /* 每个字段都能直接用 */ }

function renderNoteList(notes: ReadonlyArray<Readonly<NoteMeta>>): void {
  // notes[0].pinned = true; // 报错：只读属性
  for (const n of notes) console.log(n.title);
}

// 使用 Pick 选取部分属性
type UserBasic = Pick<User, "name" | "age">

// 使用 Omit 排除部分属性
type UserWithoutAge = Omit<User, "age">

interface Article {
  id: string;
  title: string;
  summary: string;
  content: string;      // 全文，可能几十 KB
  likes: number;
  publishedAt: string;
}

// 列表接口返回：不要全文
type ArticleListItem = Omit<Article, 'content'>;
// 卡片组件只吃三样，组件签名越窄，可复用性越强
function ArticleCard(props: Pick<ArticleListItem, 'title' | 'summary' | 'likes'>) { /* ... */ }

interface Article {
  id: string;            // 服务端生成
  publishedAt: string;   // 服务端生成
  title: string;
  content: string;
}

type NewArticle = Omit<Article, 'id' | 'publishedAt'>;

async function createArticle(input: NewArticle): Promise<Article> {
  const res = await fetch('/api/articles', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(input),
  });
  return res.json();
}

interface ThemeTokens {
  primary: string;
  background: string;
  radius: string;
}

type OverrideTheme = Omit<ThemeTokens, 'radius'> & { radius: '4px' };
// { primary: string; background: string; radius: '4px' }

// 使用 Record 创建键值对类型
type UserMap = Record<string, User>

type AppEvents = {
  'theme:change': { from: string; to: string };
  'note:pin': { noteId: string };
  'page:view': { path: string };
};

type EventPayload<K extends keyof AppEvents> = AppEvents[K];

function track<K extends keyof AppEvents>(name: K, payload: EventPayload<K>): void {
  navigator.sendBeacon('/track', JSON.stringify({ name, payload }));
}

track('note:pin', { noteId: 'n1' });        // OK
track('theme:change', { from: 'light', to: 'dark' }); // OK
// track('note:pin', { path: '/' });        // 报错：载荷形状不对
// track('notre:pin', {});                  // 报错：事件名拼错

type RouteName = 'home' | 'docs' | 'search';

const ROUTES: Record<RouteName, { path: string; title: string }> = {
  home: { path: '/', title: '首页' },
  docs: { path: '/docs', title: '文档' },
  search: { path: '/search', title: '搜索' },
  // 少写一个键、多写一个键、拼错键，都会在这里报错
};

type NotesByTag = Record<string, Article[]>;

function groupByTag(articles: Article[]): NotesByTag {
  const out: NotesByTag = {};
  for (const a of articles) {
    for (const tag of tagsOf(a)) {
      (out[tag] ??= []).push(a);
    }
  }
  return out;
}

declare function tagsOf(a: Article): string[];

type Status = 'idle' | 'loading' | 'success' | 'error';

// Exclude：从联合里"减去"可赋给 U 的成员
type LoadingStates = Exclude<Status, 'success' | 'error'>; // 'idle' | 'loading'

// Extract：只"留下"可赋给 U 的成员
type DoneStates = Extract<Status, 'success' | 'error'>;    // 'success' | 'error'

// NonNullable：减去 null 与 undefined（常用于收窄查询结果）
type MaybeTitle = string | null | undefined;
type Title = NonNullable<MaybeTitle>; // string

// 场景一：状态机里挑"可取消"的状态做守卫
type Cancelable = Extract<Status, 'loading'>;
function cancel(when: Cancelable) { /* 只在加载中可取消 */ }

// 场景二：从 DOM 查询的宽类型里去掉空值
const el = document.querySelector('#app');        // Element | null
type SureEl = NonNullable<typeof el>;             // Element

// 场景三：事件名白名单。埋点只接受业务事件，排除系统保留事件
type AllEvents = 'sys:boot' | 'sys:error' | 'note:pin' | 'page:view';
type Trackable = Exclude<AllEvents, `sys:${string}`>; // 'note:pin' | 'page:view'

function createNote(title: string, tags: string[] = []): { id: string; title: string } {
  return { id: crypto.randomUUID(), title };
}

type CreateNoteArgs = Parameters<typeof createNote>;
// [title: string, tags?: string[]]   —— 参数元组，带可选标记
type CreateNoteReturn = ReturnType<typeof createNote>;
// { id: string; title: string }

// 场景一：包装函数不想重新声明一遍参数（转发参数签名）
function withTiming<F extends (...args: any[]) => any>(fn: F): F {
  return ((...args: Parameters<F>) => {
    console.time(fn.name);
    const out = fn(...args);
    console.timeEnd(fn.name);
    return out;
  }) as F;
}

// 场景二：类的构造参数与实例类型
interface NoteCtor { new (title: string, tags?: string[]): Note }
type CtorArgs = ConstructorParameters<NoteCtor>; // [title: string, tags?: string[]]
type NoteInstance = InstanceType<NoteCtor>;      // Note

// 场景三：从第三方库函数反推数据形状，不用翻文档
declare function parseFrontmatter(raw: string): { title: string; tags: string[] };
type Frontmatter = ReturnType<typeof parseFrontmatter>;

// 场景四：适配层只挑自己关心的参数
type ListArgs = Parameters<typeof fetchList>;
// fetchList(page: number, size: number, signal?: AbortSignal)
type PagedArgs = Pick<ListArgs, '0' | '1'>; // 元组也是对象，键是下标

function assertThis(this: { ready: boolean }, msg: string): void {
  if (!this.ready) throw new Error(msg);
}

type ThisOf = ThisParameterType<typeof assertThis>; // { ready: boolean }

// 去掉 this 参数后，函数可以被"裸调"（比如存进事件总线）
type PlainFn = OmitThisParameter<typeof assertThis>; // (msg: string) => void

// Awaited：递归解开 Promise，拿到 await 到底之后的类型
async function loadNote(): Promise<NoteMeta> { return fetch('/api/notes/1').then(r => r.json()); }
type Loaded = Awaited<ReturnType<typeof loadNote>>; // NoteMeta

// 对 Promise<Promise<T>> 也会一路解开
type Nested = Awaited<Promise<Promise<string>>>; // string

// NoInfer：该位置只校验、不参与推断（TS 5.4）
function firstOf<V>(pool: V[], sample: NoInfer<V>): V {
  return pool[0];
}
const a = firstOf([1, 2, 3], 2);   // OK：V 由数组推断为 number
// const b = firstOf(['x'], 2);    // 报错：2 不是 string

type Event = 'click' | 'focus';

// 事件名 -> 处理器名：onClick / onFocus
type HandlerName = `on${Capitalize<Event>}`; // 'onClick' | 'onFocus'

// 常量到枚举展示名
type Label = Uppercase<'ready'>; // 'READY'

// ---- 基础形状 ----
interface NoteMeta {
  title: string;
  tags: string[];
  pinned: boolean;
  updatedAt: string;
}

// ---- 变体派生（全部一行，零重复） ----
type NoteDraft     = Partial<Omit<NoteMeta, 'updatedAt'>>;   // 草稿：可缺字段
type NoteSubmission = Required<Omit<NoteMeta, 'updatedAt'>>; // 提交：全必填
type NoteListItem  = Pick<NoteMeta, 'title' | 'pinned'>;     // 列表：白名单
type NotePatch     = Partial<NoteMeta>;                       // 编辑：只传改动
type NoteStore     = Record<string, NoteMeta>;                // 仓库：id 到笔记

// ---- 事件表挂上去 ----
type NoteEvents = {
  'note:save': NoteSubmission;
  'note:patch': { id: string; patch: NotePatch };
};

type EventMap = Record<keyof NoteEvents, unknown>;

// 练习 1 的自检目标（ Compact<{ a: string; b?: number }> 应是什么？）
// 练习 3 的自检目标（ PayloadOf<NoteEvents, 'note:save'> 应是 NoteSubmission ）