How to use types defined outside of ./node_modules/@types ? | TypeScript Community | Page 1

craggy loom Mar 10, 2023, 8:10 PM

#

I Hey, i am not an expert when it comes to typescript and i am quite stuck for some hours now 😦 I am trying to use the types defined in a NPM package youtube-dl-exec which is under node_modules/youtube-dl-exec/src/index.d.ts but i simply do not know how to do so. The following is my configuration file:

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "module": "ES2020",
    "moduleResolution": "node",
    "rootDir": "./src",
    "outDir": "build",
    "lib": ["es2019", "es6", "dom"],
    "types": ["reflect-metadata"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": [
    "src/**/*.ts",
    "test/**/*.ts"
  ],
  "ts-node": {
    "esm": true,
    "files": true
  }
}

I have already tried to:

Add the relative path to the index.d.ts file of the package into includes
Add the package to types
Add the package to typeRoots

No matter what i do, my VS Code cant resolve the type and my code does not work. Is this even possible to just simply import that types outside of @types?
I would be very grateful for a hint into the right direction or could show me an example on importing an .d.ts from an arbitrary location.

Thanks!

#

How to use types defined outside of ./node_modules/@types ?

craggy loom Mar 10, 2023, 11:02 PM

#

I really dont understand what to do about this. I already have an existing .d.ts file under /src/episode.d.ts but when i create a new .d.ts next to it VSCode and ts-node can not find it

lone prawn Mar 10, 2023, 11:03 PM

#

"types": ["reflect-metadata"],

#

https://www.typescriptlang.org/tsconfig#types

TSConfig Reference - Docs on every TSConfig option

From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project.

#

If types is specified, only packages listed will be included in the global scope.

#

you don't want that

craggy loom Mar 10, 2023, 11:04 PM

#

lone prawn `"types": ["reflect-metadata"],`

I dont know, this is stated as required in the InversifyJS doc

lone prawn Mar 10, 2023, 11:04 PM

#

you need to import it

craggy loom Mar 10, 2023, 11:04 PM

#

Also i dont get why my one d.ts works and the other doesnt

lone prawn Mar 10, 2023, 11:04 PM

#

in your TS code

#

like so

#

import "reflect-metadata";

#

oh

#

wait

craggy loom Mar 10, 2023, 11:05 PM

#

This is really confusing

lone prawn Mar 10, 2023, 11:05 PM

#

yeah, they provide thir own types

#

just ignore what they say

#

should not be needed

lone prawn Mar 10, 2023, 11:07 PM

#

lone prawn `"types": ["reflect-metadata"],`

yeah, just remove that line entierly and it should work

lone prawn Mar 10, 2023, 11:09 PM

#

lone prawn `import "reflect-metadata";`

also add this in your entry point, it should be the first import

craggy loom Mar 10, 2023, 11:09 PM

#

I think i do not need to import the package type anymore, i just use the factory function i want to use and create a type using ReturnType<typeof myFunc> but ts-node and VSCode cant find the type defined in the second .d.ts named youtubedl.d.ts

src/
├─ types/
│  ├─ episode.d.ts
│  ├─ youtubedl.d.ts

#

Episode works fine but YouTubeDL does not

lone prawn Mar 10, 2023, 11:10 PM

#

wait

#

why do you have .d.ts files in the first place?

#

do you have JS code you're tryuing to add types to?

#

or is it new code you are writing?

craggy loom Mar 10, 2023, 11:10 PM

#

lone prawn why do you have `.d.ts` files in the first place?

because i want to define a new type

lone prawn Mar 10, 2023, 11:10 PM

#

craggy loom because i want to define a new type

that's not how you do it

#

that's not what those files are for

#

just use a regular TS file, even if it only contains types

craggy loom Mar 10, 2023, 11:11 PM

#

That is what i am trying to do in the latter d.ts file:

declare type YouTubeDl =  ReturnType<typeof create>;

lone prawn Mar 10, 2023, 11:11 PM

#

.d.ts files add types to your JavaScript library
you don't have an existing JavaScript library

