Skip to content

TypeScript 支持

robuild 提供完整的 TypeScript 支持,包括类型检查、声明文件生成和类型安全。

内置支持

robuild 原生支持 TypeScript,无需额外配置:

bash
# 直接构建 TypeScript 文件
robuild ./src/index.ts

类型声明生成

自动生成

robuild 会自动生成 TypeScript 声明文件:

typescript
// 源码: src/index.ts
export function greet(name: string): string {
  return `Hello, ${name}!`
}

export interface User {
  id: number
  name: string
}
typescript
// 生成的声明文件: dist/index.d.mts
export declare function greet(name: string): string;
export interface User {
  id: number;
  name: string;
}

配置选项

typescript
import { defineConfig } from 'robuild'

export default defineConfig({
  entries: [
    {
      type: 'bundle',
      input: './src/index.ts',
      dts: {
        compilerOptions: {
          declaration: true,
          emitDeclarationOnly: false,
          stripInternal: true,
        },
        include: ['src/**/*'],
        exclude: ['src/**/*.test.ts'],
      },
    },
  ],
})

TypeScript 配置

tsconfig.json 集成

robuild 会自动读取 tsconfig.json 配置:

json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

编译器选项

typescript
{
  type: 'bundle',
  input: './src/index.ts',
  dts: {
    compilerOptions: {
      target: 'ES2020',
      module: 'ESNext',
      moduleResolution: 'bundler',
      declaration: true,
      stripInternal: true,
      removeComments: false,
    },
  },
}

类型安全

完整的类型定义

robuild 提供完整的 TypeScript 类型定义:

typescript
import type {
  BuildConfig,
  BuildEntry,
  BundleEntry,
  TransformEntry,
  BuildContext,
  BuildHooks,
} from 'robuild'

// 类型安全的配置
const config: BuildConfig = {
  entries: [
    {
      type: 'bundle',
      input: './src/index.ts',
    } as BundleEntry,
  ],
}

智能提示

IDE 会提供完整的智能提示:

typescript
import { defineConfig } from 'robuild'

export default defineConfig({
  entries: [
    {
      type: 'bundle',
      input: './src/index.ts',
      // IDE 会提示所有可用选项
      minify: true,
      dts: true,
      rolldown: {
        // rolldown 配置提示
      },
    },
  ],
})

高级特性

类型推断

robuild 会根据源码自动推断类型:

typescript
// 源码: src/utils.ts
export const VERSION = '1.0.0'
export const DEFAULT_CONFIG = {
  timeout: 5000,
  retries: 3,
} as const

export function createConfig(options: Partial<typeof DEFAULT_CONFIG>) {
  return { ...DEFAULT_CONFIG, ...options }
}
typescript
// 生成的声明文件
export declare const VERSION: "1.0.0";
export declare const DEFAULT_CONFIG: {
  readonly timeout: 5000;
  readonly retries: 3;
};
export declare function createConfig(options: Partial<typeof DEFAULT_CONFIG>): typeof DEFAULT_CONFIG;

泛型支持

完全支持 TypeScript 泛型:

typescript
// 源码: src/generics.ts
export interface Result<T> {
  data: T
  success: boolean
  message?: string
}

export function createResult<T>(data: T, success: boolean, message?: string): Result<T> {
  return { data, success, message }
}

export class ApiClient<T> {
  constructor(private baseUrl: string) {}

  async get(id: string): Promise<Result<T>> {
    // 实现
  }
}

条件类型

支持复杂的条件类型:

typescript
// 源码: src/conditional.ts
export type NonNullable<T> = T extends null | undefined ? never : T

export type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
}

export type EventMap = {
  click: MouseEvent
  keydown: KeyboardEvent
  submit: SubmitEvent
}

export type EventHandler<T extends keyof EventMap> = (event: EventMap[T]) => void

最佳实践

1. 类型导出

typescript
// src/index.ts
export type { User, Config } from './types'
export { createUser, validateConfig } from './utils'

// 确保类型和实现一起导出
export interface ApiResponse<T> {
  data: T
  status: number
}

2. 类型声明文件

typescript
// src/types.d.ts
declare module '*.json' {
  const value: any
  export default value
}

declare module '*.svg' {
  const content: string
  export default content
}

3. 类型守卫

typescript
// src/guards.ts
export function isUser(obj: any): obj is User {
  return obj && typeof obj.id === 'number' && typeof obj.name === 'string'
}

export function isConfig(obj: any): obj is Config {
  return obj && typeof obj.timeout === 'number'
}

4. 类型工具

typescript
// src/utils.ts
export type RequiredFields<T, K extends keyof T> = T & Required<Pick<T, K>>

export type OptionalFields<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>

export type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P]
}

故障排除

1. 类型错误

如果遇到类型错误:

bash
# 检查 TypeScript 配置
npx tsc --noEmit

# 使用 robuild 的类型检查
pnpm test:types

2. 声明文件问题

如果声明文件生成有问题:

typescript
// 确保配置正确
{
  type: 'bundle',
  input: './src/index.ts',
  dts: {
    compilerOptions: {
      declaration: true,
      emitDeclarationOnly: false,
    },
  },
}

3. 类型导入问题

如果类型导入有问题:

typescript
// 使用 type 导入
import type { User } from './types'

// 或者使用 import type
import { type User } from './types'

下一步

Released under the MIT License.