TypeScript React Native String 文字赋值错误

Question

关于 TypeScript，我遇到了一个非常奇怪的错误，告诉我字符串文字不匹配。 (TypeScript v1.8)

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  }
});

export class App extends Component<any, any> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

错误：

src\client\index.ios.tsx(19,15): error TS2322: Type '{ fontSize: number; textAlign: string; margin: number; }' is not assignable to type 'TextStyle'.
  Types of property 'textAlign' are incompatible.
    Type 'string' is not assignable to type '"auto" | "left" | "right" | "center"'.
      Type 'string' is not assignable to type '"center"'.

我安装了正确的类型。似乎以下内容在 TypeScript 中不起作用。

interface Test {
  a: "p" | "q"
}

let x : Test;
let y = {
  a: "p"
}

x = y;

来源：https://blog.lopezjuri.com/2015/12/30/react-native--typescript/

Answer 1

遗憾的是你需要断言类型：

<Text style={styles.welcome as any}>

原因：

类型是根据声明推断的。字符串文字被推断为string（而不是字符串文字），因为

let foo = "asdf"; // foo: string

// Its a string becuase: 
foo = "something else"; // Would be strange if this would error

Answer 2

我知道我迟到了，但只是遇到了同样的问题并且更喜欢这个解决方案（讨厌使用 'any'，因为它有点违背了 Typescript 的目的，尽管有时它是唯一的选择）：

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

interface Props { 
}

interface State {
}

interface Style { 
  container: React.ViewStyle,
  welcome: React.TextStyle
}

const styles = StyleSheet.create<Style>({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
  }
});

export class App extends Component<Props, State> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

如果我们告诉 StyleSheet.create 什么type 样式来创建构建错误就解决了。