接口不满足约束“Record<string, object | undefined>”。 “StackParamList”类型中缺少索引签名。ts(2344)

Question

使用 TypeScript 3.9、React Native、React 导航...

我遇到错误：

interface StackParamList
Type 'StackParamList' does not satisfy the constraint 'Record<string, object | undefined>'.
  Index signature is missing in type 'StackParamList'.ts(2344)

上：

const HomeStack = createStackNavigator<StackParamList>()

在：

const HomeStack = createStackNavigator<StackParamList>()

export interface StackParamList {
  Home: undefined
  Post: { post: Post }
  Category: { category: Category }
  Login: undefined
  ForgotPassword: undefined
  'My profile': undefined
  'My partner': undefined
  Parameters: undefined
  Likes: undefined
  Onboarding: undefined
}

/**
 * Home "stack navigator"
 * @summary this is the navigator for everything located under "home"
 */
export default function HomeStackScreen() {
  return (
    <>
      <StatusBar backgroundColor={colors.background} barStyle="dark-content" />
      <HomeStack.Navigator screenOptions={screenOptions}>
        <HomeStack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            headerTitle: (props) => <Logo {...props} />,
          }}
        />
        <HomeStack.Screen name="Login" component={LoginScreen} />
        <HomeStack.Screen name="Post" component={PostScreen} options={{ headerTransparent: true, title: '' }} />
        <HomeStack.Screen name="Category" component={CategoryScreen} options={({ route }) => ({ title: route.params.category.id })} />
        <HomeStack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
        <HomeStack.Screen name="My profile" component={UserProfileScreen} options={{ headerTransparent: true, title: '' }} />
        <HomeStack.Screen name="My partner" component={UserPartnerScreen} />
        <HomeStack.Screen name="Parameters" component={UserParamScreen} />
        <HomeStack.Screen name="Likes" component={UserLikesScreen} />
        <HomeStack.Screen name="Onboarding" component={Onboarding} options={{ headerShown: false }} />
      </HomeStack.Navigator>
    </>
  )
}

我不明白为什么接口不满足“Record”类型。

我不明白“索引签名丢失”是什么意思。

你有什么想法吗？

谢谢

Answer 1

我可以通过更改输入界面来解决这个问题。 这是 StackOverflow 帖子的链接。

错误修复：

// TypeScript Type: Stack Param List
export type StackParamList = {
  Home: undefined
  Post: { post: Post }
  Category: { category: Category }
  Login: undefined
  ForgotPassword: undefined
  'My profile': undefined
  'My partner': undefined
  Parameters: undefined
  Likes: undefined
  Onboarding: undefined
};

Answer 2

上下文

• 如果您的 eslint 配置中有

  'plugin:@typescript-eslint/strict',

  ，则需要这样做
• 通常，如果您通过了

  type

  ，则可以正常工作，但是，如果您通过了

  interface

  ，则需要

  extends ParamListBase

之前

export interface UnAuthStackRoutes {
  debug: undefined;
  'forgot-password': { email: string };
  landing: undefined;
  onboarding: undefined;
  privacy: undefined;
  'sign-up': undefined;
  terms: undefined;
}

之后

export interface UnAuthStackRoutes extends ParamListBase {
  debug: undefined;
  'forgot-password': { email: string };
  landing: undefined;
  onboarding: undefined;
  privacy: undefined;
  'sign-up': undefined;
  terms: undefined;
}

Answer 3

React (react-router-dom) 中的 useParams Hook 存在同样的问题：

useParams Hook 中不能使用 Generic 中的 Interface，只能类型 object，如果详细查看 useParams：

useParams：导出函数useParams():Params;

如果你注意 Generic extends {[K in keyof Params]} 中的限制 你会看到，在 Interface 中我们不能使用计算属性 [K in keyof...] 但在“type object”中我们可以。这就是打字稿出现错误的原因。

Answer 4

我不明白原因，但我通过添加解决了它

[key: string]: any;

到界面

interface loginFormData {
    email: FormDataEntryValue;
    password: FormDataEntryValue;
    [key: string]: any;
  };

我搜索了原因，得到了这篇文章https://dev.to/tlylt/exploring-key-string-any-in-typescript-4ake，但不明白。

如果有人读过它，或者清楚其原因，请写下/解释其原因

Answer 5

我通过添加解决了这个问题：

| Record<string, object | undefined>

开：

export type StackParamList =
  | {
      Home: undefined
      Post: { post: Post }
      Category: { category: Category }
      Login: undefined
      ForgotPassword: undefined
      'My profile': undefined
      'My partner': undefined
      Parameters: undefined
      Likes: undefined
      Onboarding: undefined
    }
  | Record<string, object | undefined>

我还是不太明白为什么需要它......