动态导入json文件

Question

我曾经像这样加载一个json文件：

import faq from './faq.json'

interface FAQ {
   title: string
   body: string
}

interface SiteConfig {
    title: string
    faqs: FAQ[]
}

sites: {[key: string]: SiteConfig} = {
    siteA: {
        title: 'xx',
        faqs: faq
    }
}

现在我想使用动态导入：

interface FAQ {
   title: string
   body: string
}

interface SiteConfig {
    title: string
    faqs: () => FAQ[]
}

sites: {[key: string]: SiteConfig} = {
    siteA: {
        title: 'xx',
        faqs: (): Promise<FAQ[]> => import('./faq.json')
    }
}

失败，出现以下错误：

Type 'Promise<typeof "*.json">' is not assignable to type 'Promise<FAQ[]>'.

Answer 1

Typescript会给你一个错误，因为import返回一个JSON类型的promise，而不是FAQ[]，因此你的错误。

相反，尝试：

sites: {[key: string]: SiteConfig} = {
    siteA: {
        title: 'xx',
        faqs: (): Promise<any> => import('./faq.json')
    }
}

您还可以使faqs成为异步函数

sites: {[key: string]: SiteConfig} = {
    siteA: {
        title: 'xx',
        faqs: async (): Promise<any> => await import('./faq.json')
    }
}