Typescript: TS2322: Type 'string' is not assignable to type '"absolute" | "relative" | undefined'

Created on 9 Oct 2016 · 3Comments · Source: microsoft/TypeScript

TypeScript Version: 2.1.0-dev.20161008

Minimal ReactNative Component to illustrate the problem:

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

Error:

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'.

I like it that the reactnative declaration doesn't use string, but only allows the set of possible strings.

Is there any way to let TypeScript infer this to type 'absolute'?
Maybe if I could mark this position field as readonly, it could infer to type 'absolute'.

Related to #10676?

Question

Source

jovdb

👍9

Most helpful comment

I don't like casting and prevent it as much as possible, but here are workarounds:

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

When there is not interface is exported (here: TextStyle), we can cast only field:

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

jovdb on 9 Oct 2016

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

All 3 comments

I don't like casting and prevent it as much as possible, but here are workarounds:

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

When there is not interface is exported (here: TextStyle), we can cast only field:

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

jovdb on 9 Oct 2016

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