Web ops, performance and front-end
I recently stumbled upon a question on Reddit’s LearnTypeScript subreddit regarding custom React hooks. A user wanted to create a toggle custom hook, and stick to the naming convention as regular React hooks do: Returning an array that you destructure when calling the hook. For example useState:
In JavaScript, you can define object properties on the fly with Object.defineProperty. This is useful if you want your properties to be read-only or similar. Think of a storage object that has a maximum value that shouldn’t be overwritten:
TypeScript’s control flow analysis lets you narrow down from a broader type to a more narrow type:
boolean is a fun primitive data type in JavaScript. In TypeScript, it allows for a total of four values
Wait, four?
If you come from traditional, strongly typed languages you might be familiar with the concept
of void: A type telling you that functions and methods return nothing when called.
symbol is a primitive data type in JavaScript and TypeScript, which, amongst other things,
can be used for object properties. Compared to number and string, symbols have some unique
features that make them stand out.
You might well see that my blog starts to center around TypeScript a lot recently. This might look like a strong deviation from what I usually blog and advocate: Performant, accessible and resilient web sites.
React typings for TypeScript come with lots of interfaces for all possible HTML elements out there. But sometimes, your browsers, your frameworks or your code are a little bit ahead of what’s possible.
Mapped types are great, as they allow for the flexibility in object structures JavaScript is known for. But they have some crucial implications on the type system. Take this example:
TypeScript is a structural type system. This means as long as your data structure satisfies a contract, TypeScript will allow it. Even if you have too many keys declared.