【问题标题】：Typescript strongly typed key value pair declarationTypescript 强类型键值对声明
【发布时间】：2016-01-13 11:25:24
【问题描述】：

我想为这样的 json 结构声明一个 TypeScript 接口：

{ 
404: function() { alert( "page not found" ); }, 
400 : function() {...} 
}

key 是 number，value 是 function，你知道如何在 TypeScript 中为这样的数据约束声明一个接口吗？

【问题讨论】：

标签： javascript json typescript

【解决方案1】：

索引器

如果您使用[] 键访问，您可以在 JavaScript 中使用数字作为键...

让我们从您想要的代码开始...

var x = { 
    404: function() { alert( "page not found" ); }, 
    400 : function() { alert("...");} 
};

x.404();

上面的最后一条语句（对404 函数的调用）将与Missing ; before statement 出错，因此您必须使用...

x[404]();

虽然这仍然会让你在 TypeScript 中进行类型推断（var a = x[404]; - a 将是类型 () => void） - 它不会给你很好的自动完成功能。

接口：

interface HttpCodeAlerts {
   [index: number]: () => void;
}

自动完成

通常在 JavaScript 和 TypeScript 中，建议您使用更安全的名称。简单来说，您需要以字母开头：

var x = { 
    E_404: function() { alert( "page not found" ); }, 
    E_400 : function() { alert("...");} 
};

x.E_404();

接口：

interface HttpCodeAlerts {
    E_400: () => void;
    E_404: () => void;
}

框架风格

在大多数语言中，错误的用法更像是这样...

class HttpCode { 
    static OK = { responseCode: 200, reasonPhrase: 'Okay' };
    static NotFound = { responseCode: 404, reasonPhrase: 'Not Found' };
};

alert(HttpCode.NotFound.reasonPhrase);

【讨论】：

【解决方案2】：

见TypeScript Objects as Dictionary types as in C#

var map: { [code: number]: ()=>void; } = { };
//usage
map[404] = ()=> { alert("page not found"); }; 
map[400] = ()=> { alert("..."); };
map["some"] = "some"; //compile error

//all in once
var map: { [code: number]: ()=>void; } = {
   404: () => { alert( "page not found" ); }, 
   400: () => { alert( "..." )} 
};

【讨论】：

【解决方案3】：

这可能是答案之一：-

export interface clientSideFunction{
    [code: number]: ()=>void;
}

通过使用以下方式导入此接口：-

import {clientSideFunction} from 'filePath';

【讨论】：

【解决方案4】：

它不是有效的 JSON 结构，因此不是有效的 JavaScript（也不是 TypeScript）。对象键应该是字符串。根据this answer，数字始终转换为字符串。

因此，我建议在 JSON 中使用显式字符串作为键。然后你可以像这样在 TypeScript 中建模：

interface ICodes {
    "404": () => void;
    [code: string]: () => void; // defines any string key to be function
}

var codes: ICodes = {
    "404": function () { alert("page not found"); },
    "400": function () {}
};

// call the function for code 404
codes["404"]();

【讨论】：

不是有效的 JSON，但它是有效的 JS。两者不完全匹配