Typescript扩展外部包deck.gl类型定义间歇性生效如何解决？

问题原因 #

你遇到的偶发生效问题确实和TS编译/类型加载顺序有直接关系，除此之外还有几个常见触发原因：

• 类型加载顺序冲突：你使用的@danmarshall/deckgl-typings属于社区补充类型，TS的模块增强规则要求增强声明必须在原始类型声明加载之后才会生效。如果你的自定义声明文件被TS先解析，增强的定义会被后加载的原始类型直接覆盖，就会出现时灵时不灵的情况。
• 模块路径不匹配：你当前增强的模块路径@deck.gl/core/lib/deck、@deck.gl/core/views/map-view是源文件物理路径，社区类型声明很可能是把所有类型统一挂载在deck.gl或者@deck.gl/core顶层模块下，路径不匹配会导致增强逻辑只有被TS服务临时扫描到的时候生效，正式编译时不会触发合并。
• tsconfig配置缺失：如果你的自定义types目录没有被加入tsconfig.json的typeRoots或include配置，TS不会稳定加载该目录下的声明文件，只有VS Code的增量解析碰巧扫到的时候才会临时生效。
• 类增强规则限制：TS不支持直接合并类的声明，你当前直接重写整个MapView类的写法本身就会和原始类型声明冲突，只有你的声明后加载的时候才会覆盖原始定义，否则就不生效。

调整方案 #

第一步：修正tsconfig配置 #

确保你的自定义类型声明优先被TS加载，修改tsconfig.json的对应配置：

{
  "compilerOptions": {
    "typeRoots": ["./types", "./node_modules/@types"],
    "skipLibCheck": true
  },
  "include": ["src/**/*", "types/**/*"]
}

把你自己的types目录放在typeRoots的最前面，同时开启skipLibCheck避免第三方类型冲突报错。

第二步：重写DeckProps接口增强逻辑 #

不要直接增强源文件路径，改为增强顶层导出模块：

// types/deckgl.d.ts
import * as DeckTypings from '@danmarshall/deckgl-typings';
import '@deck.gl/core';
import type { ViewStateProps } from '@deck.gl/core/views/view';

declare module 'deck.gl' {
    export namespace DeckTypings {}
}

declare module '@deck.gl/core' {
  export interface DeckProps {
    viewState: ViewStateProps | Record<string, ViewStateProps>;
  }
}

第三步：调整MapView的JSX支持写法 #

不要重写整个类的声明，用接口合并的方式补充JSX支持即可：

import type React from 'react';
import type { ViewProps } from '@deck.gl/core/views/view';
import type MapView from '@deck.gl/core/views/map-view';

declare module '@deck.gl/core/views/map-view' {
  export type MapViewProps = Partial<ViewProps> & {
    children?: React.ReactNode;
  };
  export default interface MapView extends React.Component<MapViewProps> {}
}

这里用接口合并的方式给现有MapView类补充React组件的类型定义，不会和原始类声明冲突。

第四步：清理缓存验证效果 #

1. VS Code按下Ctrl+Shift+P，执行「TypeScript: Restart TS Server」重启TS服务
2. 删除项目下的node_modules/.cache目录清理构建缓存
3. 运行tsc --noEmit检查类型是否正常识别

内容的提问来源于stack exchange，提问作者ebbishop