TypeScript React本機字符串文字賦值錯誤

Question

我一直在得到一個關於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 \客戶\ index.ios.tsx（19,15）：錯誤TS2322：類型「{fontSize的：號碼; textAlign：string;保證金：數量; }'不可分配爲鍵入'TextStyle'。 屬性'textAlign'的類型不兼容。 類型'字符串'不可分配爲''auto'| 「離開」| 「正確」| 「中央」'。 類型'字符串'不可分配爲鍵入''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}> 

原因：

類型推斷基於declaraiton。字符串文字被推斷爲string（而不是字符串文字），因爲

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

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

Answer 2

我知道我遲到了比賽，但對面的同樣的問題來了，更喜歡這種解決方案（討厭使用「任意」，因爲它那種失敗打字稿的目的，雖然有時它是唯一的選擇）：

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什麼類型的樣式創建生成錯誤得到解決。