是否可以使用TypeScript类型的参数和映射的返回值来制作localStorage包装器?

Question

我试图用TS模式为localStorage构建一个TS包装器，该模式定义了localStorage中所有可能的值。问题是，我不知道如何键入返回值，以便它从模式映射到适当的类型:例如，如果我想调用LocalStorage.get("some_number")，我希望返回类型是数字类型。这在TS中可能吗?

Keys类型的参数值对于输入来说工作得非常好!

type Values = LocalStorageSchema[Keys]返回值的联合类型，这不是我正在寻找的。

似乎也不可能在get函数中使用变量键来进行类型缩小…

我还研究了泛型类型:LocalStorage.get(…)，但我认为这有点破坏键入返回值的全部意义。

有人有什么想法吗?谢谢!

type LocalStorageSchema = {
token: string;
some_string: string;
some_number: number;
};
type Keys = keyof LocalStorageSchema;
// type Values = LocalStorageSchema[Keys]; ???
export const LocalStorage = {
get(key: Keys): any {
const data = window.localStorage.getItem(key);
//type ReturnType = ???
if (data !== null) {
return data;
}
console.error(`localStorage missing object with key ${key}`);
return null;
},
set(key: Keys, value: any) {
window.localStorage.setItem(key, value);
},
remove(key: Keys) {
window.localStorage.removeItem(key);
},
clear() {
window.localStorage.clear();
},
};

Answer 1

使用泛型返回键的正确类型!

type LocalStorageSchema = {
token: string;
some_string: string;
some_number: number;
};
type Keys = keyof LocalStorageSchema;
export const LocalStorage = {
get<T extends Keys>(key: T): LocalStorageSchema[T] | null { // Return type will depend on the key
const data = window.localStorage.getItem(key);
//type ReturnType = ???
if (data !== null) {
return data as LocalStorageSchema[T];
}
console.error(`localStorage missing object with key ${key}`);
return null;
},
set<T extends Keys>(key: T, value: LocalStorageSchema[T]) {
window.localStorage.setItem(key, value as any);
},
remove(key: Keys) {
window.localStorage.removeItem(key);
},
clear() {
window.localStorage.clear();
},
};
const a = LocalStorage.get('token'); // string | null

游乐场

Answer 2

您可以在此链接中使用generic。还有一些错误需要修正。链接如何处理空值。这取决于你，所以我没有修理它。