2016-06-19 21 views
6

Ho ricevuto un errore molto strano in merito a TypeScript che mi dice che le stringhe letterali non corrispondono. (Dattiloscritto v1.8)Errore di scrittura letterale React Native String di tipo

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

Errore: src \ client \ index.ios.tsx (19,15): l'errore TS2322: Tipo '{fontSize: il numero; textAlign: string; margine: numero; } 'non è assegnabile al tipo' TextStyle '. I tipi di proprietà "textAlign" non sono compatibili. Il tipo 'stringa' non è assegnabile al tipo '"auto" | "sinistra" | "giusto" | "centro"'. Il tipo 'stringa' non è assegnabile al tipo '"centro"'.

Ho installato i tipi corretti. Sembra che quanto segue non funzioni in TypeScript.

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

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

x = y; 

Fonte: https://blog.lopezjuri.com/2015/12/30/react-native--typescript/

+0

Ho questo problema con Typescript 2.1.x pure. – Learner

risposta

5

purtroppo è necessario affermare il tipo:

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

Motivo:

Il tipo è dedotto per basata su declaraiton. Una stringa letterale è dedotto come string (invece di stringa letterale) perché

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

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

So di essere in ritardo al gioco, ma appena incontrato lo stesso problema e preferisco questa soluzione (odio usando 'qualsiasi' quanto tipo di sconfigge lo scopo di tipografico, anche se a volte è l'unica opzione):

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

Se diciamo StyleSheet.create cosa tipo di stili per creare l'errore di generazione è stato risolto.

+3

Trovo più semplice e più pulito aggiungere "come React.ViewStyle seguendo la definizione" container: {...} ", appena prima della virgola che la separa dalla definizione di benvenuto, quindi aggiungere" as React.TextStyle "dopo" benvenuto: {...} "definizione In questo modo, se qualcun altro va ad aggiungere il nuovo file, la necessità di aggiungere la digitazione lo stile sarà evidente. –