Why property type unassignalbe while passing via const in TypeScript?

Question

I know this is 100% a noob question, but i can't handle myself and want to know an answer.

type SweetAlertPosition =
    'top' | 'top-start' | 'top-end' | 'top-left' | 'top-right' |
    'center' | 'center-start' | 'center-end' | 'center-left' | 'center-right' |
    'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-left' | 'bottom-right';

Main interface(simplified):

interface SweetAlertOptions {
    ...,
    position?: SweetAlertPosition
}

class Swal {
    mixin(options: SweetAlertOptions)
}

Now, if i explicitly pass options to .mixin call: Swal.mixin({ position: 'bottom' }) - no error is there. But if i predefine options in some const object:

defaultOptions = {
   position: 'bottom'
}

Passing now make an error - Swal.mixin(defauiltOptions)

Types of property 'position' are incompatible.
Type 'string' is not assignable to type '"top" | "top-start" | "top-end" | "top-left" | "top-right" | "center" | "center-start" | "center-end" | "center-left" | "center-right" | "bottom" | "bottom-start" | "bottom-end" | "bottom-left" | "bottom-right" | undefined'.

I already found out that a have to cast String type to const:

defaultOptions = {
    position: 'botton' as const | as SweetAlertPosition
}

But why passing options via const obj(defaultOptions) make position property become String-type, and passing it directly does not oO ?

Bergi · Accepted Answer · 2021-04-05 12:49:06Z

1

When declaring a const variable, its type is derived only from the value you assign to it, not from where the variable is used (full type inference). When initialising a variable with an object literal, the property types are widened so that you might assing other strings or numbers to them - unless you narrow them with as const.

When passing an object literal as an argument, its type is inferred from the parameter types of the called function.

In your case, I wouldn't write as const but recommend

const defaultOptions: SweetAlertOptions = {
   position: 'bottom'
};

answered Apr 5, 2021 at 12:49

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

Comments

crashmstr · Accepted Answer · 2021-04-05 12:48:11Z

1

The problem is that defaultOptions has a type of { position: string } unless you do something about it, like this:

const defaultOptions: SweetAlertOptions = {
   position: 'bottom'
}

Here, we explicitly declare that defaultOptions is of type SweetAlertOptions and then there is no error when passing into mixin.

In the example of passing in the value explicitly, the compiler can interpret the object in the context of the call.

Example in TypeScript Playground

answered Apr 5, 2021 at 12:48

crashmstr

28.7k9 gold badges66 silver badges80 bronze badges

Collectives™ on Stack Overflow

Why property type unassignalbe while passing via const in TypeScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related