Почему автозаполнение перестает работать в объекте с типом в TypeScript?

Question

У меня есть список маршрутов в одном объекте, и я хочу импортировать его в другой файл, и у меня есть автозаполнение для свойств объекта.

index.ts

import allRoutes from './routes';

allRoutes.routeHome;

routes.ts

const allRoutes = {
  routeHome: '',
  routePortfolio: 'portfolio'
};

export default allRoutes; 

Все отлично работает. Но если я добавлю типы в свой allRoutes для проверки типа, подобной этой:

const allRoutes: {[key: string]:string} = {
  routeHome: '',
  routePortfolio: 'portfolio'
};

или как это:

interface IRoutes {
    [key: string]: string;
}

const allRoutes: IRoutes = {
    routeHome: '',
    routePortfolio: 'portfolio'
};

Все ломается

Я пробую это в WebStorm или VSCode. Если я добавлю тип для свойств объекта - автозаполнение перестает работать. Почему это происходит? И как я могу это исправить?

Answer 1

После инициализации константы с типом { [key: string]: string } исходный тип теряется. Если вы хотите сохранить исходный тип, но убедитесь, что он присваивается { [key: string]: string }, вы можете сделать это:

function asStrings<T extends { [key: string]: string }>(arg: T): T {
  return arg;
}

const allRoutes = asStrings({
  routeHome: '',
  routePortfolio: 'portfolio'
});

Существует предложение для решения, которое не требует вызова функции.

Answer 2

Как насчет этого решения?

interface IRoute {
    name: string;
    destination: string;
}

class AllRoutes {
    public static readonly Home: IRoute = { name: "Home", destination: "" }; 
    public static readonly Portfolio: IRoute = { name: "Portfolio", destination: "portfolio" }; 
}

Answer 3

Зарегистрирован как WEB-34642 , следите за обновлениями