Typescript: TS2322: Le type 'chaîne' ne peut pas être affecté au type '"absolu" | "relatif" | indéfini'

Créé le 9 oct. 2016 · 3Commentaires · Source: microsoft/TypeScript

Version TypeScript: 2.1.0-dev.20161008

Composant ReactNative minimal pour illustrer le problème:

import React, { Component } from 'react';
import { StyleSheet, Text } from 'react-native';

export class Sample extends Component<{}, {}> {
    render() {
        return (
            <Text style={styles.text}>Hello TypeScript</Text> // error on styles, see below
        );
    }
}

const styles = StyleSheet.create({
    text: {
        position: 'absolute', // cause of the error: string instead of 'absolute'
        top: 0,
        left: 0     
    }
});

Erreur:

error TS2322: Type '{ position: string; top: number; left: number; }' is not assignable to type 'TextStyle | undefined'.
  Type '{ position: string; top: number; left: number; }' is not assignable to type 'TextStyle'.
    Types of property 'position' are incompatible.
      Type 'string' is not assignable to type '"absolute" | "relative" | undefined'.

J'aime le fait que la déclaration réactive n'utilise pas de chaîne, mais n'autorise que l'ensemble des chaînes possibles.

Existe-t-il un moyen de laisser TypeScript déduire cela pour taper «absolu»?
Peut-être que si je pouvais marquer ce champ position comme étant en lecture seule, cela pourrait déduire de taper «absolu».

Lié à # 10676?

Question

Source

jovdb

👍9

Commentaire le plus utile

Je n'aime pas le casting et l'empêcher autant que possible, mais voici des solutions de contournement:

const styles = StyleSheet.create({
    text: {
        position: 'absolute',
        top: 0,
        left: 0     
    } as React.TextStyle // cast to existing interface
});

Lorsqu'il n'y a pas d'interface exportée (ici: TextStyle), on ne peut lancer que le champ:

const styles = StyleSheet.create({
    text: {
        position: 'absolute' as 'absolute', // cast string to type 'absolute'
        top: 0,
        left: 0     
    }
});

jovdb le 9 oct. 2016

👍24 😕9 🎉8 👎4 ❤3 😄1

Tous les 3 commentaires

Je n'aime pas le casting et l'empêcher autant que possible, mais voici des solutions de contournement:

const styles = StyleSheet.create({
    text: {
        position: 'absolute',
        top: 0,
        left: 0     
    } as React.TextStyle // cast to existing interface
});

Lorsqu'il n'y a pas d'interface exportée (ici: TextStyle), on ne peut lancer que le champ:

const styles = StyleSheet.create({
    text: {
        position: 'absolute' as 'absolute', // cast string to type 'absolute'
        top: 0,
        left: 0     
    }
});

jovdb le 9 oct. 2016

👍24 😕9 🎉8 👎4 ❤3 😄1

Ceci est lié à https://github.com/Microsoft/TypeScript/pull/19966.