Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript Declaration Files for Local JS Files

I am trying add typings for our Javascript files at work while we are in the process of converting to Typescript. However, I can not get the declaration files to be recognized.

Here is my file structure

  • js
    • Foo.js
  • typings
    • Foo
      • index.d.ts
  • index.ts
  • package.json
  • tsconfig.json

Foo.js

module.exports = function Foo() {
   return 'Bar';
 };

index.d.ts

export = Foo;

declare function Foo(): string;

index.ts

import Foo = require('./js/Foo')

console.log(Foo());

tsconfig.json

{
  "compilerOptions": {
    "typeRoots": ["./typings"],
    "target": "es5",
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "*": ["typings/*"]
    }
  }
}

package.json

{
  "name": "fail",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "tsc": "tsc"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "typescript": "^3.1.4"
  }
}

Here is repo to reproduce my problem

https://github.com/erisman20/typings_help

Edit: Here is there error I get

error TS7016: Could not find a declaration file for module './js/Foo.js'. '....../js/Foo.js' implicitly has an 'any' type.

like image 716
erisman20 Avatar asked Oct 30 '18 23:10

erisman20


People also ask

Can I use TypeScript for JS files?

You can use thousands of existing JavaScript libraries in your TypeScript project. Type definition files allow you to enjoy the type-checking and autocomplete features in libraries that were written in JavaScript. These files make you more productive in writing code.

What are TypeScript declaration files for?

TypeScript includes declaration files for all of the standardized built-in APIs available in JavaScript runtimes. This includes things like methods and properties of built-in types like string or function , top-level names like Math and Object , and their associated types.

Where do I put declaration files TypeScript?

Most of the libraries are bundled with a type declaration file of their own in their package distribution, which means once we install a package, we will get all type declaration files inside node_modules/<package-name>/lib . TypeScript uses this and does its magic.


1 Answers

The only ways to provide declarations for a relative import such as './js/Foo' are to actually have the declaration file at the import path (plus .d.ts or /index.d.ts) or to have it virtually at the import path based on your rootDirs option. Neither typeRoots nor baseUrl/paths comes into play in this scenario: baseUrl/paths only affects module resolution for "non-relative" paths, and typeRoots can be used to get TypeScript to load files but does not affect the relationship between import paths and files at all.

The simplest solution would be to put a Foo.d.ts file in the same directory as Foo.js. If you want to keep the typings in a separate directory, then you can add "rootDirs": ["js", "typings"] to tsconfig.json. That change is enough to make your example work for me, though I find it confusing to have corresponding Foo.js and Foo/index.d.ts files and would encourage you to be consistent in your use of subdirectories, i.e., either switch to Foo/index.js on the JavaScript side or switch to Foo.d.ts on the TypeScript side.

like image 57
Matt McCutchen Avatar answered Sep 28 '22 03:09

Matt McCutchen