打字稿为具有动态和静态键的对象创建接口

Typescript creating interface for object with both dynamic and static keys

我正在尝试学习打字稿,但在界面方面遇到了障碍,我有一个对象,我想将一个 token 和一个 route 保存在如下

const obj = {
  token: 'thisismytoken',
  '/path/to/somewhere': [{ ... }]
}

我在这里遇到的问题是:如何为这个对象生成接口?

我试过:

interface iObject {
  token: string;
  [key: string]: { ... }[]
}

但这会产生错误:

TS2411: Property 'token' of type 'string' is not assignable to string index type '{ ... }'.

当我尝试类似的事情时,同样的事情发生了:

interface iRoute {
  val1: number;
  val2: string;
}

interface iObject extends iRoute {
  token: string;
}

当我尝试类似的操作时:

interface iObject {
  [key: string]: { ... }[] | string;
}

当我尝试向路由变量添加数据时出现以下错误:

TS2339: Property 'push' does not exist on type 'string | { ... }[]'.
Property 'push' does not exist on type 'string'.

还有其他方法吗?

你可以这样做。您正在尝试创建字典,所以这可能会有所帮助。

拥有干净的代码

第一种方法

interface IDictionary<T> {
    [key: string]: T;
}

interface iObject {
    token: string;
    route: IDictionary<any[]>;
}

//Use it like this
var obj: iObject = {
            token: "thisismytoken",
            route: {
                "/path/to/somewhere": [{
                    pathName: 'somewhere'
                }]
            }
        };

这是一个working typescript playground

第二种方法 基于您上次的尝试

当我尝试类似的操作时:

interface iObject { [key: string]: { ... }[] | string; }

    interface IDictionary<T> {
        [key: string]: T;
    }

    var obj: IDictionary<any> = {
            token: "asdf123",
            "path/to/somewhere": [{
                data: 'something'
            }]
        };

TS2339: Property 'push' does not exist on type 'string | { ... }[]'. Property 'push' does not exist on type 'string'.

第三种方法

你可以像这样输入你的 obj

interface iObject {
  [key: string]: Array<object> | string;
}

self.obj = {
            token: self.tokenVal
        };
        self.obj[self.route] = [{ "routeName": self.routeName }];

        (<Array<object>>self.obj[self.route]).push({
            "zip": "123456"
        });

另请参阅Advanced Types

您可以为此使用交集类型:

type iObject = {
    token: string
} & {
    [key: string]: { ... }[]
}

但请注意,索引类型并不限制您使用一种 属性。您可能需要的是经正则表达式验证的密钥,即 might come in the future.