lone prawn Mar 10, 2023, 11:12 PM

#

craggy loom That is what i am trying to do in the latter d.ts file: ```typescript declare ty...

yes, but put it in a regular .ts file

craggy loom Mar 10, 2023, 11:15 PM

#

Hmm so i removed the types property from the tsconfig, i moved reflect-metadata into the first line of index.ts and renamed my d.ts files to .ts but it is still the same behaviour

#

I can use the Episode type perfectly but not the YouTubeDL one

lone prawn Mar 10, 2023, 11:15 PM

#

what error do you have exactly?

craggy loom Mar 10, 2023, 11:17 PM

#

It cant find the type

lone prawn Mar 10, 2023, 11:17 PM

#

"es2019", "es6" this is a problem too

#

either set es2019 or es6, but not both

lone prawn Mar 10, 2023, 11:18 PM

#

craggy loom It cant find the type

can you show the code and the exact error message?

#

you might also want to remove "rootDir": "./src",

craggy loom Mar 10, 2023, 11:19 PM

#

The following code block is the conents of src/types/youtubedl.ts

import { create } from 'youtube-dl-exec';

declare type YouTubeDL = ReturnType<typeof create>;

Now in another file i can only use the type if i remove the import but without the import i can not reference the create function so i can not use its return type.

i also can not use the type defined in the youtube-dl-exec package since ts-node and vscode do not find it no matter what i try.
https://github.com/microlinkhq/youtube-dl-exec/blob/a2971a16b32dcc9bb424effcb6ae5b0cfd256b2c/src/index.d.ts#L249

So the following also does not work at all as it can not find the YtdlCreateFuncion type:

declare type YouTubeDL = ReturnType<YtdlCreateFuncion>;

lone prawn Mar 10, 2023, 11:21 PM

#

./

#

import { create } from './youtube-dl-exec';

type YouTubeDL = ReturnType<typeof create>;

#

without a leading ./, TS thinks it's a package coming from npm

#

which it isn't

craggy loom Mar 10, 2023, 11:22 PM

#

It is

lone prawn Mar 10, 2023, 11:22 PM

#

oh

craggy loom Mar 10, 2023, 11:22 PM

#

check the link above it is the code i try to reference

#

tbh i feel a bit embarassed at myself that i am stuck for 3 hours now at a simple type...

split sigilBOT Mar 10, 2023, 11:23 PM

#

Ascor8522#7606

Playground Link

Preview:```ts
import {create} from "youtube-dl-exec"

type YouTubeDL = ReturnType<typeof create>```

lone prawn Mar 10, 2023, 11:23 PM

#

working just fine

craggy loom Mar 10, 2023, 11:23 PM

#

split sigil

Hen i do that it stops working

#

Only when i remove the import YouTubeDL does light up and the error in the other file disappears

lone prawn Mar 10, 2023, 11:24 PM

#

did you actually install the package?

craggy loom Mar 10, 2023, 11:24 PM

#

Yes

lone prawn Mar 10, 2023, 11:24 PM

#

what does you tsconfig look like?

craggy loom Mar 10, 2023, 11:24 PM

#

checked it like 3 days now

#

Posted above minus the types as you said

lone prawn Mar 10, 2023, 11:25 PM

#

try removing the "extends": "./node_modules/gts/tsconfig-google.json",

#

there is little to no reason to use that

craggy loom Mar 10, 2023, 11:26 PM

#

But is that the root of the problem?

#

Like i can use the type

#

once i remove import

#

I really dont get this

#

Do i have to export the type? VSCode does want to export import it but only this type, Episode is still just fine

craggy loom Mar 10, 2023, 11:54 PM

#

Alright, it does look like once i use import i have to explicitly export the type, the following does work for me:

import { create } from 'youtube-dl-exec';

declare type YouTubeDL = ReturnType<typeof create>

export default YouTubeDL;

lone prawn Mar 10, 2023, 11:54 PM

#

right, if you want to use a type, you have to export it

lone prawn Mar 11, 2023, 12:15 AM

#

!resolved

#How to use types defined outside of ./node_modules/@types ?