基于custom.d.ts的类型记录界面属性增强

Question

我需要修改TypographyProps { variants：‘主’，‘备用’}，并通过类型扩展将新的变体添加到变体中。

示例：

我有单身症

packages/
----- web-1
----- web-2
----- ui-library
---------- Typography/Typography.tsx


export interface DefaultVariant {
  variant: 'variant-1' | 'variant-3' | 'variant-2'
}

export interface VariantOverrides {}

type Merge<X, Y> = {
  [K in keyof X | keyof Y]:
    | (K extends keyof X ? X[K] : never)
    | (K extends keyof Y ? Y[K] : never)
}

export interface TypographyProps {
  variant: Merge<DefaultVariant, VariantOverrides>
}

export const Typography = ({ variant }: TypographyProps) => {
  return <div>{variant}</div>
}




// types in web-1 package
declare module 'ui-library' {
  import 'ui-library'

  export interface VariantOverrides {
    variant: 'variant-4' | 'variant-5'
  }
}

// types in web-2 package
declare module 'ui-library' {
  import 'ui-library'

  export interface VariantOverrides {
    variant: 'variant-55' | 'variant-46'
  }
}

有人知道为什么这不管用吗？非常感谢!

Answer 1

这种方法是可能的，仅仅是枚举，因为类型不能增加。

import * as React from 'react';
import Button from './packages/common/components/Button';


declare global {
  namespace Common {
    enum Variants {
      v2 = 'v2',
    }
  }
}

export default function App() {
  return <Button variants="v1" />;
}



/// 


import * as React from 'react';

declare global {
  namespace Common {
    enum Variants {
      v1 = 'v1',
    }

    interface ButtonProps {
      variants: keyof typeof Variants;
    }
  }
}

function Button({ variants }: Common.ButtonProps) {
  return <button>Test</button>;
}

export default Button;