TypeScript 2.9.2 is generating long relative paths for packages starting with @

[nareshbhatia]

TypeScript Version: 2.9.2

Search Terms:
Relative Path
Packages starting with @

Code
The following code defines a React component called MiniRadio. It is using several imports from Material-UI. The package name for Material-UI starts with the @ character:

import * as React from 'react';

import Radio from '@material-ui/core/Radio';
import {
    createStyles,
    StyledComponentProps,
    WithStyles,
    withStyles
} from '@material-ui/core/styles';

export const styles = createStyles({
    radio: {
        width: 24,
        height: 24
    }
});

export interface MiniRadioProps extends WithStyles<typeof styles> {
    className: string;
    checked: boolean;
    value: string | undefined;
    color?: 'primary' | 'secondary' | 'default';
    label?: string;
    onChange?: React.EventHandler<any>;
}

export const MiniRadio = withStyles(styles)(
    class extends React.Component<MiniRadioProps> {
        render() {
            const { classes, ...rest } = this.props;

            return (
                <Radio
                    className={classes.radio}
                    {...rest}
                />
            );
        }
    }
);

Expected behavior:
With TypeScript version 2.8.3, the above code generates the following type definition, Notice the clean declaration for MiniRadio in the last line.

/// <reference types="react" />
import * as React from 'react';
import { StyledComponentProps, WithStyles } from '@material-ui/core/styles';
export declare const styles: {
    radio: {
        width: number;
        height: number;
    };
};
export interface MiniRadioProps extends WithStyles<typeof styles> {
    className: string;
    checked: boolean;
    value: string | undefined;
    color?: 'primary' | 'secondary' | 'default';
    label?: string;
    onChange?: React.EventHandler<any>;
}
export declare const MiniRadio: React.ComponentType<Pick<MiniRadioProps, "label" | "color" | "className" | "onChange" | "theme" | "value" | "checked"> & StyledComponentProps<"radio">>;

Actual behavior:
With TypeScript version 2.9.2, the exact same code generates the following type definition. Notice the long relative pathname for @material-ui/core in the last line:

import * as React from 'react';
import { StyledComponentProps, WithStyles } from '@material-ui/core/styles';
export declare const styles: {
    radio: {
        width: number;
        height: number;
    };
};
export interface MiniRadioProps extends WithStyles<typeof styles> {
    className: string;
    checked: boolean;
    value: string | undefined;
    color?: 'primary' | 'secondary' | 'default';
    label?: string;
    onChange?: React.EventHandler<any>;
}
export declare const MiniRadio: React.ComponentType<import("../../../../../../../../../Users/narbhati/projects/trader-desktop-solution/node_modules/@material-ui/core").Overwrite<MiniRadioProps, StyledComponentProps<"radio">>>;

tsconfig.json:

{
    "compilerOptions": {
        "declaration": true,
        "declarationDir": "dist/types",
        "experimentalDecorators": true,
        "jsx": "react",
        "lib": ["es2015", "es2016", "es2017", "dom"],
        "module":"commonjs",
        "outDir": "./dist",
        "sourceMap": true,
        "strict": true,
        "target": "es5"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "src/**/*.story.ts*",
        "src/**/*.test.ts*"
    ]
}

[kitsonk]

Duplicate of #24599

[typescript-bot]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.