Typescript 强类型键值对声明

Posted 2023-03-13

【中文标题】Typescript 强类型键值对声明

【英文标题】：Typescript strongly typed key value pair declaration

【发布时间】：2016-01-13 11:25:24

【问题描述】：

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

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

key 是 number，value 是 function，你知道如何在 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。两者不完全匹配