TypeScript React Natywny błąd przypisania literowego String

Question

Dostaję bardzo dziwny błąd w odniesieniu do TypeScript, mówiąc, że literały łańcuchowe nie pasują do siebie. (Maszynopis 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> 
    ); 
    } 
} 

Błąd: src \ client \ index.ios.tsx (19,15): error TS2322: Typ „{fontSize: numer; textAlign: string; margin: liczba; } "nie można przypisać" TextStyle ". Typy właściwości "textAlign" są niezgodne. Typ 'string' nie można przypisać '' auto "| "lewo" | "prawo" | "Centrum"'. Typ 'string' nie można przypisać do "" center ".

Zainstalowałem poprawne wpisy. Wygląda na to, że poniższe nie działa w TypeScript.

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

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

x = y; 

Źródło: https://blog.lopezjuri.com/2015/12/30/react-native--typescript/

Answer 1

smutkiem trzeba stwierdzić, typ:

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

Powód:

Typ jest wywnioskować aby w oparciu o declaraiton. Łańcuch znaków jest wywnioskować jak string (zamiast napisu dosłownym), ponieważ

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

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

Answer 2

Wiem, że późno do gry, ale po prostu natknął się na tym samym numerze i wolą takie rozwiązanie (nienawidzę używając „każdy”, ponieważ rodzaj pokonuje cel maszynopis, chociaż czasami jest to jedyna opcja):

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

Jeśli mówimy StyleSheet.create co typ stylów tworzenia błąd kompilacji został rozwiązany.