TypeScript命名空间 #

一、命名空间基础 #

1.1 什么是命名空间 #

命名空间是TypeScript中组织代码的一种方式，用于避免全局作用域污染。

typescript

namespace Utils {
    export function greet(name: string): string {
        return `Hello, ${name}!`;
    }
    
    export const version = '1.0.0';
}

console.log(Utils.greet('Alice'));
console.log(Utils.version);

1.2 命名空间vs模块 #

特性	命名空间	模块
作用域	全局	文件级
依赖管理	手动	自动
推荐	不推荐	推荐

二、命名空间语法 #

2.1 定义命名空间 #

typescript

namespace App {
    export interface User {
        name: string;
        age: number;
    }
    
    export function createUser(name: string, age: number): User {
        return { name, age };
    }
    
    export class UserService {
        private users: User[] = [];
        
        add(user: User): void {
            this.users.push(user);
        }
    }
}

2.2 嵌套命名空间 #

typescript

namespace App {
    export namespace Models {
        export interface User {
            name: string;
        }
    }
    
    export namespace Services {
        export class UserService {
            create(user: Models.User): void {
                console.log(user.name);
            }
        }
    }
}

const user: App.Models.User = { name: 'Alice' };
const service = new App.Services.UserService();

2.3 跨文件命名空间 #

typescript

namespace App {
    export interface User {
        name: string;
    }
}

namespace App {
    export function greet(user: User): string {
        return `Hello, ${user.name}!`;
    }
}

const user: App.User = { name: 'Alice' };
console.log(App.greet(user));

三、命名空间合并 #

3.1 同名命名空间合并 #

typescript

namespace App {
    export const version = '1.0.0';
}

namespace App {
    export const name = 'My App';
}

console.log(App.version);
console.log(App.name);

3.2 命名空间与类合并 #

typescript

class User {
    constructor(public name: string) {}
}

namespace User {
    export function create(name: string): User {
        return new User(name);
    }
}

const user = User.create('Alice');

3.3 命名空间与函数合并 #

typescript

function greet(name: string): string {
    return `Hello, ${name}!`;
}

namespace greet {
    export const defaultGreeting = 'Hello';
}

console.log(greet('Alice'));
console.log(greet.defaultGreeting);

3.4 命名空间与枚举合并 #

typescript

enum Status {
    Pending,
    Approved
}

namespace Status {
    export function isPending(status: Status): boolean {
        return status === Status.Pending;
    }
}

console.log(Status.isPending(Status.Pending));

四、导入命名空间 #

4.1 三斜线指令 #

typescript

/// <reference path="utils.ts" />

namespace App {
    export function init() {
        Utils.log('App initialized');
    }
}

4.2 import别名 #

typescript

namespace App.Models {
    export interface User {
        name: string;
    }
}

import Models = App.Models;

const user: Models.User = { name: 'Alice' };

4.3 动态导入 #

typescript

async function loadNamespace() {
    const module = await import('./utils');
    console.log(module.Utils.greet('Alice'));
}

五、命名空间应用 #

5.1 扩展第三方库 #

typescript

namespace Express {
    export interface Request {
        user?: {
            id: string;
            name: string;
        };
    }
}

import express from 'express';

const app = express();

app.use((req: Express.Request, res, next) => {
    req.user = { id: '1', name: 'Alice' };
    next();
});

5.2 类型声明 #

typescript

declare namespace NodeJS {
    interface ProcessEnv {
        NODE_ENV: 'development' | 'production';
        API_URL: string;
    }
}

console.log(process.env.NODE_ENV);
console.log(process.env.API_URL);

5.3 全局扩展 #

typescript

declare global {
    interface Window {
        myApp: {
            version: string;
        };
    }
}

window.myApp = { version: '1.0.0' };

六、命名空间最佳实践 #

6.1 优先使用模块 #

typescript

export interface User {
    name: string;
}

export function greet(user: User): string {
    return `Hello, ${user.name}!`;
}

6.2 命名空间用于类型声明 #

typescript

declare namespace MyLibrary {
    interface Options {
        debug: boolean;
    }
    
    function init(options: Options): void;
}

6.3 避免深层嵌套 #

typescript

namespace App.Models.Users {
    export interface User {}
}

namespace App {
    export namespace Users {
        export interface User {}
    }
}

七、总结 #

本章介绍了TypeScript命名空间：

命名空间特点 #

组织代码的方式
避免全局污染
支持合并
支持嵌套

与模块对比 #

命名空间：全局作用域，手动管理
模块：文件作用域，自动管理

最佳实践 #

优先使用模块
命名空间用于类型声明
避免深层嵌套