打字稿接口合并，使外部库的接口属性更具体

Question

我正在使用一个来自外部库的函数，该函数返回一个对象，其中有一个类型为number的特定属性，但由于它对我的数据进行操作，因此我知道它实际上只是1 | 2的联合。更具体地说，我该如何重写它?

/* original type: */ { id?: number }
/*  desired type: */ { id: keyof typeof CHAINS_ENUM }

src/myFile.ts

import { someFunction, setIds} from '@some-library/core'
setIds([1, 2]) // <- simplification
const { id } = someFunction() // id: number

node_modules/@some-library/core/dist/index.d.ts

export { someFunction } from './provider'

node_modules/@some-library/core/dist/provider.d.ts

import { SomeInterface } from './types';
export declare function someFunction(key?: string): SomeInterface<T>;

node_modules/@some-library/core/dist/types.d.ts

export interface AnotherInterface { ... }
export interface SomeInterface<T = any> extends AnotherInterface {
id?: number
}

---

带有实际库的简化代码片段:

import { useWeb3React } from '@web3-react/core'
const MyComponent: React.FC = () => {
const { chainId } = useWeb3React()      // chainId: number
return <MyForm baseChainId={chainId} /> // type 'number' is not assignable to type 0 | 1 ; baseChainId: keyof typeof CHAINS_ENUM
}

Answer 1

我希望可以在全局级别重写这个，而不必记住从不同的位置导入库，但至少它可以工作。

src/utils/web3.ts

import { useWeb3React as useWeb3React_ } from '@web3-react/core'
export const useWeb3React: < T = any >(key?: string) => Modify<
ReturnType<typeof useWeb3React_<T>>,
{ chainId: SupportedChainIds }
> = useWeb3React_ as any
declare global {
type SupportedChainIds = 1 | 4
}

在所需文件

中

// import { useWeb3React } from '@web3-react/core' // before
import { useWeb3React } from 'src/utils/web3'      // after
const MyComponent: React.FC = () => {
const { chainId } = useWeb3React()      // chainId: 1 | 4
return <MyForm baseChainId={chainId} /> // no error ✔
}

Modify<Original, Newtype>type

覆盖Typescript d.ts文件中定义的接口属性类型