带有 Typescript 的 ES6 箭头函数答案

【问题标题】：ES6 Arrow Function with Typescript带有 Typescript 的 ES6 箭头函数
【发布时间】：2019-12-17 13:48:06
【问题描述】：

Typescript 非常新，我不确定如何进行这项工作。

做过一些研究，比如解构，但还是没能做到。

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; }>'

【问题讨论】：

刚刚添加了错误信息。

标签： javascript reactjs typescript react-native

【解决方案1】：

明确指定“容器”的类型。您可以从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;

【讨论】：

需要更多地习惯 ViewStyles 和其他 RN 开箱即用的东西，但这很有效。谢谢。
其实是TypeScript的类型推断问题。它推断“alignItems”的类型是“string”，但 React 需要字符串文字类型。您可以在此处查看更多详细信息：github.com/Microsoft/TypeScript/issues/9336
我对这个答案有一些担忧。 1. App接受了一个名为style的参数，但实际上并没有使用（使用的是局部变量styles）。 2. App 的返回类型为空对象。实际上返回类型是 ReactNode。我怀疑当前的实现不适用于 Typescript。
@BenCarp 你说得对，我只是展示了如何解决作者遇到的问题，但没有解决一些问题。它仍然可以在 Typescript 中使用。我进行了修改以修复这些问题。

【解决方案2】：

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

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;

【讨论】：

这不是让所有东西都没有类型吗？
怎么样？一切都没有打字？
容器的类型为Object，基本上是具有任何属性的对象
当然你可以添加另一种类型来输入，但是里面有 CSS 属性你要全部写出来吗？
指定正确的类型，例如ViewStyle

【解决方案3】：

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

【讨论】：

@types/react 和 @typescript/react，它们是同一个东西吗？
@types/react 为 React 的 API 添加了所有 typescript 类型定义。例如 - React.FC（功能组件），
我认为它应该也可以工作，我需要了解更多相关信息。非常感谢 Ben 的帮助。