Vue 2 組合 API + Typescript - TS2571：Object 是使用提供/注入的“未知”類型

Question

我使用 Vue 開發了簡單的 Laravel 應用程序。 我無法擺脫 Typescript 錯誤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 不想編譯代碼。 拜托，你能幫我弄清楚嗎？ 我不是經驗豐富的 Typescript 開發人員。 我曾經使用 Vue Options API。

Answer 1

我看到一個不同的錯誤（w/TypeScript 4.1.5）：

 Type 'AppConfig | undefined' is not assignable to type 'AppConfig'. ts(2322)

...指向這一行：

 const appConfig: AppConfig = inject(appConfigKey); ^^^^^^^^^

您不需要鍵入appConfig ，因為它已經可以推斷為AppConfig | undefined AppConfig | undefined ：

const appConfig = inject(appConfigKey);

因為appConfig可能是undefined ，所以使用可選鏈來引用它的屬性：

console.log(appConfig?.shortName);
                     👆