ts ...展开数据报错

来源：2-7 Interface- 接口初探

慕尼黑8466541

2021-07-11

interface Mode {
  baseApi: string
  mockApi: string
}

interface Person {
  dev: Mode
  prod: Mode
}

const env: string = 'prod'

const EnvConfig: Person = {
  dev: {
    baseApi: 'dev/bas',
    mockApi: 'dev/moc'
  },
  prod: {
    baseApi: 'prod/bas',
    mockApi: 'prod/moc'
  }
}

export default {
  env,
  mock: false,
  namespace: 'cloth',
  ...EnvConfig[env]
}

…EnvConfig[env] 报错：元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型 “Person”。
在类型 “Person” 上找不到具有类型为 “string” 的参数的索引签名。ts(7053)

请老师帮我看下是哪里问题？

写回答

1回答

张轩

2021-07-11

同学你好先说说问题，你的 env 定义为 string，也就是任意的字符串都行。但是 Person 的key 其实只能是 dev 或者 prod 两种，而不是所有字符串都可以，你这里假如 env = 'test' ，其实这个时候之后使用的话会有问题的，ts 帮你捕捉到了这个问题。

说说怎样解决：

// 定义 env 只能是 prod 或者 dev, 这里是字符串字面量的妙用。
const env: 'dev' | 'prod' = 'prod'

//第二种解决，更厉害的解法，因为有可能以后你会添加更多的 Mode 比如 test，这个时候又会有新的问题，所以使用一个
// 特殊的关键字 keyof，这个可以取一个 interface 的 key 的联合类型
const env: keyof Person = 'prod'
这个时候 env 就是 Person key 的联合类型了，在这里也就是 'dev' | 'test'

慕尼黑8466541

感谢老师的回复，回复得很详细，连我这个初中生都能理解，希望老师能再出一些精彩的课程。

2021-07-11

共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

老师用的ts的哪个扩展？

回答 1

vue-cli typescript可选链报错