With TypeScript 3.7,\nTypeScript added support for generating .d.ts files from JavaScript using JSDoc syntax.
\nThis set up means you can own the editor experience of TypeScript-powered editors without porting your project to TypeScript, or having to maintain .d.ts files in your codebase.\nTypeScript supports most JSDoc tags, you can find the reference here.
\nTo add creation of .d.ts files in your project, you will need to do up-to four steps:
\ntsconfig.json to configure TypeScriptYou can learn how to do this in our installation page.
\nThe TSConfig is a json5 file which configures both your compiler flags, and declare where to find files.\nIn this case, you will want a file like the following:
\n\njson{\n // Change this to match your project\n include: [\"src/**/*\"],\n\n compilerOptions: {\n // Tells TypeScript to read JS files, as\n // normally they are ignored as source files\n allowJs: true,\n // Generate d.ts files\n declaration: true,\n // This compiler run should\n // only output d.ts files\n emitDeclarationOnly: true,\n // Types should go into this directory.\n // Removing this would place the .d.ts files\n // next to the .js files\n outDir: \"dist\",\n },\n}
You can learn more about the options in the tsconfig reference.\nAn alternative to using a TSConfig file is the CLI, this is the same behavior as a CLI command.
\n\nshnpx typescript src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types
You can learn how to do this in our installation page.\nYou want to make sure these files are included in your package if you have the files in your project’s .gitignore.
TypeScript replicates the node resolution for modules in a package.json, with an additional step for finding .d.ts files.\nRoughly, the resolution will first check the optional \"types\" field, then the \"main\" field, and finally will try index.d.ts in the root.
| Package.json | \nLocation of default .d.ts | \n
|---|---|
| No “types” field | \nchecks “main”, then index.d.ts | \n
| “types”: “main.d.ts” | \nmain.d.ts | \n
| “types”: “./dist/main.js” | \n./main/main.d.ts | \n
If absent, then “main” is used
\n| Package.json | \nLocation of default .d.ts | \n
|---|---|
| No “main” field | \nindex.d.ts | \n
| “main”:“index.js” | \nindex.d.ts | \n
| “main”:“./dist/index.js” | \n./dist/index.d.ts | \n
If you’d like to write tests for your .d.ts files, try tsd.
","headings":[{"value":"Setting up your Project to emit .d.ts files","depth":2},{"value":"Adding TypeScript","depth":3},{"value":"TSConfig","depth":3},{"value":"Run the compiler","depth":2},{"value":"Editing the package.json","depth":2},{"value":"Tips","depth":2}],"frontmatter":{"permalink":"/docs/handbook/declaration-files/dts-from-js.html","title":"Creating .d.ts Files from .js files","disable_toc":null,"oneline":"How to add d.ts generation to JavaScript projects"}},"prev":{"childMarkdownRemark":{"frontmatter":{"title":"JSDoc Reference","oneline":"What JSDoc does TypeScript-powered JavaScript support?","permalink":"/docs/handbook/jsdoc-supported-types.html"}}},"next":null},"pageContext":{"id":"creating-.d.ts-files-from-.js-files","slug":"/docs/handbook/declaration-files/dts-from-js.html","repoPath":"/packages/documentation/copy/en/javascript/Creating DTS files From JS.md","previousID":"d848604c-bb7a-5209-9b14-87b5d859b2fc","lang":"en","modifiedTime":"2020-08-07T17:00:36.335Z"}}}