时间戳

首页 > 解决方案 > 奇怪场景中的打字稿编译错误

typescript - 奇怪场景中的打字稿编译错误

问题描述

我有一个类型：

type MyObject = {
    [index:string]: MyObject | Function | "wtf"
}

当我创建这种类型的变量时，它会在这个基本示例中编译： 

// compiles
const myObj: MyObject = {
    name: "wtf",
};

和嵌套键一样——注意嵌套键是notName:，而不是name:

// compiles
const myObj: MyObject = {
    wrapper: {
        notName: "wtf",
    },
};

一旦我将嵌套键更改为name:，它就无法编译：

/*
Type '{ name: string; }' is not assignable to type 'Function | MyObject | "wtf"'.
  Type '{ name: string; }' is not assignable to type '"wtf"'

*/
const myObj: MyObject = {
    wrapper: {
        name: "wtf",
    },
};

其他奇怪的是，如果我Function从联合中删除，它会编译：

type MyObjectNoFunction = {
    [index:string]: MyObjectNoFunction | "wtf"
}

let myObjNoFn: MyObjectNoFunction = {
    wrapper: {
        name: "wtf"
    }
};

更奇怪的是，如果我在我的 tsconfig 中不包含任何库，比如 es6，那么一切都会编译。

配置：

{
  "compilerOptions": {
    "lib": [
      "es6"
    ],
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "strict": true
  }
}

查看github 上的完整示例

标签： typescript

解决方案

不确定究竟是什么导致 TS 感到困惑，但这里有一个疯狂的猜测：可能这是因为在 es6 中Function有一个name属性，所以 TypeScript 推断这{ name: "something" }是一个未完成的Function类型声明。

无论如何，这里有一些解决方法。

您可以显式键入内部对象，如下所示：

type MyObject = {
  [index:string]: MyObject | Function | "wtf"
}

const innerMyObject: MyObject = {
  name: "wtf",
}

const myObj: MyObject = {
  wrapper: innerMyObject,
};

或者您可以显式键入字符串文字，如下所示：

type MyObject = {
  [index:string]: MyObject | Function | "wtf"
}

const myObj: MyObject = {
  wrapper: {
      name: "wtf" as "wtf",
  },
};

推荐阅读