TypeScript 三斜线指令的实现(reference的现代替代方案)

// src/index.ts
/// <reference path="./types/user.d.ts" />
/// <reference path="./utils/helpers.d.ts" />

const user: User = { id: 1, name: "张三" }; // 依赖 user.d.ts 中的 User 类型

// src/types/user.d.ts（模块化声明）
export interface User {
  id: number;
  name: string;
}

// src/index.ts（导入类型）
import type { User } from './types/user.d.ts';

const user: User = { id: 1, name: "张三" };

// tsconfig.json
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  },
  "include": ["./src/**/*"] // 包含所有 .ts/.d.ts 文件
}

// src/types/global.d.ts（全局类型声明）
interface GlobalConfig {
  apiBaseUrl: string;
}

// src/index.ts（直接使用）
const config: GlobalConfig = { apiBaseUrl: "/api" };

/// <reference lib="ES2020" />
/// <reference lib="DOM" />

// 使用 ES2020 特性 + DOM API
const promise = Promise.resolve(1);
const div = document.createElement("div");

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["ES2020", "DOM", "WebWorker"] // 全局配置需要的内置库
  }
}

/// <reference types="node" />
/// <reference types="react" />

// 使用 Node.js 模块 + React 类型
import fs from 'fs';
import React from 'react';

// 直接使用，无需三斜线指令
import fs from 'fs';
import React from 'react';

fs.readFile('./file.txt', (err, data) => {});
const element: React.ReactElement = <div>Hello</div>;

// src/types/non-typed-lib.d.ts
declare module 'non-typed-lib' {
  export function doSomething(): void;
}

// src/index.ts
import { doSomething } from 'non-typed-lib'; // 自动识别类型

/// <reference amd-module="my-module" />
export function foo() {}

// webpack.config.js
module.exports = {
  output: {
    library: 'my-module',
    libraryTarget: 'amd'
  }
};

// src/types/express.d.ts（扩展 express 类型）
/// <reference types="express" />

declare namespace Express {
  interface Request {
    user?: { id: number }; // 扩展 Request 类型
  }
}

// 非模块化项目，需手动引用
/// <reference path="./utils.ts" />
/// <reference path="./constants.ts" />

console.log(VERSION); // 来自 constants.ts

# 搜索项目中的三斜线指令
grep -r "/// <reference" src/ --include="*.ts" --include="*.d.ts"

# 编译项目，检查类型错误
tsc --noEmit

// src/index.ts
/// <reference lib="ES2020" />
/// <reference lib="DOM" />
/// <reference path="./types/user.d.ts" />
/// <reference types="node" />

const user: User = { id: 1, name: "张三" };
const buffer = Buffer.from("hello");

// tsconfig.json
{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"],
    "module": "ESNext",
    "target": "ES2020"
  },
  "include": ["./src/**/*"]
}

// src/index.ts
import type { User } from './types/user.d.ts';
import { Buffer } from 'node:buffer';

const user: User = { id: 1, name: "张三" };
const buffer = Buffer.from("hello");