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中的textAlign）

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。

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

1 个答案:

提取变量

别名功能