样式检查仅适用于内联，不适用于样式表

Question

我刚刚开始使用 Typescript 和一个新的 React Native 项目。我正在研究类型检查样式(以下 https://medium.com/@zvona/stylesheets-in-react-native-with-typescript-revisited-6b4ba0a899d2(，但我没有收到样式表的类型警告，只有内联。

这不会给出任何警告

import { View, Text, StyleSheet, ViewStyle } from 'react-native';
import AppStyles from '../../AppStyles';
interface Styles {
root: ViewStyle;
}
const styles = StyleSheet.create<Styles>({
root: {
textAlign: 'left',
backgroundColor: 'gray',
},
});
interface Props {}
const LandingScreen: React.FC<Props> = () => {
return (
<View style={styles.root}>
<Text>Welcome to the landing screen</Text>
</View>
);
};

虽然这按照我想要的方式工作(VSCode 警告我有关 ViewStyle 中的文本对齐(

import { View, Text } from 'react-native';
interface Props {}
const LandingScreen: React.FC<Props> = () => {
return (
<View style={{ textAlign: 'left', backgroundColor: 'gray' }}>
<Text>Welcome to the landing screen</Text>
</View>
);
};

我看不出我做错了什么。这是否需要在VSCode或其他东西中进行更多配置？

Answer 1

发生这种情况是因为StyleSheet.create类型的定义方式：

export function create<T extends NamedStyles<T> | NamedStyles<any>>(styles: T | NamedStyles<T>): T;

在这里我们可以看到参数styles可能具有T或NamedStyles<T>的类型。NamedStyles定义为：

type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };

您传入的对象与T不匹配(在本例中为Styles(，但它确实匹配NamedStyles<T>NamedStyles<Styles>因为实际上意味着：

NamedStyles<Styles> = { root: ViewStyle | TextStyle | ImageStyle }

---

除了尝试更改类型之外，我还看到了两种解决此问题的解决方案......

提取变量

如果将样式提取到具有正确类型的单独变量中，TypeScript 将对其进行检查：

const stylesObject: Styles = {
root: {
textAlign: 'left',
backgroundColor: 'gray',
},
};
const styles = StyleSheet.create<Styles>(stylesObject);

别名函数

您还可以使用不同的类型创建StyleSheet.create函数的别名：

type CreateStyles = <T extends NamedStyles<T>>(styles: T) => T;
export const createStyles: CreateStyles = StyleSheet.create;

然后在所有项目中导入和使用createStyles而不是StyleSheet.create。