I am curious about .d.ts declaration files because I am new to the TypeScript programming language. I was told by someone that .d.ts files are are similar to .h header files in the C & C++ programming languages, however, the .d.ts files don't seem to work quite the same. Currently, I am failing to understand how to properly use the .d.ts files. It would appear that I cant add my .js or .ts files to the .d.ts files, so the only way my project will work is if it contains all three file types. That seems like a lot of files. To help me better understand how the .d.ts files are related to JavaScript & TypeScript, I have some questions I would like to ask.
这三个文件之间的关系是什么?他们之间的关系?
如何使用*.d。ts文件?这是否意味着我可以删除*。Ts文件永久?
如果是这样,*.d。ts文件知道哪个JS文件映射到自己?
如果有人能给我举个例子就太好了。
因为源代码是真相的最终来源。这里似乎是它的实现:
/*
* Every module resolution kind can has its specific understanding how to load module from a specific path on disk
* I.e. for path '/a/b/c':
* - Node loader will first to try to check if '/a/b/c' points to a file with some supported extension and if this fails
* it will try to load module from directory: directory '/a/b/c' should exist and it should have either 'package.json' with
* 'typings' entry or file 'index' with some supported extension
* - Classic loader will only try to interpret '/a/b/c' as file.
*/
type ResolutionKindSpecificLoader = (extensions: Extensions, candidate: string, onlyRecordFailures: boolean, state: ModuleResolutionState) => Resolved | undefined;
and
/**
* Kinds of file that we are currently looking for.
*/
const enum Extensions {
TypeScript = 1 << 0, // '.ts', '.tsx', '.mts', '.cts'
JavaScript = 1 << 1, // '.js', '.jsx', '.mjs', '.cjs'
Declaration = 1 << 2, // '.d.ts', etc.
Json = 1 << 3, // '.json'
ImplementationFiles = TypeScript | JavaScript,
}
完整的文件是https://github.com/microsoft/TypeScript/blob/main/src/compiler/moduleNameResolver.ts。
因为源代码是真相的最终来源。这里似乎是它的实现:
/*
* Every module resolution kind can has its specific understanding how to load module from a specific path on disk
* I.e. for path '/a/b/c':
* - Node loader will first to try to check if '/a/b/c' points to a file with some supported extension and if this fails
* it will try to load module from directory: directory '/a/b/c' should exist and it should have either 'package.json' with
* 'typings' entry or file 'index' with some supported extension
* - Classic loader will only try to interpret '/a/b/c' as file.
*/
type ResolutionKindSpecificLoader = (extensions: Extensions, candidate: string, onlyRecordFailures: boolean, state: ModuleResolutionState) => Resolved | undefined;
and
/**
* Kinds of file that we are currently looking for.
*/
const enum Extensions {
TypeScript = 1 << 0, // '.ts', '.tsx', '.mts', '.cts'
JavaScript = 1 << 1, // '.js', '.jsx', '.mjs', '.cjs'
Declaration = 1 << 2, // '.d.ts', etc.
Json = 1 << 3, // '.json'
ImplementationFiles = TypeScript | JavaScript,
}
完整的文件是https://github.com/microsoft/TypeScript/blob/main/src/compiler/moduleNameResolver.ts。
我从使用.d费力地映射JavaScript项目中学到了以下知识。ts文件。
使用。d。ts文件映射JavaScript需要你命名你的。d。Ts文件与你命名的.js文件相同。每个.js文件需要与.d. js文件保持内联(保持在同一个目录中)。Ts文件,具有相同的名称。指向需要.d中的类型的JS/TS代码。Ts文件到。d。ts文件。
例如:test.js和test.d.ts在testdir/文件夹中,然后你像这样在react组件中导入它:
import * as Test from "./testdir/test";
.d。Ts文件被导出为如下的命名空间:
export as namespace Test;
export interface TestInterface1{}
export class TestClass1{}
具体案例的工作示例:
假设你有my-module,你要通过npm共享它。
你用npm install my-module安装它
你可以这样使用它:
import * as lol from 'my-module';
const a = lol('abc', 'def');
模块的逻辑都在index.js中:
module.exports = function(firstString, secondString) {
// your code
return result
}
要添加类型,创建一个文件index.d.ts:
declare module 'my-module' {
export default function anyName(arg1: string, arg2: string): MyResponse;
}
interface MyResponse {
something: number;
anything: number;
}