Typescript: assign one type to many variables

Question

I am new to TypeScript, I got following predefined type:

type SC = StyledComponent<any, any>;

in my script I have tons of variables using this type:

    ColorBarItemHoverArray!: Array<SC>;
    AdjustColorContainer!: SC;
    HandleHover!: SC;
    DivContainer!: SC;
    ATag!: SC;
    SpanTag1!: SC;
    SpanTag2!: SC;
    SpanTag3!: SC;
    SpanTag4!: SC;
    StyledLabelSide!: SC;
    StyledRangeSide!: SC;
    StyledInputSide!: SC;
    StyledLabelRatio!: SC;
    StyledRangeRatio!: SC;
    StyledInputRatio!: SC;
    StyledLabelAngle!: SC;
    StyledRangeAngle!: SC;
    StyledInputAngle!: SC;
    StyledLabelSpeed!: SC;
    StyledRangeSpeed!: SC;
    StyledInputSpeed!: SC;
    StyledButtonInverse!: SC;
    StyledButtonAbstract!: SC;
    StyledButtonArrow!: SC;
    ArrowLeft!: SC;
    ArrowRight!: SC;

is there a better way to write these?

Appreciate for your help.

Luke Storry · Accepted Answer · 2020-09-14 14:13:22Z

1

If you're defining tons of variables all with the same type, that is usually a signal that you need to either give them better types, or refactor and break things up.

By using <any, any>, you are losing most of the benefits of Typescript. Why not define each variable in a correct manner, then they will not all be the same vague any type?

Also, you can help yourself slightly by creating a new type - by rearranging your list, I can see it can be grouped like so:

    StyledLabelSide!: SC;
    StyledLabelRatio!: SC;
    StyledLabelAngle!: SC;
    StyledLabelSpeed!: SC;

    StyledInputSide!: SC;
    StyledInputRatio!: SC;
    StyledInputAngle!: SC;
    StyledInputSpeed!: SC;

    StyledRangeSide!: SC;
    StyledRangeRatio!: SC;
    StyledRangeAngle!: SC;
    StyledRangeSpeed!: SC;

You could define a type for an object with the fields side, ratio, angle & speed, and then you can just define three variables (StyledLabel, StyledInput & StyledRange) instead of twelve.

answered Sep 14, 2020 at 14:13

Luke Storry

6,7821 gold badge11 silver badges25 bronze badges

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

2 Comments

Weilory Over a year ago

ok, I guess there is no way to assign one to many yet.

Luke Storry Over a year ago

It's unlikely that there will be a way - it's bad practice to have so many variables like that, with no definition but just a type with no hierarchy. Also makes it harder to redefine the types if you do them all at once.

Collectives™ on Stack Overflow

Typescript: assign one type to many variables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related