2016-06-19 26 views
6

Dize değişmezlerinin eşleşmediğini söyleyen TypeScript ile ilgili çok garip bir hata alıyorum. (Typescript v1.8)TypeScript React Yerel Dize değişmez atama hatası

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

hatası: src \ istemci \ index.ios.tsx (19,15): hata TS2322: Tür '{fontSize: numarası; textAlign: string; marj: sayı; } 'TextStyle' yazmak için atanamaz. Özellik 'textAlign' özellik tipleri uyumsuz. Türü 'string', '' auto '' türüne atanabilir değil | "sol" | "doğru" | "Merkez"'. Tür 'string', '' center '' yazacak şekilde atanamaz.

Doğru yazımları yükledim. Aşağıdakilerin TypeScript'te çalışmadığı görülmektedir.

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

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

x = y; 

Kaynak:

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

Sebep:

tip anlaşılmaktadır declaraiton dayalı etmek https://blog.lopezjuri.com/2015/12/30/react-native--typescript/

+0

Bu sorunu da Typescript 2.1.x ile birlikte yaşıyorum. – Learner

cevap

5

ne yazık ki sen tipini ortaya koymak zorundalar. Bir dizgi ben oyuna geç kaldım biliyorum ama sadece aynı konuda rastladım ve bu çözümü tercih

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

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

çünkü ('herhangi bir' o yana kullanarak nefret (yerine dize hazır bilgi) string olarak anlaşılmaktadır bazen tek seçenek olmasına rağmen tür), typescript amacı yendi:

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

biz yapı hatasına oluşturmak için stilleri çözülürse ne tip StyleSheet.create söylersem.

+3

"Kapsayıcı: {...}" tanımını izleyen React.ViewStyle'ı daha kolay tanımlamak için daha kolay ve temiz buluyorum. Bu, bunu hoş geldiniz tanımından ayıran virmadan hemen önce. "Sonra React.TextStyle olarak" ekleyin. welcome: {...} "definition. Bu şekilde, yeni dosya eklemek için başka biri giderse, stili yazmanızın gerekliliği belirgin olacaktır. –