Creating Dynamic Prop Types With Generics in TypeScript

1. Create a duplicate component which doesn't take a lat or lng property and doesn't apply the styles
2. Make lat and lng optional
3. Use generics!

Creating a generic type

1: 
type MyGenericType<T> = {
2: 
	myItem: T
3: 
}

1: 
//	item1 and item2 will pass the TypeScript compiler...
2: 
const item1: MyGenericType<string> = {
3: 
	myItem: "Hello!",
4: 
}
5: 
const item2: MyGenericType<number> = {
6: 
	myItem: 10,
7: 
}
8: 

9: 
//	But this item won't!
10: 
const item3: MyGenericType<object> = {
11: 
	myItem: 10, // ERR: Type 'number' is not assignable to type 'object'
12: 
}

Restricting T

1: 
//	Now, T can only be either `string` or `number`
2: 
type MyGenericType<T extends string | number> = {
3: 
	myItem: T
4: 
}
5: 

6: 
//	The previous two examples are still a-okay:
7: 
const item1: MyGenericType<string> = {
8: 
	myItem: "Hello!",
9: 
}
10: 
const item2: MyGenericType<number> = {
11: 
	myItem: 10,
12: 
}
13: 

14: 
//	But now we cannot pass `object` as T:
15: 
//	ERR: Type 'object' does not satisfy the constraint 'string | number'
16: 
const item3: MyGenericType<object> = {
17: 
	myItem: {},
18: 
}

1: 
type MyGenericType<T extends "red" | "green" | "blue"> = {
2: 
	color: T
3: 
}

Conditional Types

The concept of conditional constants blew me away when I first used them. It almost felt like breaking the rules! These are constants after all, so how can their value be conditionally determined?

1: 
const someNumber: number = getRandomIntegerBetween(0, 100)
2: 
const isOverFifty: string = someNumber > 50 ? "yes" : "no"

1: 
type TelevisionType = "flatscreen" | "crt"
2: 

3: 
type Television<T extends TelevisionType> = {
4: 
	width: number
5: 
	height: number
6: 
} & (T extends "flatscreen"
7: 
	? {
8: 
			wallMounted: boolean
9: 
	  }
10: 
	: unknown)

Putting it all together

• lat and lng should only be present if the icon is in the map
• Some styles should be conditionally disabled if the icon is not in the map

1: 
type Coordinates = {
2: 
	lat: number
3: 
	lng: number
4: 
}
5: 

6: 
type MapIconMode = "map" | "button"
7: 
type MapIconProps<T extends MapIconMode> = {
8: 
	iconName: string
9: 
	mode: T
10: 
} & (T extends "map" ? Coordinates : unknown)

1: 
//	Icons are imported from react-icons
2: 

3: 
export const MapIcon = <T extends MapIconMode>(props: MapIconProps<T>) => {
4: 
	const iconLookup: Record<AllowedIconName, Function> = {
5: 
		school: IoMdSchool,
6: 
		business: MdOutlineBusiness,
7: 
		restaurant: IoMdRestaurant,
8: 
	}
9: 
	/*  If `mode` is set to "button", this `position` variable will be
10: 
		{ lat: undefined, lng: undefined }, which is okay for our purposes
11: 
		
12: 
		One downside to this approach is that TypeScript will insist that `lat` and
13: 
		`lng` don't exist, so we have to cast props as any to get those values. One
14: 
		solution to this is to conditionally append Partial<Coordinates> or the regular
15: 
		Coordinates type depending on T, rather than completely omitting Coordinates
16: 
		all together.
17: 
    */
18: 
	const { lat, lng } = props as any
19: 
	const position = { lat, lng }
20: 
	const IconComponent = iconLookup[props.iconName]
21: 
	return (
22: 
		<div
23: 
			{...position}
24: 
			style={
25: 
				props.mode === "map"
26: 
					? {
27: 
							color: "red",
28: 
					  }
29: 
					: undefined
30: 
			}
31: 
		>
32: 
			<IconComponent />
33: 
		</div>
34: 
	)
35: 
}

1: 
//	The following are okay:
2: 
<MapIcon mode="button" iconName="school" />
3: 
<MapIcon
4: 
	mode="map"
5: 
	iconName="business"
6: 
	lat={32.15126966740565}
7: 
	lng={-110.3480100497526}
8: 
/>
9: 

10: 
//	The following will throw TypeScript errors!
11: 
<MapIcon
12: 
	mode="button"
13: 
	iconName="business"
14: 
	lat={32.15126966740565} // ERR: Property "lat" is not assignable to type
15: 
	lng={-110.3480100497526} // ERR: Property "lng" is not assignable to type
16: 
/>
17: 
<MapIcon mode="map" iconName="school" /> // ERR: Missing properties "lat" and "lng"

Conclusion