typescript - Zašto ovi tsconfig putovi ne rade?

Pokušavam napraviti nešto vrlo slično primjeru jquery puta u dokumentaciji, ali TS stalno baca TS2307 (webpack se normalno kompajlira):

"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
        "@client": [
            "client",
        ],
        "@suir": [
            "../node_modules/semantic-ui-react/dist/commonjs", // not working
        ],
    },
    // …
},
"include": [
    "*.d.ts",
    "client/**/*",
    "../node_modules/semantic-ui-react", // is this necessary?
],

Promjena baseUrl u "." i ažuriranje includes i paths ne čini razliku (@client i dalje radi, a @suir i dalje ne radi).

Promjena "@suir" u "@suir/" ili "@suir/*" (i dodavanje /* na njegovu vrijednost) također ne čini razliku.

Razlog zbog kojeg to radim je pojednostaviti moje uvoze (navodim ih izričito umjesto da izvlačim imenovane izvoze iz paketa kako bih smanjio veličinu svog vendor paketa—što štedi oko 1 MB):

import Button from 'semantic-ui-react/dist/commonjs/elements/Button'; // works

import Button from '@suir/elements/Button'; // not found

Odgovor #1

Nemam pojma zašto ovo sada radi pri jedanaestom pokušaju (a nije pri prvih 10), ali čini se da je /* tajni sastojak, a primjer u dokumentaciji očito pokazuje na određenu datoteku (i ekstenzija datoteke je izostavljena).

{
    "compilerOptions": {
        "baseUrl": "./src", // setting a value for baseUrl is required
        "moduleResolution": "node", // was not set before, but is the default
        "paths": {
            "@client/*": [
                "client/*",
            ],
            "@suir/*": [ // notice the `/*` at the end
                "../node_modules/semantic-ui-react/dist/commonjs/*", // notice the `/*`
            ],
        },
        // …
    },
    "include": [
        "./src/client/**/*",
    ],
}

Odgovor #2

Također sam se mučio s .tsconfig koji nije prepoznavao moje alias-e (dok je u drugom projektu koji je trebao imati istu konfiguraciju to radilo savršeno).

Ispostavilo se da je to bila početnička greška: stavio sam paths svojstvo na kraj JSON objekta, ali ono mora biti ugniježđeno svojstvo dijela compilerOptions:

// This does't work ❌
{
  "compilerOptions": {
     //...
    "baseUrl": ".",
  },
  //...
  "paths": {
      "@components/*": ["components/*"],
      "@lib/*": ["lib/*"]
    }
}

// This should work ✅
{
  "compilerOptions": {
     //...
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@lib/*": ["lib/*"]
    }
  },
  //...
}

Odgovor #3

Kao što je spomenuto u komentarima Emily Zhai, ponekad je za to dovoljno samo ponovno pokrenuti jezični poslužitelj.

U VSCode-u možete pritisnuti Cmd/Ctrl + Shift + P i potražiti Typescript: Restart TS Server.

Nakon ponovnog pokretanja, sve je počelo raditi za mene.

Odgovor #4

Iz kutije, ne radi s tsc ili ts-node. Ali s nekim paketima (tsc-alias i module-alias), radi. Nije potrebna nikakva konfiguracija za babel ili webpack.

// tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "@common/*": ["common/*"],
      "@services/*": ["services/*"],
    },
    ...
  },
}

Rad s TSC

Dodajte tsc-alias (https://www.npmjs.com/package/tsc-alias) kao razvojnu ovisnost

yarn add --dev tsc-alias

I dodajte ga svojoj naredbi za izgradnju

"build": "tsc && tsc-alias",

Rad s TS-NODE

Dodajte module-alias (https://www.npmjs.com/package/module-alias) ovisnost

yarn add module-alias

Napravite datoteku koja se poziva na sve alias-e

// src/paths.ts

import 'module-alias/register';
import { addAliases } from 'module-alias';

addAliases({
  '@common': `${__dirname}/common`,
  '@services': `${__dirname}/services`,
});

I uvezite ga u svoj ulazni skript kao prvi uvoz

// src/server.ts

import './paths';
import express, { Request, Response, NextFunction } from 'express';
...

const app = express();
...
app.listen(port, onListen(port));

Odgovor #5

Ovo bi moglo pomoći nekome - ako koristite tsc ili neki alat za kompilaciju vašeg TS koda u zasebnu mapu poput dist, tsconfig-paths register NE radi automatski. Imam tsconfig.json ovakav:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "lib": ["dom", "esnext"],
        "baseUrl": ".",
        "jsx": "react",
        "removeComments": true,
        "sourceMap": true,
        "outDir": "dist"
        "rootDir": ".",
        "paths": {
            "shared/*": ["./shared/*"],
        }
    },
    "include": ["./client/**/*", "./server/**/*"]
}

Možete vidjeti da će put poput shared/someFolder/someScript ispravno biti razriješen u mapu shared u mom projektu, što je čišće od puno relativnih putanja ../../../../.

Međutim, ovo mi je davalo pogrešku:

➜  game git:(game-dev) ✗ node --inspect -r tsconfig-paths/register dist/server/runProd.js
Debugger listening on ws://127.0.0.1:9229/f69956aa-d8d6-4f39-8be1-9c3e8383d4be
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
internal/modules/cjs/loader.js:584
    throw err;
    ^

Error: Cannot find module 'shared/types/UserTypes'

Malo sam istraživao i otkrio da niz tryPaths koji proizvodi tsconfig-paths ima apsolutne URL-ove relativno prema bazi project/cwd, a ne prema mapi za izgradnju dist.

Ovo se čini očitim u retrospektivi. Ne čini se da postoji očit način za rješavanje ovoga s bibliotekom, pa sam to riješio tako da sam kopirao tsconfig.json u dist mapu i pokrenuo node -r tsconfig-paths/register main.js.

Odgovor #6

Ako koristite Vite, trebali biste instalirati vite-tsconfig-paths.

npm i vite-tsconfig-paths --save-dev

Zatim injektirajte vite-tsconfig-paths koristeći modul vite.config.ts

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

Možda ćete morati ponovno pokrenuti Vite i/ili vaš TS server nakon što napravite ove promjene.

Odgovor #7

Nakon nekoliko pokušaja i pogrešaka, saznao sam da to funkcionira drugačije nego što mislimo.

//tsconfig.json
"baseUrl": ".",
"paths": {
  "@components/": ["src/components/"],
}

//SomeCompomonent.tsx
import { Button } from "@components/" // will work
import Button from "@components/Button" // will not work

da bi druga linija uvoza radila, morate staviti *

//tsconfig.json
"baseUrl": ".",
"paths": {
  "@components/*": ["src/components/*"],
}

//SomeCompomonent.tsx
import { Button } from "@components/" // will not work
import Button from "@components/Button" // will work

Da bi oboje funkcioniralo

//tsconfig.json
"baseUrl": ".",
"paths": {
  "@components/": ["src/components/"],
  "@components/*": ["src/components/*"],
}

//SomeCompomonent.tsx
import { Button } from "@components/" // will work
import Button from "@components/Button" // will work

Povezani članci