Type declaration file (.d.ts)

Type declaration files (.dts) are special files in TypeScript that describe the types of JavaScript libraries or modules. They use the `.d.ts` extension and contain only type information, not implementation code. When using pure JavaScript libraries, `.d.ts` files provide type-checking support for TypeScript. Type declaration files have three sources: built-in type declarations, third-party type declarations, and custom type declarations. The syntax includes declarations for variables, functions, classes, interfaces, modules, etc. Type declarations are categorized into global declarations and module declarations, supporting type merging and augmentation. When dealing with untyped modules, you can quickly declare them as `any`. To extend third-party types, use module declarations to avoid global pollution. After creating a `.d.ts` file, verify its correctness. When publishing type declaration files, they can be bundled with the library code or released as a separate package. Best practices include keeping declarations synchronized, using precise types, providing documentation comments, and organizing related declarations. Tools like `dtsgen` can automatically generate type declaration files. TypeScript compiler options can be configured for type declaration-related settings.

Module resolution configuration

TypeScript's module resolution mechanism determines how the compiler locates imported modules, supporting two strategies: Classic and Node. The Node strategy mimics Node.js's resolution process and is the recommended choice for modern projects. Through `tsconfig.json`, you can configure options like `moduleResolution`, path mappings (`paths`), and the base directory (`baseUrl`). Path mappings allow creating module aliases, while `typeRoots` specifies the location of type definitions. In real-world projects, it's essential to configure these options properly to resolve module-not-found issues and ensure seamless integration with tools like Webpack and Jest. For performance optimization, avoid excessive path mappings, set `typeRoots` appropriately, and leverage project references, which are particularly important for large-scale projects. Properly configuring module resolution helps organize project structure effectively and boosts development efficiency.

Comparison between modules and namespaces

In TypeScript, modules and namespaces are two ways to organize code. Modules, based on the ES standard, manage dependencies via `import` and `export`, with each file being an independent module, making them suitable for large projects and modern frameworks. Namespaces, a TypeScript-specific feature, are defined using the `namespace` keyword and are primarily used to avoid global pollution and maintain legacy code. Modules have explicit scoping, support static analysis, and offer various import methods, while namespaces organize code within the global scope and can be split across files. Modern development recommends prioritizing modules due to their better tooling support and optimization capabilities. Namespaces are more suited for type definitions or simple script scenarios. The two can also be mixed, but large projects should maintain consistent styling. Modules are better for code splitting and performance optimization, whereas namespaces are simpler and more straightforward but lack support from modern build tools.

External module declaration

TypeScript's external module declarations provide type information support for libraries not written in TypeScript through `.dts` files. The module declaration syntax includes `declare module` and global extensions, allowing developers to create type definitions for JavaScript libraries and handle different module systems like CommonJS and AMD. The article demonstrates declaration examples ranging from simple functions to complex chart libraries, covering advanced techniques such as interfaces, classes, conditional types, and module redirection. It also explains how to extend the global scope, handle CSS resource files, and manage module versioning. Through type declarations, TypeScript enables type checking and intelligent code completion for JavaScript, significantly improving the development experience.

The triple-slash directive

Triple-slash directives are a special comment syntax in TypeScript that begins with `///` and are primarily used to declare dependencies between files and provide compilation metadata. Common directive types include referencing other declaration files, specifying module systems, and enabling or disabling compilation options. The `reference path` directive declares file dependencies, the `reference types` directive declares dependencies on types packages, and the AMD `module` directive specifies module names. Compilation option directives can configure file-level settings. While tripe-slash directives are often replaced by module imports in modern projects, they still play an important role in declaration files and special scenarios. When using them, attention must be paid to directive placement, path resolution, and interaction with module systems. Proper use can help organize code structure, but excessive use may impact performance. Most toolchains support tripe-slash directives, but developers should be aware of common issues such as ignored directives or path resolution failures.

The statement merging mechanism

