What is the d ts file in typescript

5个答案

.dts files, also known as TypeScript declaration files, are files that provide type information for various values in TypeScript code. These files are typically used in two main scenarios:

Interoperability with JavaScript Libraries: When TypeScript code needs to work with pure JavaScript libraries, .dts files can provide type definitions for functions, objects, and classes within the JavaScript library. This allows the TypeScript compiler to understand the structure of the JavaScript library and ensures that TypeScript code uses these libraries in a type-safe manner.
Module Declaration: In a TypeScript project, if a module does not want to expose its source code but needs other TypeScript code to understand the type information of its public interface, .dts files can be used to declare these public interfaces.

A simple example is considering a simple JavaScript library math-lib.js that provides an addition function:

javascript
// math-lib.js
function add(a, b) {
  return a + b;
}
module.exports = { add };

To use this library in TypeScript and benefit from type checking, we need a declaration file math-lib.d.ts, as shown below:

typescript
// math-lib.d.ts
export function add(a: number, b: number): number;

With this declaration file, TypeScript code can safely import and use the add function, and if non-numeric parameters are passed, the TypeScript compiler will generate an error.

Using declaration files enables TypeScript projects to safely utilize external JavaScript code libraries while also helping developers better understand the type structure of external code.

2024年6月29日 12:07 回复

The .dts files in TypeScript are shorthand for definition files (Definition Files). They provide type definitions for existing JavaScript code, enabling you to use libraries or frameworks written in pure JavaScript within a TypeScript project. The .dts files inform the TypeScript compiler about the structure of these libraries, including their types, functions, classes, and other API signatures.

The benefit of .dts files is that they allow developers to leverage TypeScript's type checking and code completion features without modifying the original JavaScript code.

For example, when using jQuery in a TypeScript project, you can include jQuery's definition files (typically via the DefinitelyTyped community's @types/jquery package), enabling the TypeScript compiler to understand jQuery's $ function, jQuery object methods, and other features. The code example is shown below:

typescript
// Reference jQuery's type definitions
/// <reference types="jquery" />

// Use jQuery
$('selector').html('Hello, world!');

In this example, the line $('selector').html('Hello, world!'); passes the TypeScript compiler's type checking because the .dts files provide type information for the .html() method.

Definition files also help developers understand how to use third-party libraries, as they serve as documentation for the libraries. By examining the definition files, developers can learn what parameters a function accepts, the types of those parameters, and the return type of the function. This significantly improves development efficiency and code safety.

Finally, .dts files can be used to define the public interface of your own code, particularly when building libraries, so that other TypeScript users who consume your library can benefit from type checking and code intelligence.

2024年6月29日 12:07 回复

Working Example for a Specific Case:

Assume you have a module named my-module published on npm.

You install it with npm install my-module.

You use it as follows:

typescript
import * as lol from 'my-module';

const a = lol('abc', 'def');

The logic of this module is entirely contained in index.js:

javascript
module.exports = function(firstString, secondString) {

  // your code

  return result
}

To add type definitions, create a file named index.d.ts:

typescript
declare module 'my-module' {
  export default function anyName(arg1: string, arg2: string): MyResponse;
}

interface MyResponse {
  something: number;
  anything: number;
}

2024年6月29日 12:07 回复

I learned the following from my struggles with mapping JavaScript projects using .d.ts files.

Using .d.ts files to define types for JavaScript requires that your .d.ts file has the same name as your .js file. Each file must be stored in the same directory as its corresponding .js file. The .d.ts file provides type definitions for JavaScript/TypeScript code, linking the .d.ts file to the .js file.

For example, test.js and test.d.ts are located in the testdir/ folder, and then imported into a React component as:

typescript
import * as Test from "./testdir/test";

The .d.ts file is exported as a namespace, as shown below:

typescript
export as namespace Test;
export interface TestInterface1 {}
export class TestClass1 {}

2024年6月29日 12:07 回复

The 'd' in dts stands for declaration files: Declaration Files

When compiling TypeScript scripts, you can generate a declaration file (with the extension .d.ts) that serves as the interface for components in compiled JavaScript. During this process, the compiler strips out all function and method bodies, retaining only the signatures of exported types. When third-party developers use JavaScript libraries or modules in TypeScript, the generated declaration files describe the virtual TypeScript types exported.

The concept of declaration files is similar to that of header files in C/C++.

typescript
declare module arithmetics {
    add(left: number, right: number): number;
    subtract(left: number, right: number): number;
    multiply(left: number, right: number): number;
    divide(left: number, right: number): number;
}

Manual declaration files for existing JavaScript libraries can be written, as done for jQuery and Node.js.

A large number of declaration files for popular JavaScript libraries are hosted on GitHub at DefinitelyTyped and Typings Registry. A command-line utility named Typings is provided to help search for and install declaration files from repositories.

2024年6月29日 12:07 回复

What is the d ts file in typescript

5个答案

你的答案