Question

我收到了错误Index signature is missing in type，它正在粉碎我的灵魂。我会非常感激地理解如何解决这个问题。这是代码：

// TestGuide.tsx
export default {
  stepOrder: ['welcome', 'basics', 'goodbye'],
  steps: {
    'welcome': <h1>Welcome to my house!</h1>,
    'basics': <h1>Maybe we should do some basics</h1>,
    'goodbye': <h1>The End.</h1>
  }
};

// guides.ts
interface Guide {
  stepOrder: string[],
  steps: {[x: string]: JSX.Element }
}

export const guideUtils = {
  getNameForStepIndex(guide: Guide, stepIndex: number): string {
    return guide.stepOrder[stepIndex];
  }
}

// TestReactComponent.tsx
import testGuide from './TestGuide';
import { guideUtils } from './guides';
guideUtils.getNameForStepIndex(testGuide, 0) 
// This is where I get the type error
// Index signature is missing in type {'welcome': ..., 'basics': ..., 'goodbye': ...}

我应该如何使用类型来确保testGuide.steps处的对象具有JSX.Element值？无论如何定义Guide接口，或者TestGuide.tsx中的对象，还是其他任何有效的对象？

我阅读了以下内容，但它无法帮助我了解如何解决此问题：Why can't I indirectly return an object literal to satisfy an index signature return type in TypeScript?

Answer 1

你是对的。编译不知道从TestGuide.tsx导出的对象是Guide类型。所以，你只需要告诉它。一种方法是：

import { Guide } from './guides';

export default <Guide>{
  stepOrder: ['welcome', 'basics', 'goodbye'],
  steps: {
    'welcome': "<h1>Welcome to my house!</h1>",
    'basics': "<h1>Maybe we should do some basics</h1>",
    'goodbye': "<h1>The End.</h1>"
  }
};

当然，从Guide导出guides.ts。

Answer 2

在定义testGuide对象时，我必须定义它的类型。对于缓慢而笨拙的学习过程而言，是的。

有没有办法解决Typescript中索引签名的限制？

2 个答案: