Can we create an alias for the import path in TypeScript?

Question

Can we create an alias for the import path in TypeScript?

import A = require('../../distant/PathToA');
import B = require('./different/path/PathToB');

I am utilizing external modules (commonJS) and browserify, with WebStorm as my editor.

If this were just regular javascript, there are several options to avoid using these lengthy paths constantly, such as browserify aliases. However, in TypeScript, the editor follows the path and retrieves type information for intellisense. Therefore, if I use any of those options, the editor cannot locate the file path, resulting in a compiler error as well.

Are there any existing methods in TypeScript (for any editor) that allow me to utilize path aliases in some manner?

import module path typescript alias

Answer 1

Answer №1

There's a clever workaround to achieve this, but it involves manually writing either the AMD or CommonJS import statement... like so:

///<amd-dependency path="scripts/typings/cordova/cordova.d.ts" />
declare var require: any;

var cordova: Cordova = require('cordova');

module Example {

    class Test {

        constructor() {
            cordova.exec(this.success, this.error, "Service", "Action", null);
        }

        private success(message?: string) {
            //do Something
        }

        private error(message?: string) {
            //do Something
        }
    }
}

Alternatively, you can use define instead of require.

Personally, I don't mind the long paths if it means benefiting from the TypeScript compiler's ability to switch to target AMD or CommonJS without having to rewrite any TypeScript code.

Answer 2

There's a clever workaround to achieve this, but it involves manually writing either the AMD or CommonJS import statement... like so:

///<amd-dependency path="scripts/typings/cordova/cordova.d.ts" />
declare var require: any;

var cordova: Cordova = require('cordova');

module Example {

    class Test {

        constructor() {
            cordova.exec(this.success, this.error, "Service", "Action", null);
        }

        private success(message?: string) {
            //do Something
        }

        private error(message?: string) {
            //do Something
        }
    }
}

Alternatively, you can use define instead of require.

Personally, I don't mind the long paths if it means benefiting from the TypeScript compiler's ability to switch to target AMD or CommonJS without having to rewrite any TypeScript code.

Answer 3

Answer №2

Is there a way to use path aliases in typescript with any editor currently available?

Yes, Grunt-ts is a tool that can help you achieve this. By referencing ts:import=someFileName, it will automatically generate the correct import statement for you. Check out more information here: https://github.com/TypeStrong/grunt-ts#import-transform

Answer 4

Is there a way to use path aliases in typescript with any editor currently available?

Yes, Grunt-ts is a tool that can help you achieve this. By referencing ts:import=someFileName, it will automatically generate the correct import statement for you. Check out more information here: https://github.com/TypeStrong/grunt-ts#import-transform

Can we create an alias for the import path in TypeScript?

Answer №1

Answer №2

Similar questions

Is it possible to utilize an @Input() in Angular with multiple types?

How to trigger a function in a separate component (Comp2) from the HTML of Comp1 using Angular 2

What could be the reason for `process.env.myvariable` not functioning in a Next.js project with TypeScript

The issue arises when TypeScript declarations contain conflicting variables across multiple dependencies

Managing multiple asynchronous requests through Observables in web development

The JSON creation response is not meeting the expected criteria

Exploring the hidden gems of npm package.json: the keys

Adjusting image dynamically based on conditions

The function parameter in Angular's ngModelChange behaves differently than $event

What is the best way to interweave my objects within this tree using recursion?

Upon transitioning from Angular 5 to Angular 6, a noticeable issue arises: The existing document lacks a required doctype

Challenges with TypeScript build in DevOps related to Material UI Box Component

what kind of bespoke entity in TypeScript

Why is it advantageous to use Observable as the type for Angular 5 component variables?

Using Angular 2, you can pass an object as a parameter to a function

JavaScript: Manipulating Data with Dual Arrays of Objects

The BooleanField component in V4 no longer supports the use of Mui Icons

How should we correctly import jquery.inputmask?

Exploring the synergies between Angular 5 and atmosphere.js

Instructions for utilizing ObjectId with a string _id on the client side