这里有 TS 的菜鸟。我正在 React 中创建一个自定义图标组件，我只想使用圆形材质 UI 图标。
我这样定义类型：
import * as icons from '@material-ui/icons/index'
export type MaterialUiIcon = keyof typeof icons
这可行，但只能让我对所有材料 UI 图标进行类型检查。
这就是我想要做的：
const roundedIconsNames = (Object.keys(icons).filter((icon) => icon.includes('Rounded')))
export type RoundedMaterialUiIcon = typeof roundedIconsNames[number]
然而 RoundedMaterialUiIcon 最终是 string[] 类型
我怎样才能做到这一点？
谢谢。
【问题讨论】：
标签： arrays reactjs typescript dynamic
您收到string[] 是因为Object.keys 总是按设计返回string[]。
我认为最好是做typeguard和utility function：
import * as icons from '@material-ui/icons/index'
type Icons = typeof icons
export type MaterialUiIcon = keyof Icons
type Prefix<T extends string> = `${string}${T}` | `${string}${T}${string}` | `${T}${string}`
// self explanatory, we have 3 variant of word
type Test1 = Prefix<'Rounded'> // `${string}Rounded` | `${string}Rounded${string}` | `Rounded${string}`
type GetByPrefix<T, P> = T extends P ? T : never;
/**
* This will return only HelloRounded, because union 'HelloRounded' | 'Batman'
* extends `${string}Rounded` | `${string}Rounded${string}` | `Rounded${string}`
*
* WHy extends?
* Because Rounded is at the end
*/
type Test2 = GetByPrefix<'HelloRounded' | 'Batman', Prefix<'Rounded'>> // 'HelloRounded'
/**
* This will return "RoundedWorld" because Rounded is at the beginning
*/
type Test3 = GetByPrefix<'RoundedWorld' | 'Batman', Prefix<'Rounded'>> // "RoundedWorld"
/**
* This is a special syntax for user defined typeguards
* It may help you to narrow the type
* https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards
*/
const typeguard = <T extends string,>(tag: string) => (icon: MaterialUiIcon): icon is GetByPrefix<MaterialUiIcon, Prefix<T>> => icon.includes(tag)
const getRounded = <T extends string>(icons: Icons, includes: T) =>
/**
* Object.keys will always return string[], this is by design
* So you need to use type assertion here
*
* Array.prototype.filter accept curried typeguard
* It is a good practive yo use user defined typeguards a a predicate
* callback in array methods
*/
(Object.keys(icons) as Array<MaterialUiIcon>).filter(typeguard<T>(includes))
const result = getRounded(icons, 'Rounded')
请记住，由于Icons 有 5K 联合类型，TS 遍历所有联合并非易事。
【讨论】：