TypeScript's declaration merging mechanism allows combining multiple declarations with the same name into a single definition, enhancing code flexibility. This mechanism applies to types such as interfaces, namespaces, classes, and enums. When merging interfaces, non-function members must have consistent types, while function members form overloads. Namespaces can merge with other namespaces, classes, functions, or enums of the same name to extend exported members. Classes can only merge with namespaces, and enum merging behaves similarly to interfaces. Declaration merging is commonly used to extend third-party module types, such as adding a `RouteMeta` property to `vue-router`. Priority rules include later-declared members taking precedence and later-exported namespaces overriding earlier ones. Merging classes with namespaces requires attention to declaration order. This mechanism is particularly useful in scenarios like extending React component props.

Module resolution strategy translates this sentence into English.

TypeScript module resolution strategies mainly include two approaches: Classic and Node. The Classic strategy is simple and straightforward but less flexible, primarily used for backward compatibility. The Node strategy emulates the Node.js mechanism and is the default strategy, divided into handling relative and non-relative paths. Relative paths directly look up the specified file, while non-relative paths recursively search from `node_modules`. TypeScript supports custom path mapping through `baseUrl` and `paths` configurations, which can practically resolve issues like circular dependencies and type declaration file resolution. Advanced techniques include using symbolic links, project references, and custom resolution. Performance optimization requires minimizing deep nesting and using path mappings judiciously. For troubleshooting common issues, the `traceResolution` flag can be used to inspect logs, verify configurations, and ensure correct file extensions.

Namespace definition and usage

In TypeScript, namespaces are a way to organize code and avoid naming conflicts. They are defined using the `namespace` keyword, and internal members must be `export`ed to be accessible externally. Namespaces can be nested, and members can be accessed using fully qualified names or by creating aliases with `import`. Unlike modules, namespaces operate in the global scope and declare dependencies via `reference` directives, while modules have their own scope and use `import`/`export`. Namespaces support merging and can extend third-party libraries. Although modules are more commonly used in modern development, namespaces still hold value for global library declarations and legacy code migration. When compiled, namespaces are transformed into IIFE patterns to create closures. Best practices recommend avoiding overuse, prioritizing modules, using reasonable naming, maintaining moderate nesting, and ensuring consistency. In large projects, namespaces can be used to organize complex type structures.

Type import and export

TypeScript's type import and export mechanisms allow developers to modularize type definitions and share them across files, supporting both named exports and default exports. It provides dedicated type import syntax to distinguish between type and value imports. Modules can re-export types from other modules, and dynamic type imports are available in TypeScript 4.5 and later. Namespaces can mix exports of types and values, while advanced features like generic types and conditional types can also be exported. When handling third-party library types, existing definitions can be extended. The `tsconfig.json` configuration affects type import and export behavior, and excessive type imports/exports may impact compilation performance. Different module systems handle type exports slightly differently, and build tools may require additional plugins for support. Testing environments might need type mocking, and tools like TypeDoc can generate documentation based on type exports. Code splitting requires consideration of type visibility, while monorepo projects can leverage project references. Interface declaration merging enables extending third-party types. Properly organizing type imports and exports optimizes performance in large-scale projects.

ES module syntax translates this sentence into English, output only plain text directly, do not output anything else.

ES module syntax is the standard way to organize and share code in JavaScript. TypeScript provides full support for modular development, making code easier to maintain and reuse while enhancing reliability through static type checking. Modules are independent files that interact via `export` and `import`, each with its own scope to avoid global pollution. They support named exports and default exports, allow renaming imports/exports, and enable bulk imports and dynamic imports. Types can be exported separately. TypeScript offers two module resolution strategies and supports path aliases to simplify import paths. Modules are more modern than namespaces, handle circular dependencies, and interoperate with CommonJS. `import.meta` provides module information, and modules can be compiled into different module systems. They support code splitting and type declarations, allow direct imports during testing, and enable `sideEffects` optimizations for bundling. Browsers natively support ES modules. Organize modules logically for performance, manage versions via npm, and consider security. Use tools to generate documentation, maintain consistent import order, and design modules with extensibility in mind.