Javascript 带有Typescript的ES6箭头函数

非常新的打字脚本， 我不知道该怎么做

做了一些类似于解构的研究，但仍然无法正确进行

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;

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
常量样式={
容器：{
弹性：1，
背景颜色：“fff”，
对齐项目：“中心”，
为内容辩护：“中心”
}
};
const-App=（样式：any）：{}=>{
const{container}=样式；
返回(
打开App.tsx开始使用你的应用程序！
);
};
导出默认应用程序；

错误如下：

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

（JSX属性）样式？：StyleProp
类型“{flex:number；backgroundColor:string；alignItems:string；justifyContent:string；}”不能分配给类型“StyleProp”。
类型“{flex:number；backgroundColor:string；alignItems:string；justifyContent:string；}”不能分配给类型“ViewStyle”。
属性“alignItems”的类型不兼容。
类型“string”不可分配给类型“FlexAlignType”。ts（2322）
index.d.ts（2206，5）：预期的类型来自属性'style'，该属性在类型'IntrinsicAttributes&IntrinsicClassAttributes&Readonly&Readonly'上声明

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

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;

从“React”导入React；
从“react native”导入{样式表、文本、视图}；
类型样式={
[键：字符串]：对象；
};
类型ViewStyles={
容器：样式；
};
常量样式：视图样式={
容器：{
弹性：1，
背景颜色：“fff”，
对齐项目：“中心”，
为内容辩护：“中心”
}
};
const-App:React.SFC=（）=>{
const{container}:Style=样式；
返回(
打开App.tsx开始使用你的应用程序！
);
};
导出默认应用程序；

常量样式={
容器：{
弹性：1，
背景颜色：“fff”，
对齐项目：“中心”，
为内容辩护：“中心”
}
};
const-App:React.SFC=（）=>{
返回
打开App.tsx开始使用你的应用程序！
)
}

• React默认情况下不支持Typescript，因此请确保在package.json中安装了@Typescript/React

明确指定“容器”的类型。您可以从

react native

软件包中使用通用

ViewStyle

类型：

从“React”导入React；
从“react native”导入{样式表、文本、视图、视图样式}；
常量样式={
容器：{
弹性：1，
背景颜色：“fff”，
对齐项目：“中心”，
为内容辩护：“中心”
}作为视图样式
};
常量应用=（）=>{
const{container}=样式；
返回(
打开App.tsx开始使用你的应用程序！
);
};
导出默认应用程序；

刚刚添加了错误消息。这不是使所有内容都不类型化吗？这是怎么回事？所有未类型化的内容？容器将是类型

对象

，基本上是具有任何属性的对象。当然，您可以添加另一个类型到该类型，但里面有CSS属性，您要将它们全部写入？指定适当的类型，如

视图样式

，例如

@types/react

和

@typescript/react

，它们是一样的吗？@types/react为react的API添加了所有类型脚本类型定义。例如-React.FC（Functional component），我认为它也应该可以工作，我需要了解更多这方面的知识。非常感谢Ben的帮助。我们需要更多地习惯

ViewStyles

和其他现成的东西，但这很管用。谢谢。实际上这是TypeScript的类型推断问题。它推断“alignItems”的类型是“string”，但React需要字符串文本类型。你可以在这里查看更多细节：我对这个答案有一些担心。1.应用程序接受名为style的参数，但实际上根本不使用它（使用的是局部变量styles）。2.返回的应用程序类型为空对象。实际上，返回类型是ReactNode。我怀疑当前的实现不适用于Typescript。@BenCarp您是对的，我只是演示了如何解决作者遇到的问题，但没有解决其中的一些问题。但它仍然可以在Typescript中工作。我做了一个编辑来修复这些。

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>
   )
}