Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

why the ts-transform-paths did not replace the @ alias import path

Tags:

typescript

I want to use ts-transform-paths to transform the typescript alias path, first install the plugin:

yarn add ts-transform-paths -D

then add config in the tsconfig.json:

// Note: To transform paths for both the output .js and .d.ts files, you need both of the below entries
    "plugins": [
      // Transform paths in output .js files
      { "transform": "typescript-transform-paths" },

      // Transform paths in output .d.ts files (Include this line if you output declarations files)
      { "transform": "typescript-transform-paths", "afterDeclarations": true }
    ] 

this is the full tsconfig.json:

{
  "compilerOptions": { 
    /* Language and Environment */
    "target": "es5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    
    /* Modules */
    "module": "esnext",                                /* Specify what module code is generated. */
    
    /* Emit */
    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    "outDir": "./dist", 
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true,
    "baseUrl": "src",
    "paths": {
      "@net/*":["net/*"],
      "@auth/*":["auth/*"],
    },
    // Note: To transform paths for both the output .js and .d.ts files, you need both of the below entries
    "plugins": [
      // Transform paths in output .js files
      { "transform": "typescript-transform-paths" },

      // Transform paths in output .d.ts files (Include this line if you output declarations files)
      { "transform": "typescript-transform-paths", "afterDeclarations": true }
    ]                                 /* Skip type checking all .d.ts files. */
  },
  "exclude": [
    "dist"
  ]
}

but when I build the project with command tsc, the dist folder file import path did not replaced by the plugin. still looks like this:

import { ResponseCode } from "@net/rest/ResponseCode";
import { AuthHandler } from "@auth/extension/AuthHandler";

why the path alias replace did not work? what should I do to make it work?

like image 660
spark Avatar asked Nov 24 '25 23:11

spark


1 Answers

did you previously install ts-patch on your project as indicated here https://www.npmjs.com/package/typescript-transform-paths ?
It works like a charm for me, you should add it like so <yarn|npm|pnpm> add -D ts-patch and add this in your package.json as indicated https://github.com/nonara/ts-patch :

"scripts": {
    "prepare": "ts-patch install -s",
}
like image 92
NansP Avatar answered Nov 26 '25 13:11

NansP