Using Typescript in v1 with absolute paths enabled

[danieloi]

I ran into an issue where the advice in the docs for using typescript with v1 of the library made my absolute imports throw errors.

I got around it by using the "paths" key in my "compilerOptions" instead like so "compilerOptions": { "paths": { ... "react-native-redash/lib/module/v1": [ "./node_modules/react-native-redash/lib/typescript/v1/index.d.ts" ] } }

[latviancoder]

For me the solution from the docs simply didn't work. Thanks for this!

[wcandillon]

Is there a specific typescript config for which this setting must be used? I couldn't use it in my project?

[danieloi]

It's for when you have absolute imports enabled in your tsconfig.json file. You specify a "baseURL" so paths that aren't relative work. E.g. instead of ".../components/Button" you'd be able to use "components/Button". Adding an "include" like the docs say clashes with this setting somehow

[Sowed]

I am also using absolute imports and adding the include key with just the node_modules/react-native-redash/lib/typescript/v1/index.d.ts breaks my absolute imports.

Part of my tsconfig that fails, as it breaks absolute imports

//  tsconfig.json
{
  "baseUrl": "src",
  "include": [
    "node_modules/react-native-redash/lib/typescript/v1/index.d.ts",
  ],
}

However if declare the module in my types folder at src/@types/react-native-redash.d.ts, it works with...

declare module 'react-native-redash/lib/module/v1';

Then update include to remind tsc to look for all types within the src folder and subfolders

{
  "baseUrl": "src",
  "include": ["src/**/*"],
}

[wcandillon]

Gang, thank you for helping me out with this issue. So if someone has "baseUrl": "src" in their config, does it mean that the include should be "include": ["../node_modules/react-native-redash/lib/typescript/v1/index.d.ts"] or does it means that the type should be included in a different way?

[chj-damon]

@wcandillon vscode can't automatically hint me when I import methods from 'react-native-redash/lib/module/v1'. This is a bit inconvenient.

[chj-damon]

[danieloi]

Gang, thank you for helping me out with this issue. So if someone has "baseUrl": "src" in their config, does it mean that the include should be "include": ["../node_modules/react-native-redash/lib/typescript/v1/index.d.ts"] or does it means that the type should be included in a different way?

It should be included in a different way.

My solution was the "paths" options I mentioned in the first comment.

The normal includes kept making my other, normal absolute imports to throw errors in VS Code.

[erhanbicer]

thank you @danieloi worked for me

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "react-native-redash/lib/module/v1": ["./node_modules/react-native-redash/lib/typescript/v1/index.d.ts"]
        },
        "target": "esnext",
        "module": "commonjs",
        "lib": ["es6"],
        "allowJs": true,
        "checkJs": true,
        "jsx": "react-native",
        "noEmit": true,
        "isolatedModules": true,
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "alwaysStrict": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "resolveJsonModule": true
    },
    "exclude": ["node_modules", "e2e"]
}

[kendrickw]

Another way is to add the typings in typings/index.d.ts:

declare module 'react-native-redash/lib/module/v1' {
  export * from 'react-native-redash/lib/typescript/v1';
}

The typings/index.d.ts should be read by typescript compiler by default