Narrow Types
Loading "Narrow Types"
Run locally for transcripts
👨💼 Our
CalculatorProps['operator'] type being set simply to string is not
"narrow" enough to help users of our Calculator component. It allows any
string value to be provided, even one which our Calculator doesn't support.
For example, the exponentiation operator ** could be passed and TypeScript
won't complain, but this would cause a runtime error because we don't have a
function to handle that operator:element = <Calculator left={2} operator="**" right={3} /> // 💥
On top of that, the API for our
Calculator isn't very discoverable. How would
people know which operations are possible? Docs? Trial and error?Rather than a
string, your TypeScript type definition can be set to a specific
string. For example:type KodyString = 'Kody'
let kody: KodyString // this variable can only ever be set to the string 'Kody'
Combine that functionality with
union syntax of
|
and you'll be able to specify exactly which operators are allowed. For example:type KodyOrHannahString = 'Kody' | 'Hannah'
let assistant: KodyOrHannahString // this variable can only ever be set to the string 'Kody' or 'Hannah'
// 💰 tip: we could do the same thing without creating a type by inlining instead:
// let assistant: 'Kody' | 'Hannah'
How about we narrow our
operator type from a string to some specific strings
using a union.