Typescript: Alias for TypeScript declaration emitting

[joshuaavalon]

Search Terms

• alias
• declaration

Suggestion

A way to configuration alias for declaration files.

Use Cases

Related: #10866

I understand that TypeScript team want to leaves module resolving for other tools like Webpack. However, most of the tools are focus on emitting JavaScript. If you want to emit TypeScript declaration, you need to use tsc.

This is important when you want to write library with TypeScript that you need to release declaration files.

For example, in Webpack, babel-loader does not emit declarations, ts-loader and awesome-typescript-loader uses tsc.

Alias is useful for you to write simpler import / export statement.

Examples

index.ts

export * from "~/foo";

index.d.ts

export * from "../../foo";

tsconfig.json

{
  "alias": {
    "~/*": ["src/*"]
  }
}

Checklist

My suggestion meets these guidelines:

• [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
• [x] This wouldn't change the runtime behavior of existing JavaScript code
• [x] This could be implemented without emitting different JS based on the types of the expressions
• [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• [x] This feature would agree with the rest of TypeScript's Design Goals.

[RyanCavanaugh]

The example is so sparse I can't tell at all what's going on. Where did src go / come from? Where are these files on disk, and why? Where did ../../ come from? How did TS come up with those paths?

[joshuaavalon]

@RyanCavanaugh Sorry for not enough information. Let me describe for the full details.

Folder structure
Assume all index.ts export all from same level folder

Project/
├── src/
│   ├── index.ts
│   ├── model/
│   │    ├── index.ts
│   │    └── foo.ts
│   └── function/
│        ├── index.ts
│        └── baz/
│             ├── index.ts
│             └── bar.ts
├── webpack.config.js
└── tsconfig.json

To import Foo from foo.ts in bar.ts, you have to write the following.

import { Foo } from "../../model";

The problem become more serious when you have more level of nested folder.

In Webpack, we can use resolve to handle this (Support babel):

module.exports = {
  //...
  resolve: {
    alias: {
      "~": path.resolve(__dirname,  "src")
    }
  }
};

In Jest, we can use moduleNameMapper:

"moduleNameMapper": {
  "^~/(.*)": "<rootDir>/src/$1"
}

We also have tsconfig.json to support it in VSCode.

{
  "compilerOptions": {
    "rootDir": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

Then, we can write the following instead

import { Foo } from "~/model";

These are enough when we are writing an application. However, when I try to write a package in TypeScript, I have to transpile it to JavaScript with TypeScript declaration.

Most of the TypeScript transpilers either does not transpile type declaration or use tsc, for example, babel suggest using tsc --emitDeclarationsOnly for declaration as babel does not do type-checking.

I have tested out how tsc --emitDeclarationsOnly. It emits ~/model without modification. There does not seem to have any tools to handle this for declarations. So, we have to fallback to "../../" because we have to support declarations.

This feature request is some sort of configuration that we can support alias feature in emitting declarations. If TypeScript can resolve with paths, it should able to emit declarations with correct paths.

[shuyums2]

Voting for this to be supported

[Neloreck]

Support optional compile-time alias replacing too.

1) It will allow to generate correct source code for node without odd plugins/transpilers. There is so many questions and custom solutions for it.
2) d.ts files will be correct for webpack projects (where actual bundler transforms everything itself)

Currently we have to manually bundle .js and manage declarations as next step.

[Neloreck]

Same as:
https://github.com/Microsoft/TypeScript/issues/15479

[zhuguoxi]

Voting for this to be supported