2

The Setup

I have a heading component whose types look like this.

// Heading/index.d.ts
import { HTMLAttributes } from 'react';

export const HeadingType: {
  product: 'product';
  marketing: 'marketing';
};
export const HeadingLevel: {
  h1: 'h1';
  h2: 'h2';
  h3: 'h3';
  h4: 'h4';
  h5: 'h5';
  h6: 'h6';
};

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  as: keyof typeof HeadingLevel;
  type?: keyof typeof HeadingType;
}
export const Heading: React.FC<HeadingProps>;

Here's what the as type gets inferred as, which is what I want because that makes the intellisense work really well at the consumer side.

Inference The as type inference

Component Usage The usage site of Heading

The problem is that this doesn't work if I have to generate the element in a loop using let's say, map because the actual data I wanna use may be string.

The error I am given on hovering over as is

Type '`h${number}`' is not assignable to type '"h1" | "h2" | "h3" | "h4" | "h5" | "h6"'.ts(2322)
index.d.ts(17, 3): The expected type comes from property 'as' which is declared here on type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'

Looping Scenario

The Question

How do I type this so both the cases work?

Notes

If you are wondering why I have an export const HeadingLevel in the index.d.ts file and simply the union type is because the actual component is written in JS, which exports two variables with the same name that look like this.

The actual HeadingLevel object in .js

Praveen Puglia
  • 5,577
  • 5
  • 34
  • 68

1 Answers1

2

You need to build some kind of Loose Completion type helper like this

export const HeadingType: {
  product: 'product';
  marketing: 'marketing';
};
export const HeadingLevel: {
  h1: 'h1';
  h2: 'h2';
  h3: 'h3';
  h4: 'h4';
  h5: 'h5';
  h6: 'h6';
};

type HeadingLevelUnion = keyof typeof HeadingLevel;
type HeadingTypeUnion = keyof typeof HeadingType;

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  as: HeadingLevelUnion | Omit<string, HeadingLevelUnion>;
  type?: HeadingTypeUnion | Omit<string, HeadingTypeUnion>;
}

Reference : MattPocock Loose Autocomplete

Abhay Sharma
  • 76
  • 4
  • what's the Omit for ? – gaurav5430 Jul 08 '22 at 05:55
  • The Omit is there to omit the union type from the set of all strings so typescript won't collapse the string type( which is a larger set) and the union type to string. – Praveen Puglia Jul 08 '22 at 06:01
  • @PraveenPuglia this solution works, but `x | omit == string`. So you will get the autocomplete but not type safety. As user can still assign as='jsjsjsj' and it won't complain. If this is the required behavior then this solution is sufficient. – Bishwajit jha Jul 08 '22 at 06:08
  • The ideal would be to have type safety as well but couldn't figure out anything that does both of these things. – Praveen Puglia Jul 08 '22 at 06:11