TypeScript type inference issue with string literal

Question

In a react-native application, I have the style

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

used in <Text style={styles.text} />, but the tsc compiler gives the following error:

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

The definition of TextStyle in @types/react-native includes:

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

Why is the compiler complaining about incompatibility? It seems that it is inferring the type of textAlign to be the too general string instead of checking the actual value ("center").

I know that I can use a as TextStyle to avoid the problem, but I would like to know why it is happening and if I should file a ticket against the compiler.

or maybe the typings mantainer, as it seems the expected values is not a string... — Paolo Casciello
– Paolo Casciello, Commented Mar 30, 2017 at 15:10
I think the typings maintainer is correct in limiting the values, but the compiler should carry the actual value through to type comparison instead of inferring string. Otherwise, what is the purpose of having string literal types? — Ralph
– Ralph, Commented Mar 30, 2017 at 15:14
Finding the same issue, I used to have code like this that worked, which is now broken - think it's tsc issue — SDK
– SDK, Commented Mar 15, 2018 at 10:21

OM Bharatiya · Accepted Answer · 2020-08-16 18:04:18Z

27

If you're using Typescript 3.4+ you can make use of the as const notation:

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

For more info check documentations here.

answered Aug 16, 2020 at 18:04

OM Bharatiya

2,2901 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

libertyernie · Accepted Answer · 2017-03-30 17:17:13Z

24

This ought to work:

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

Normally TypeScript would type textAlign as string, but since it can't just be any string, you can cast it to the more specific type.

answered Mar 30, 2017 at 17:17

libertyernie

2,7041 gold badge19 silver badges13 bronze badges

1 Comment

Ralph Over a year ago

I can also use text: { ... } as TextStyle, but I still think the compiler should handle that.

Gerhat · Accepted Answer · 2020-06-02 11:31:43Z

6

Another option whould be:

import { TextAlignProperty } from 'csstype'

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

answered Jun 2, 2020 at 11:31

Gerhat

8211 gold badge10 silver badges14 bronze badges

1 Comment

DarkAngel Over a year ago

Thank you for this solution, it really is exactly what I needed! :)

Greg · Accepted Answer · 2023-03-14 16:30:20Z

I wanted to do similiar in React TypeScript and the answers here are close but were not quite the working solution. Instead I found I had to import Property from csstype, and then cast as Property.TextAlign.

In the below Example I call to a function that returns Property.TextAlign instead of a regular string.

import { Property } from 'csstype'

...

const getTextAlign = (dataType: string):Property.TextAlign => {
    var output:string = "left";

    if(dataType === "Money"){
        output = "right";
    }

    return output as Property.TextAlign;
}

...

<td style={{textAlign: getTextAlign(this.state.dataType) }}>

Trying to follow the other solutions, I just got an error that TextAlignProperty wasn't defined in csstype. Here I was particularly working in a PCF control, but that shouldn't matter. This may be a difference due to version of React.

Collectives™ on Stack Overflow

TypeScript type inference issue with string literal

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related