Typescript

Watch and re-transpile any TypeScript file with: tsc file.ts --watch ...

I’ve added TypeScript to several projects I’ve worked on. In this post, I’d like to discuss why I think TypeScript is essential and document my expectations around it. ...

Sometimes in TypeScript we’d like to say a function can either have one typed prop, or the other, never both and never neither. This can be achieved with a union type and type never: type Props = { markdown: string, copy?: never } | { markdown?: never, copy: string} }; const component = ({ markdown, copy }: Props) => markdown ? parseMarkdown(markdown) : <>copy</>; console.log(component({ markdown: "### Important" })) // <h3>Important</h3> console.log(component({ copy: "Just information" })) // <>Just information</> console.log(component({ copy: "Just information", markdown: "### That conflicts })) // ❌ Type error console.log(component({})) // ❌ Type error Our component can receive a string of markdown, which it will parse, or raw copy, which it will not parse. Always just one, never both, and never neither.

With the new as const construct, we can derive a TypeScript union type from a JavaScript array! const builderSteps = [ 'communications', 'estimates', 'health status', 'procedures' ] as const; type BuilderStep = (typeof builderSteps)[number]; This lets us both type a slice of state, type its updater, and build JSX elements all from the same array, a virtuous cycle. const [step, setStep] = useState<BuilderStep>('communications') const handleStepClick = (step: BuilderStep) => setStep(step) {builderSteps.map(step => <button key={step} onClick={() => handleStepClick(step)}>{step}</button>)} const assertions

Absolute imports are an essential developer experience feature for me in any JavaScript application. In this post, I’ll explain what they are, how to use them, and why they matter. ...

There’s been a lot of recent discussion in the TypeScript community about typing functions. These arguments tend to take binary positions: always type your functions, or never type them unless the compiler demands it. Which is the best option? ...

Today I completed the ‘Resistor Color Trio’ TypeScript exercise on Exercism. Here’s my solution. ...

Today as a code kata I completed the ‘Resistor Color Duo’ TypeScript exercise on Exercism. Here’s my work. ...

I’ve been doing Exercism’s TypeScript exercises, and wanted to share my pangram-checking utility. ...