convice typescript your literally in the union

We want to pass a string prop that is defined as a union.

function Alert({
  level,
  children,
}: {
  level: "info" | "warn";
  children: ReactNode;
}) {
  const iconName = { info: "info", warn: "alert-triangle" }[level];
  return (
    <View>
      <Feather name={iconName} />
      {children}
    </View>
  );
}

info and alert-triangle are both in the union. Should be groovy, right?

❯ npx tsc
src/components/Alert.ts:666:69 - error TS2322: Type 'string' is not assignable to type '"key" | "type" | ... 267 more ... | undefined'.

Well shoot.

We need to convince typescript that this is no average string. Enter const assertions

const iconName = { info: "hashrocket" as const, warn: "alert-triangle" as const }[level];

And now we get a beautiful error:

❯ npx tsc
src/components/Alert.ts:666:69 - error TS2322: Type "hashrocket" | "alert-triangle" is not assignable to type '"key" | "type" | ... 267 more ... | undefined'.

Change the name back to "info" and we get no errors, with good reason this time. 😎