Vue 2组合API +类型记录- TS2571:对象类型为“未知”，使用提供/注入

Question

我使用Vue开发了简单的Laravel应用程序。当我访问道具时，我无法摆脱打字错误TS2571: Object is of type 'unknown'.。

我有两个Vue单文件组件：

父母：

<script lang="ts">
import { defineComponent, provide } from '@vue/composition-api';
import { AppConfig, appConfigKey } from './app-config';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const appConfig: AppConfig = {
      alias: 'foo',
      name: 'foo',
      shortName: 'foo',
      url: 'foo'
    };
    provide(appConfigKey, appConfig)
  }
})
</script>

儿童：

<script lang="ts">
import { defineComponent, inject } from '@vue/composition-api';
import { AppConfig, appConfigKey } from './app-config';

export default defineComponent({
  setup() {
    const appConfig: AppConfig = inject(appConfigKey);
    console.log(appConfig.shortName); // TS error here
  }
})
</script>

在我的app-config文件中有：

import { InjectionKey } from '@vue/composition-api';

export interface AppConfig {
  alias: string;
  name: string;
  shortName: string;
  url: string;
}

export const appConfigKey: InjectionKey<AppConfig> = Symbol('appConfig');

我的tsconfig文件：

{
    "compilerOptions": {
        "target": "es2015",
        "module": "esnext",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "strictNullChecks": true,
        "strictPropertyInitialization": true,
        "noImplicitAny": false,
        "noImplicitReturns": false,
        "noImplicitThis": false,
        "noUnusedLocals": true,
        "importHelpers": true,
        "skipLibCheck": true,
        "allowUnusedLabels": false,
        "sourceMap": true,
        "esModuleInterop": true,
        "allowJs": true,
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/assets/js/*"]
        },
        "lib": ["esnext", "dom"]
    }
}

ESLint没有抱怨，但是webpack不想编译代码。拜托，你能帮我弄清楚吗？我不是有经验的类型记录开发人员。我曾经使用Vue Options。

Answer 1

我看到了一个不同的错误(w/TypeScript 4.1.5)：

输入'AppConfig‘是不可分配的，不能输入'AppConfig’。ts(2322)

...which指向这一行：

const appConfig: AppConfig = inject(appConfigKey)；^

您不需要键入appConfig，因为它已经可以被推断为AppConfig | undefined

const appConfig = inject(appConfigKey);

由于appConfig可能是undefined，所以使用可选链引用其属性：

console.log(appConfig?.shortName);