如何解决创建接口/类型别名,其中包含来自联合类型的详尽属性列表?
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var prezzo = document.getElementById("demoprezzo");
output.innerHTML = slider.value; // display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value;
// if (slider = 12) { I can't go on
}
// This is the function to import data from acf plugin. It works
//<?PHP
//$variable = get_field('prezzo');
//echo $variable
//?>
现在我想要一个接口/类型,它应该具有所有这些属性(穷尽),例如:
<h1>Durata</h1>
<div class="slidecontainer">
<input type="range" min="12" max="36" value="12" step="12" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
<p>Prezzo: <span id="demoprezzo"></span></p>
</div>
我可以从const ACTION_NAMES = ["ACTION_1","ACTION_1","ACTION_3"] as const;
// I'M USING "as const" SO I CAN GET A UNION TYPE OUT OF IT
type ACTION_NAMES = typeof ACTION_NAMES[number];
// THIS IS "ACTION_1" | "ACTION_2" | "ACTION_3"
type SOME_TYPE = {
[key: string]: unkNown
}
interface ACTION_PAYLOADS { // Could ALSO USE type alias HERE
ACTION_1: {propA: string,propB: number},ACTION_2: {propC: boolean},ACTION_3: {propD: string}
}
接口开始使用任何类型,以便Typescript确保所有extend
属性都存在,并且所有值都为{{1 }} ACTION_PAYLOADS
类型?
这个想法是,如果我缺少ACTION_1 2 and 3
属性之一,并且其中一个值不是extend
类型,Typescript在理想情况下也应该抱怨。另外,它也不允许我添加任何其他属性,例如SOME_TYPE
。
感觉就像我在检查类型。但是我不能使用某些映射类型吗?有没有办法做到这一点?
解决方法
如果您的界面不符合所需的约束,则可以使用一些帮助程序类型来触发编译器错误。看起来像这样:
type Extends<T extends U,U> = void;
type MutuallyExtends<T extends U,U extends V,V = T> = void;
type CheckKeysOfActionPayloads =
MutuallyExtends<keyof ACTION_PAYLOADS,ACTION_NAMES>; // ok
type CheckValuesOfActionPayloads =
Extends<ACTION_PAYLOADS[ACTION_NAMES],SOME_TYPE>; // ok
在这里,CheckKeysOfActionPayloads
仅在ACTION_PAYLOADS
和类型ACTION_NAMES
的键相互延伸时才编译...对于文字的并集,这意味着它们需要相同。
并且只有CheckValuesOfActionPayload
(在ACTION_PAYLOADS
键处的值)可分配给ACTION_NAMES
的情况下,SOME_TYPE
才会编译。
为了具体起见,我将SOME_TYPE
更改为可能会失败的内容,同时还要确保ACTION_NAMES
中包含"ACTION_2"
(与示例代码相对) :
const ACTION_NAMES = ["ACTION_1","ACTION_2","ACTION_3"] as const;
type ACTION_NAMES = typeof ACTION_NAMES[number];
type SOME_TYPE = {
[key: string]: string | number | boolean
}
让我们看看如果弄乱ACTION_PAYLOADS
会发生什么。首先,如果我们错过钥匙:
interface ACTION_PAYLOADS {
ACTION_1: { propA: string,propB: number },// where's ACTION_2?
ACTION_3: { propD: string }
}
type CheckKeysOfActionPayloads =
MutuallyExtends<keyof ACTION_PAYLOADS,ACTION_NAMES>; // error!
// ----------------------------------> ~~~~~~~~~~~~
// Type "ACTION_2" is not assignable to type "ACTION_1" | "ACTION_3"
或者如果我们有额外的钥匙:
interface ACTION_PAYLOADS {
ACTION_1: { propA: string,ACTION_2: { propC: boolean },ACTION_3: { propD: string },ACTION_4: { propE: number } // what's this?
}
type CheckKeysOfActionPayloads =
MutuallyExtends<keyof ACTION_PAYLOADS,ACTION_NAMES>; // error!
// ---------------> ~~~~~~~~~~~~~~~~~~~~~
// Type "ACTION_4" is not assignable to type "ACTION_1" | "ACTION_2" | "ACTION_3"
最后,如果键正确但值错误:
interface ACTION_PAYLOADS {
ACTION_1: { propA: string,ACTION_2: { propC: Date },// what's this?
ACTION_3: { propD: string }
}
type CheckValuesOfActionPayloads =
Extends<ACTION_PAYLOADS[ACTION_NAMES],SOME_TYPE>; // error!
// -------> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Type 'Date' is not assignable to type 'string | number | boolean'
您会看到在所有这些情况下,您都会得到一个错误,希望可以用来帮助您修复代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。