Typescript 字符串文字类型

Question

I have this Typescript type

export type TCard = {
    col: number;
    id: number;
    hiddenImgPath: "/assets/img/cards/hiddenImg.jpg";
    imgPath: "/assets/img/cards";
    onClickCard: Function;
    row: number;
    visible: boolean;
};

prop 'hiddenImgPath' will allways have the value "/assets/img/cards/hiddenImg.jpg". prop 'imgPath' will always start with "/assets/img/cards" but wil have a suffix (as in '/assets/img/cards/card01.jpg'). Then I create an object that is typed as TCard (elsewhere, not inline):

({
            col: i % nrOfColumns,
            id: i,
            hiddenImgPath: "/assets/img/cards/hiddenImg.jpg",
            imgPath: `${imgPath}/fileName`,
            onClickCard: onClickCard,
            row: Math.floor(i / nrOfColumns),
            visible: true
        })

But I get an error:

Types of property 'hiddenImgPath' are incompatible.
      Type 'string' is not assignable to type '"/assets/img/cards/hiddenImg.jpg"'.

Makes sense so I change the type of 'hiddemImgPath' to

hiddenImgPath: "/assets/img/cards/hiddenImg.jpg" as string;

But then I get an error

';' expected.  TS1005

    2 |         col: number;
    3 |         id: number;
  > 4 |         hiddenImgPath: "/assets/img/cards/hiddenImg.jpg" as string;
      |                                                          ^
    5 |         imgPath: "/assets/img/cards";
    6 |         onClickCard: Function;
    7 |         row: number;

Why do I have to add a semicolon there? And why do I have to add / assign the literally typed property 'hiddenImgPath' in the first place when creating the object of type TCard? hiddenImgPath will never have another value than assigned in the type? But if I leave 'hiddenImgPath' out when creating the object of type TCard I get:

Property 'hiddenImgPath' is missing in type '{ col: number; id: number; imgPath: string; onClickCard: (card: {}) => void; row: number; visible: boolean; }' but required 
in type 'TCard'.'

I'm out of ideas. Is what I'm trying to do here going against typescript?

Answer 1

Why do I have to add a semicolon there?

You don't, but "/assets/img/cards/hiddenImg.jpg" as string is invalid syntax for a type declaration. You can't use as within a type annotation; it's for type assertions on values .

The hiddenImgPath in that object literal is just fine. But imgPath can't be defined with a string literal type if the values will only be prefixed by that string; you need to use string for the type:

export type TCard = {
    col: number;
    id: number;
    hiddenImgPath: "/assets/img/cards/hiddenImg.jpg";
    imgPath: string;           // <===========
    onClickCard: Function;
    row: number;
    visible: boolean;
};

If you do that, your object literal is just fine. Here it is on the playground with some fixed values in place of your variables: playground link

And why do I have to add / assign the literally typed property 'hiddenImgPath' in the first place when creating the object of type TCard? hiddenImgPath will never have another value than assigned in the type?

Because TypeScript's work happens at compile-time , not runtime. It won't automatically fill in properties for you, not even when they have only one valid fixed value. If you want that done once in a central place, you probably want class rather than just type .