1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// 命名导出（推荐）
export const VERSION = "1.0";
export function createUser() {}
export class Service {}

// 类型导出
export interface User { id: number }
export type ID = string;
export type { User as UserShape };            // 重命名后导出

// 默认导出（每个模块最多一个）
export default class Client {}

// 再导出
export { readFile } from "node:fs/promises";
export * from "./utils";
export * as utils from "./utils";             // 命名空间再导出

// 类型再导出（isolatedModules 下必须写 type）
export type { User } from "./types";

1
2
3

// 🛑 转译器无法判断 User 是不是类型，只能保守地保留这行导入
import { User } from "./types";
export type A = User;

1
2
3
4
5
6
7
8

import { User } from "./types";
export type A = User;
// ❌ TS1484: 'User' is a type and must be imported using a type-only import
//    when 'verbatimModuleSyntax' is enabled.

// ✅ 正确写法
import type { User } from "./types";
export type A = User;

1
2
3
4
5
6

export { User } from "./types";
// ❌ TS1205: Re-exporting a type when 'isolatedModules' is enabled requires
//    using 'export type'.

// ✅
export type { User } from "./types";

1
2
3
4

// 只有类型声明的文件，想成为「模块」必须显式标记
export {};                      // 或 import type {} from "..."

interface Local { a: number }   // 没有 export 时，这是全局声明！⚠️

1
2
3

// CJS 模块（module.exports = fn）
import express from "express";        // ✅ 默认导入，靠 interop
import { Router } from "express";     // ✅ 命名导入（TS 会分析 CJS 导出的属性）

1
2
3
4
5
6
7

// CJS 风格声明
declare function foo(): void;
export = foo;

// 消费方
import foo = require("./cjs");   // ✅ 需在 CJS 模块（module: commonjs/node16 CJS）下
foo();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 一个典型的 CJS 库声明
declare namespace MyLib {
  interface Options { debug?: boolean }
  function init(o?: Options): void;
}
export = MyLib;

// 消费
import MyLib from "my-lib";              // ✅ 靠 esModuleInterop
import { init } from "my-lib";           // ✅ 命名导入也行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// 🗑️ 旧写法（6.0 报 TS5101）
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": { "@/*": ["*"] }
  }
}

// ✅ 6.0 写法：把前缀折叠进每条 paths
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"]
    }
  }
}

1
2
3
4
5
6
7
8
9

{
  "compilerOptions": {
    // 6.0 默认 []，不再自动加载全部 @types！
    "types": ["node", "vitest/globals"],

    // 自定义类型根目录（很少需要改）
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

1
2

/* styles.module.css */
.title { font-size: 14px; }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// ✅ 在 globals.d.ts 里声明（必须是「不含顶层 import/export 的脚本文件」）
declare module "*.css" {
  const classes: Readonly<Record<string, string>>;
  export default classes;
}

declare module "*.svg" {
  const url: string;
  export default url;
}

declare module "*.png" {
  const url: string;
  export default url;
}

declare module "*.json" {
  const value: unknown;
  export default value;
}

1
2
3
4
5
6

// globals2.ts —— 含顶层 import，所以这是「模块」不是「脚本」
import something from "./x";

declare module "*.foo" { const v: number; export default v; }
// ❌ TS2664: Invalid module name in augmentation, module '*.foo' cannot be found.
//    在模块文件里，declare module 被当作「模块扩充」，要求目标模块已存在。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// 给 express 的 Request 加自定义属性
import "express";

declare module "express" {
  interface Request {
    user?: { id: string; roles: string[] };
  }
}

// 给 vue 的组件实例加属性
import "vue";

declare module "vue" {
  interface ComponentCustomProperties {
    $format: (d: Date) => string;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

export {};                        // 让本文件成为模块

declare global {
  interface Window {
    __APP_CONFIG__: { apiBase: string };
  }

  // 给 process.env 加类型
  namespace NodeJS {
    interface ProcessEnv {
      NODE_ENV: "development" | "production" | "test";
      API_BASE: string;
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// interface 合并
interface Box { a: number }
interface Box { b: string }
// 结果：{ a: number; b: string } ✅

// type 不能合并
type Box2 = { a: number };
type Box2 = { b: string };   // ❌ TS2300: Duplicate identifier 'Box2'.

// namespace + function（jQuery 风格）
declare function $(sel: string): void;
declare namespace $ {
  const version: string;
}
$.("div");        // ✅ 函数可调用
$.version;        // ✅ 也有属性

// namespace + class
class Album { constructor(public name: string) {} }
namespace Album {
  export const DEFAULT = "untitled";
}
Album.DEFAULT;    // ✅ 静态成员