Typescript 2.6 -> 使用模块扩充扩展外部库的类型定义 -> TS2339：类型“”上不存在属性“”答案

【问题标题】：Typescript 2.6 -> Extend type definition for external library with module augmentation -> TS2339: Property '' does not exist on type ''Typescript 2.6 -> 使用模块扩充扩展外部库的类型定义 -> TS2339：类型“”上不存在属性“”
【发布时间】：2018-06-23 21:47:44
【问题描述】：

我正在使用库 material-ui，目前正在运行 v1.0.0-beta。他们昨天将库更新为v1.0.0-beta.28，但没有更新类型定义，所以我的代码在运行时失败但在编译时没有。

来自 Chrome：

webpack-internal:///./node_modules/material-ui/styles/colorManipulator.js:80 未捕获的类型错误：无法读取未定义的属性“charAt” 在 decomposeColor (webpack-internal:///./node_modules/material-ui/styles/colorManipulator.js:80) 在减轻（webpack-internal:///./node_modules/material-ui/styles/colorManipulator.js:226）在 createPalette (webpack-internal:///./node_modules/material-ui/styles/createPalette.js:144) 在 Object.createMuiTheme (webpack-internal:///./node_modules/material-ui/styles/createMuiTheme.js:71) 在 StartPage.render (webpack-internal:///./Features/Client/StartPage/index.tsx:106) 在finishClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:7873) 在 updateClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:7850) 在 beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:8225) 在 performUnitOfWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:10224) 在 workLoop (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:10288)

https://github.com/mui-org/material-ui/releases/tag/v1.0.0-beta.28

查看发行说明，我可以看到 palette 对象已更改 primary 和 secondary 颜色，这是一个重大更改。

然后我阅读了有关 module augmentation 的信息，并尝试在这种需要新属性的情况下扩展 Color 对象。

https://github.com/Microsoft/TypeScript/issues/10859#issuecomment-246496707

http://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation

我是这样扩展的：

import { Color } from 'material-ui'

declare module 'material-ui' {
  export interface Color {
    light?: string
    main?: string
    dark?: string
  }
}

Visual Studio 将其拾取并构建，但当我尝试运行 webpack 时出现以下错误：

TS2339：“颜色”类型上不存在属性“主”。

为什么会这样？

【问题讨论】：

标签： reactjs typescript webpack material-ui typescript2.0

【解决方案1】：

原来错误来自使用共享项目，并且由于这种类型的定义没有正确加载，即使module augmentation 也存在于共享项目中。必须检查我们的结构，因为它可能会在未来导致更多错误。

【讨论】：