Typescript: Define for JSON嵌套对象

Question

我有一个嵌套的json对象，并为它定义一个接口

interface Menu {
[key: string]: string[] | Menu;
}
const menuOnlyForRoles: Menu = {
site: {
only: [],
category: {
only: ['manager', 'head', 'lead'],
},
'floor-section': {
only: ['head', 'lead'],
},
},
};

但是当我使用它时。出现警告。

const menuPermissionForKey = menuOnlyForRoles.site || { only: [] };
const rolesCanAccessMenu= menuPermissionForKey.only || [];
▔▔▔▔
any
Property 'only' does not exist on type 'Menu | string[]'.
Property 'only' does not exist on type 'string[]'

我做错了什么或错过了什么?

Answer 1

你本身并没有做错什么。TypeScript无法推断出你的menuPermissionForKey是一个Menu对象还是一个string数组。

理想情况下，您应该更严格地定义Menu类型。除此之外，您可以创建类型谓词:

interface Menu {
[key: string]: string[] | Menu;
}
const menuOnlyForRoles: Menu = {
site: {
only: [],
category: {
only: ['manager', 'head', 'lead'],
},
'floor-section': {
only: ['head', 'lead'],
},
},
};
function isMenu(data: Menu | string[]): data is Menu {
return !Array.isArray(data);
}
const menuPermissionForKey = menuOnlyForRoles.site || { only: [] };
const rolesCanAccessMenu= isMenu(menuPermissionForKey)
? menuPermissionForKey.only || []
: [];

<一口>操场链接

---

或者，如果您正在处理在编译时已知的静态数据，您可以使用const断言，可选地使用satisfies操作符来在编辑时强制进行类型检查:

interface Menu {
[key: string]: readonly string[] | Menu;
}
const menuOnlyForRoles = {
site: {
only: [],
category: {
only: ['manager', 'head', 'lead'],
},
'floor-section': {
only: ['head', 'lead'],
},
},
} as const satisfies Menu;
const menuPermissionForKey = menuOnlyForRoles.site || { only: [] };
const rolesCanAccessMenu = menuPermissionForKey.only || [];

<一口>操场链接