类型记录:扩展外部包的类型定义(deck.gl)

Question

我试图从外部包(deck.gl，带有类型这里)扩展两个类型定义，但到目前为止没有成功。

我在我的项目和这个types文件中有一个deckgl.d.ts目录，用于导入独立的类型库，该库按预期工作：

import * as DeckTypings from '@danmarshall/deckgl-typings';
declare module 'deck.gl' {
    export namespace DeckTypings {}
}

我想扩展两件事:一个接口和一个类。

1. 对于接口，我想更新接口DeckProps的定义，只更改viewState属性。我尝试过这样处理它(添加到deckgl.d.ts中)：

declare module '@deck.gl/core/lib/deck' {
    import { ViewStateProps } from '@deck.gl/core/views/view';
    export interface DeckProps {
        viewState: ViewStateProps | { [key: string]: ViewStateProps };
    }
}

1. 我想更新的类是MapView，允许像JSX元素一样使用它。我已经这样做了，遵循类型库本身的例子，也添加到deckgl.d.ts中

declare module '@deck.gl/core/views/map-view' {
    import React from 'react';
    import { ViewProps } from '@deck.gl/core/views/view';
    export type MapViewProps = Partial<ViewProps>;
    export default class MapView extends React.Component<MapViewProps> {
        constructor(props?: MapViewProps);
        equals(view: any): any;
        makeViewport({ width, height, viewState }: { width: any; height: any; viewState: any }): any;
        getViewStateId(): any;
        filterViewState(viewState: any): any;
        getDimensions({ width, height }: { width: any; height: any }): {
            x: any;
            y: any;
            width: any;
            height: any;
        };
        _getControllerProps(defaultOpts: any): any;
        _getViewport(props: any): any;
        _parseDimensions({ x, y, width, height }: { x: any; y: any; width: any; height: any }): void;
    }
}

奇怪的是，似乎有些时候ts编译器知道这些定义- VS代码突然显示没有错误，而在命令行中运行tsc也没有错误。但是它是否工作(显示没有ts错误)似乎完全独立于代码的状态。

在ts编译事物的顺序中会有什么变化吗？或者我还应该做点别的吗？

Answer 1

在您自己对类型的扩展停止工作的情况下，@danmarshall/deckgl-typings中的基本类型是否被识别？

可能导致

实际上，Deck.GL的非官方类型包存在问题，因为它目前没有通过npm上的@types命名空间发布。相反，它使用https://github.com/danmarshall/indefinitely-typed将正在进行的工作类型复制到node_modules/@types目录中。但是，在安装任何新包时，npm存在一个问题--手工复制的纸面类型将从node_modules中删除。

在我看来，如果你的类型突然停止工作，那是因为你正在扩展的底层类型丢失了。

解决方案

我过去使用过的一个解决方法是直接将deckgl-typings包添加到类型标的类型解析路径中，而不是依赖于deckgl-typings，而是简单地依赖于tsconfig。

假设您使用的是CRA，您需要创建一个单独的tsconfig并对其进行扩展(因为react-scripts恼人地覆盖了主tsconfig中的paths值)。

给定目录结构：

src/
node_modules/
tsconfig.json

创建一个tsconfig-typings.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "./node_modules/@danmarshall/deckgl-typings/*",
        "*"
      ]
    }
  }
}

然后，在主tsconfig.json中

{
"extends": "./tsconfig-typings.json",
//...
}

如果不使用CRA，只需将baseUrl和paths选项包括在主tsconfig.json的compilerOptions中

这个解决方法使TS总是找到类型，所以在安装另一个包时，它们不会偶尔消失。

一个更手动的解决方法是在安装另一个软件包后始终使用npm install -D @danmarshall/deckgl-typings .