TypeScript-确保数组具有字符串文字中的所有值

Question

Is it possible to type an array to ensure it has at the exact values that exist in a string literal? (not necessarily in the same order)

My attempt below warns if an incorrect value is passed, but not if one is missing.

Is this possible?

export type IconProps = {
  name: 'arrow-up' | 'arrow-down' | 'chevron-up' | 'chevron-down'
} & React.SVGAttributes<SVGElement>


type IconArr = IconProps['name'][]
const arr: IconArr = ['arrow-up', 'arrow-down', 'chevron-up'] // <- 😢 should complain that 'chevron-down' missing.

Answer 1

Why not just reverse the types:

 const arr = <const> ['arrow-up', 'arrow-down', 'chevron-up'];

 export type IconProps = {
   name: (typeof arr)[number]
 } & React.SVGAttributes<SVGElement>

<const> ensures that the tyepof arr is a tuple type, and not a string[] .

Answer 2

you can just try this:-

const arr = ['arrow-up', 'arrow-down', 'chevron-up']

console.log(typeof arr);