Consume `index.d.ts` declaration file in source code

Question

I would like to reuse the type definitions within index.d.ts when porting plain .js files to .ts in my project. However I get Cannot find name 'Type'.

I feel like this is some configuration issue I'm banging my head against. Any help, much appreciated - thanks.

The folder structure looks like this

<root>
  - /javascript (all js files)
  index.d.ts    (declarations)

This is my current tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es2017",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [ "es2017" ],                      /* Specify library files to be included in the compilation. */
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "removeComments": true,                /* Do not emit comments to output. */
    "noEmit": true,                           /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
    "skipLibCheck": true,                     /* Skip type checking of all declaration files (*.d.ts). */

    /* Additional Checks */
    "forceConsistentCasingInFileNames": true,
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "baseUrl": "./javascript",                /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "resolveJsonModule": true,
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

Answer 1

In a JavaScript project you have to maintain you index.d.ts by yourself, but once the project is converted in TypeScript (and declaration option is uncommented in your tsconfig.json) index.d.ts is produced by tsc. It doesn't sound as a great idea to have a TypeScript project with a self maintained index.d.ts.

Probably you simply need to convert your project and maintain the same exported interfaces.

To achieve this you just need to use the same declarations you have now in your index.d.ts in your converted TypeScript files too (cut&paste declarations and enrich them with the definitions).

Let's take in exam a simple JavaScript package:

function charcatersCount(str) {
  return str.length;
}

module.exports = { charactersCount };

the hand maintained index.d.ts file will look like:

export declare function charactersCount(str: string): number;

What I'm suggesting is to open a newly created index.ts file, cut&paste the declarations and change them from declarations to definitions

export function charactersCount(str: string): number {}

finally enrich them with the actual definition:

export function charactersCount(str: string): number {
  return str.length;
}

reapet this for each exported function/class/constant/variable.

Now running tsc with declaration option (--declaration from command line, or "declaration": true, in tsconfig.json file) will produce a index.js file (the compiled version) and a index.d.ts file (the declaration file) more or less identical to the source one.

From now on you'll no longer need to maintain your index.d.ts file by hands: every time you change your package tsc will produce it.

While about the specific error Cannot find name 'Type', I need to see the code producing it.

Hope this helps.

Answer 2

It looks like you have a collision in your module resolution.

If you have a file called index.ts, then index.d.ts won't be automatically imported.

TypeScript will automatically import .d.ts files, UNLESS their name collides with other files, where the rules for what files will collide are somewhat described here: https://www.typescriptlang.org/docs/handbook/module-resolution.html .

So import { b } from "moduleB" in source file /root/src/moduleA.ts would result in the following lookups:

/root/src/node_modules/moduleB.ts
/root/src/node_modules/moduleB.tsx
/root/src/node_modules/moduleB.d.ts
/root/src/node_modules/moduleB/package.json (if it specifies a "types" property)
/root/src/node_modules/@types/moduleB.d.ts
/root/src/node_modules/moduleB/index.ts
/root/src/node_modules/moduleB/index.tsx
/root/src/node_modules/moduleB/index.d.ts```

The solution is to rename your index.d.ts file to something else, I recommend the name of your project (as long as there isn't also a .ts file that will collide with that name!).