打字稿在索引签名后推断原始对象类型

Question

假设我有对象：

const styles = { product: { color: 'blue' } };

由此推断出对象类型，我可以毫无问题地访问foo.bar.baz。

但是，如果我想要类型检查，我需要类似的东西：

import type CSS from 'csstype';
type StyleSheet = Record<string,CSS.Properties>;

const styles:StyleSheet = {
    product: { color: 'blue' }
};

上面的内容是有效的，但是，当访问 styles 时，我会得到定义的 styles.whatever.color 或 styles.product.margin，这是不希望的。

考虑到这一点，Typescript 中是否有任何方法可以在输入对象后推断其原始类型，以便我可以访问其真实属性，如下所示：

const styles:StyleSheet = { product: { color: 'blue' } }; // typed as 'StyleSheet' so I get type-checking
styles.whatever.margin // TS thinks this is valid because of the index signature;

const original = styles as OriginalObject; // infer original type so only real properties are accessible
original.whatever // invalid (expected)
original.product.color // valid

export default original;

更新

回复@jcalx的：

Playground link

Answer 1

您想检查styles 是否为StyleSheet 而没有扩大 styles 到StyleSheet 并让编译器忘记它的各个属性。

---

做到这一点的一种方法是让编译器推断 styles 的类型，并相信 TypeScript 的结构类型系统会在你在它不喜欢的地方使用它时抱怨。也就是说，假设您有一些需要StyleSheet 的功能：

function someFunctionThatNeedsAStyleSheet(s: StyleSheet) { }

您可以只制作一些未注释的对象：

const styles = { product: { color: 'gray' } };
const badStyles = { product: { colour: 'grey' } };

编译器会记住它们的属性：

styles.whatever.margin // error;
styles.product.color // okay

稍后，当您将它们传递给函数时，它会接受它或警告您：

someFunctionThatNeedsAStyleSheet(styles); // okay
someFunctionThatNeedsAStyleSheet(badStyles); // error!
// ----------------------------> ~~~~~~~~~
// Type '{ colour: string; }' has no properties in common 
// with type 'Properties<string | 0>' 

你做在这里进行类型检查。但当然，它不在您声明 styles 变量的同一个地方。

---

如果您想在创建时立即捕获错误的StyleSheet，您可以使用上述类型检查功能的想法，通过制作这样的辅助函数：

const asStyleSheet = <T extends StyleSheet>(t: T) => t;

函数asStyleSheet() 是一个通用的恒等函数：它返回其输入，与输入具有相同的类型。但是泛型类型是constrained 到StyleSheet，所以如果你传入一个坏的，你会得到一个错误。像这样：

const styles = asStyleSheet({ product: { color: 'gray' } }); // okay
const badStyles = asStyleSheet({ product: { colour: 'grey' } }) // error!
// ---------------------------------------> ~~~~~~~~~~~~~~
// 'colour' does not exist in type 'Properties<string | 0>'. 
// Did you mean to write 'color' ? 

通过使用asStyleSheet()，您正在检查styles 的类型而不更改它； asStyleSheet() 的输出与输入的类型相同。所以编译器会记住它的属性：

styles.whatever.margin // error;
styles.product.color // okay

看起来不错。

---

好的，希望对您有所帮助；祝你好运！

Playground link to code