Categories
Mastering Development

TypeScript not finding variable declared in type declaration if I import a file

I made a very simple library which contains a .d.ts (source) which has the following structure (I omit the details because the file works fine, it likely is a config issue in my project):

// Some helper types and interfaces

type TranslationFunction = /* ... */;

export { TranslationFunction };

Then, I do npm i -D embed-i18n-webpack-plugin to install the package into my own project and create a file typings/translation.d.ts to declare a global t variable of type TranslationFunction like follow:

import { TranslationFunction } from "embed-i18n-webpack-plugin";

declare const t: TranslationFunction;

Using VSCode, I can hover over t in this file and it tells me that it has the proper type as defined in my original index.d.ts. This means that when I’m in this file, it properly finds it.

In this same typings directory, I have some other files declaring constants but they never import anything and work as expected.

However, when I try to use the global t function inside my code, I get an error stating

Cannot find name 't'. ts(2304)

BUT if I simply comment the import inside my typings/translation.d.ts:

// import { TranslationFunction } from "embed-i18n-webpack-plugin";

declare const t: TranslationFunction;

It works fine but since it doesn’t know TranslationFunction, it collapses into any.

Maybe the type declaration file of my package is wrong and should contain some declare module? I’m not really 100% sure of the behavior when it comes to publishing type declarations on npm, I usually use them in plain TS so it works fine. It’s the first time I use one inside another type declaration file.

In case it might be relevant, here is my tsconfig.json:

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "jsx": "preserve",
        "lib": ["dom", "es2017"],
        "module": "esnext",
        "moduleResolution": "node",
        "noEmit": true,
        "noUnusedLocals": true,
        "noUnusedParameters": false,
        "noImplicitAny": false,
        "preserveConstEnums": true,
        "removeComments": false,
        "strictFunctionTypes": false,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "experimentalDecorators": true,
        "target": "esnext",
        "extendedDiagnostics": true,
        "paths": {
            "$common/*": ["../Common/*"],
            "$config": ["./config"],
            "$game/*": ["./src/game/*"],
            "$containers/*": ["./src/containers/*"],
            "$phaser/*": ["./src/phaser/*"],
            "$network/*": ["./src/network/*"],
            "$pages/*": ["./src/pages/*"],
            "$components/*": ["./src/components/*"],
            "$helpers/*": ["./src/helpers/*"],
            "$rematch/*": ["./src/rematch/*"],
            "$hooks/*": ["./src/hooks/*"],
            "$types/*": ["./src/types/*"],
            "$src/*": ["./src/*"]
        },
        "rootDir": ".",
        "baseUrl": "."
    },
    "exclude": ["**/node_modules/*", "build", "coverage"]
}

Finally, I have tried some things to see if that would solve my issue:

  • Copying the content of my package’s type declaration inside my typings/translate.d.ts –> Works fine
  • Adding some random declare module "ember-i18n-webpack-plugin –> Same error

Leave a Reply

Your email address will not be published. Required fields are marked *