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

Question

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

can you give an example of how you're trying to use this? Are you saying that you're trying to use your const t in a different file as though it's a global or in the same file where it's declared? — bryan60
– bryan60, Commented Apr 25, 2020 at 21:41
Yes, as stated in the question my goal is to declare and use it as a global in my whole project. — Telokis
– Telokis, Commented Apr 26, 2020 at 11:30

bryan60 · Accepted Answer · 2020-04-26 15:46:47Z

3

+50

importing into declaration files and making them globally available is a little weird, looks like this:

declare const t: import("embed-i18n-webpack-plugin").TranslationFunction;

That should be all you need to do to. Typescript won't register a declaration as global if it has traditional imports in it, so you need to use this import style. this does require typescript version >= 2.9

docs on it: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#import-types

edited Apr 26, 2020 at 15:46

answered Apr 25, 2020 at 21:51

bryan60

29.4k5 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Telokis Over a year ago

Thanks for your answer but this doesn't solve the issue. t is still reported as not found by TypeScript. Using export in declaration files is not very relevant if I'm not declaring a module or adding type for a js file.

bryan60 Over a year ago

It could be relevant depending on how you’re trying to use this... are you just trying to avoid writing import statements? An example of how you’re attempting to use this global would be helpful.

Telokis Over a year ago

I use this global variable by doing t(arg1, arg2). import does not make sense because the function is a meta function which is totally removed by webpack when compiling the source files.

bryan60 Over a year ago

oookk I was unclear on what you were after but i took a look at the repo and I get it now... updated answer...

Telokis Over a year ago

Ok it's the first time I see this style of import inside a declaration file! It works fine, I accepted your answer but could you edit your answer to add a source to the documentation regarding this behavior, please? Thanks for solving my (strange) issue!

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related