ES6箭头函数与TypeScript

Question

ES6箭头函数与TypeScript

3

我对TypeScript非常陌生，不知道如何使其工作。

查了一些资料，像是解构（destructuring），但仍然不能正确运行。

import React from "react";
import { StyleSheet, Text, View } from "react-native";

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
};

const App = (style: any): {} => {
  const { container } = styles;
  return (
    <View style={container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
};

export default App;

下面是错误信息：

(JSX attribute) style?: StyleProp<ViewStyle>
Type '{ flex: number; backgroundColor: string; alignItems: string; justifyContent: string; }' is not assignable to type 'StyleProp<ViewStyle>'.
  Type '{ flex: number; backgroundColor: string; alignItems: string; justifyContent: string; }' is not assignable to type 'ViewStyle'.
    Types of property 'alignItems' are incompatible.
      Type 'string' is not assignable to type 'FlexAlignType'.ts(2322)
index.d.ts(2206, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps> & Readonly<{ children?: ReactNode; }>'

- Dhaval Jardosh

刚刚添加了错误信息。 - Dhaval Jardosh

3个回答

1

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
};

const App: React.SFC = () => {
   return 
      <View style={styles.container}>
         <Text>Open up App.tsx to start working on your app!</Text>
      </View>
   )
}

React默认不支持Typescript，因此请确保在您的package.json中安装了@typescript/react

- Ben Carp

@types/react 和 @typescript/react，它们是同一件事吗？ - Dhaval Jardosh

@types/react 为 React 的 API 添加了所有 TypeScript 类型定义。例如 - React.FC（函数式组件）， - Ben Carp

1

我认为这应该也能工作，我需要更多地了解。非常感谢你的帮助，Ben。 - Dhaval Jardosh

0

你应该添加你的样式变量的类型

import React from "react";
import { StyleSheet, Text, View } from "react-native";

type Style = {
  [key: string]: Object;
};

type ViewStyles = {
  container: Style;
};

const styles: ViewStyles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
};

const App: React.SFC = () => {
  const { container }: Style = styles;
  return (
    <View style={container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
};

export default App;

- Aziz.G

1

这难道不会使一切都变成无类型吗？ - Alex

那怎么样？一切都是无类型的吗？ - Aziz.G

容器将是类型为 Object 的对象，基本上是具有任何属性的对象。 - Alex

当然你可以添加另一种类型到类型中，但是里面有CSS属性，你要全部写出来吗？ - Aziz.G

3

请指定合适的类型，例如 ViewStyle。 - Alex

让我们在聊天室里继续这个讨论。 - Aziz.G

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex · Accepted Answer

明确指定“容器”的类型。你可以使用来自react-native包的通用ViewStyle类型：

import React from "react";
import { StyleSheet, Text, View, ViewStyle } from "react-native";

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  } as ViewStyle
};

const App = () => {
  const { container } = styles;
  return (
    <View style={container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
};

export default App;