TypeScript-typeinformasjonsproblem med strengliteral

I en React Native-applikasjon har jeg stilen

const styles = StyleSheet.create({
    text: {
        textAlign: "center"
    },
})

brukt i <Text style={styles.text} />, men tsc-kompilatoren gir følgende feil:

Types of property 'textAlign' are incompatible.
Type 'string' is not assignable to type '"center" | "auto" | "left" | "right"'.

Definisjonen av TextStyle i @types/react-native inkluderer:

export interface TextStyle extends TextStyleIOS, TextStyleAndroid, 
ViewStyle {
    // ...
    textAlign?: "auto" | "left" | "right" | "center"
    // ...
}

Hvorfor klager kompilatoren på inkompatibilitet? Det ser ut til at den antyder at typen til textAlign er den for generelle string i stedet for å sjekke den faktiske verdien ("center").

Jeg vet at jeg kan bruke en as TextStyle for å unngå problemet, men jeg vil gjerne vite hvorfor det skjer og om jeg bør sende inn en sak mot kompilatoren.

Svar #1

Hvis du bruker Typescript 3.4+ kan du bruke as const-notasjonen:

export const locationInput = {
  textAlign: 'center' as const
};

For mer informasjon, sjekk dokumentasjonen her.

Svar #2

Dette burde fungere:

const styles = StyleSheet.create({
    text: {
        textAlign: "center" as "center"
    },
})

Vanligvis ville TypeScript typisere textAlign som string, men siden det ikke bare kan være en hvilken som helst streng, kan du kaste det til en mer spesifikk type.

Relaterte artikler