类型记录字符串文字类型

Question

我有这种打字稿

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

道具'hiddenImgPath‘将始终具有"/assets/img/cards/hiddenImg.jpg“的价值。道具'imgPath‘将始终以"/assets/img/cards“开头，但将有一个后缀(如’/assets/img/cards/cards 01.jpg‘)。然后，我创建一个类型为TCard的对象(在其他地方，而不是内联)：

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

但我发现了一个错误：

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

所以我把“hiddemImgPath”的类型改为

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

但是我得到了一个错误

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

为什么我要在那里加个分号？为什么在创建类型为hiddenImgPath的对象时，我必须首先添加/分配字面上的类型化属性‘TCard’？hiddenImgPath将不会有比在类型中分配的值更多的值？但是，如果在创建类型为hiddenImgPath的对象时不使用“TCard”，则会得到：

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

我没有主意了。我在这里想做的是反对打字稿吗？

Answer 1

为什么我要在那里加个分号？

没有，但是"/assets/img/cards/hiddenImg.jpg" as string是类型声明的无效语法。不能在类型注释中使用as；它用于值的类型断言。

该对象文本中的hiddenImgPath很好。但是，如果值仅以字符串作为前缀，则不能用字符串文本类型定义imgPath；您需要对该类型使用string：

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

如果你这样做，你的对象文字就是好的。这里是在操场上，有一些固定的值来代替变量：操场链接

为什么在创建类型为hiddenImgPath的对象时，我必须首先添加/分配字面上的类型化属性‘TCard’？hiddenImgPath将不会有比在类型中分配的值更多的值？

因为类型记录的工作发生在编译时，而不是运行时。它不会自动为您填写属性，即使它们只有一个有效的固定值。如果您希望在中心位置完成一次，那么您可能需要class而不仅仅是type。