[英]Getting type of Object's value from key
我创建了一个数据。
type PenType = {
color: string
}
type PencilType = {
darkness: string
}
const data: {
pen: PenType,
pencil: PencilType
} = {
pen: {
color: "blue",
},
pencil: {
darkness: "2B"
}
};
type DataKeys = keyof typeof data;
我现在有 Object 个带有键和值的数据。 我确实创建了一个 function 来从数据中获取价值。
type MyReturnType = PenType | PencilType;
const getMyData = (keyToGet: DataKeys): MyReturnType => {
return data[keyToGet];
}
const finalData = getMyData('pen');
console.log(finalData);
这完全没问题。 但问题是,我想在我的finalData
中获得正确的类型。 因为我尝试访问笔,所以我希望返回类型为PenType
,而不是PenType | PencilType
PenType | PencilType
有什么办法可以做到这一点?
沙盒链接: https://codesandbox.io/s/typescript-playground-export-forked-hnle7p?file=/index.ts
如果您显式地将返回类型注释为PenType | PencilType
PenType | PencilType
,那么这就是 function 无论如何都会返回的内容。
相反,如果您希望编译器跟踪作为keyToGet
传入的值的文字类型,则需要getMyData()
在该类型中是通用的,具有通用类型参数,如下所示:
const getMyData = <K extends DataKeys>(keyToGet: K) => {
return data[keyToGet];
}
在这里, getMyData
在K
中是通用的,一个类型参数被限制为可分配给DataKeys
,以及keytoGet
function 参数的类型。
我没有明确注释返回类型。 相反,执行索引操作data[keyToGet]
并返回它意味着返回的类型被编译器推断为通用索引访问类型:
/* {
pen: PenType;
pencil: PencilType;
}[K] */
因此,当您调用getMyData('pen')
时, K
被推断为"pen"
,然后返回类型将为{pen: PenType; pencil: PencilType}["pen"]
{pen: PenType; pencil: PencilType}["pen"]
,一种计算结果为PenType
的索引访问类型:
const finalData = getMyData('pen');
// const finalData: PenType
console.log(finalData.color.toUpperCase()); // "BLUE"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.