JavaScript & TypeScript Tips
Who am I?
I'm n-d-r-d-g (pronounced "underdog")
Front-end web developer
Footballer
n-d-r-d-g (feel free to chat)
Array destructuring by index
const roles = ["ADMIN", "SUPERUSER", "USER"];
const [admin, superuser] = roles;
const {1: superuser} = roles;
console.log(superuser); // "SUPERUSER"Compound fields concatenation
const title = "Mrs.";
const fName = "Jane";
const oNames = "";
const lName = "Foster";
const name = `${title} ${fName} ${oNames} ${lName}`;
// Mrs. Jane Foster;
const name = [title, fName, oNames, lName].filter(Boolean).join(" ");
// Mrs. Jane Foster;Object getters & setters
const obj = {
text: "Welcome",
history: [],
set welcomeText(text) {
this.history.push({date: new Date(), text});
this.text = text;
},
get reversedHistory() {
return this.history.toReversed();
},
}
obj.welcomeText = "Hello";
obj.reversedHistory; // [{date: ..., text: "Hello"}]ReturnType
function func() {
return 'test';
};
type X = ReturnType<typeof func>; // string
type Fn = StringConstructor | NumberConstructor | BooleanConstructor;
function cast<T extends Fn>(val: unknown, fn: T) {
return fn(val) as ReturnType<typeof fn>;
}
const castedVal1 = cast(123, String); // string
const castedVal2 = cast("123", Number); // number
const castedVal3 = cast(123, Boolean); // booleanArray[number]['property']
const themeOptions = [
{key: 'panda', label: 'Panda 🐼'},
{key: 'dracula', label: 'Dracula 🧛'},
{key: 'material', label: 'Material 🧻'},
] as const
type Theme = typeof themeOptions[number]['key'];
// 'panda' | 'dracula' | 'material'Typing an object
const config = {
width: '100px',
};Type inference
const config = {
width: '100px',
height: 0,
};
config.depth; // Property 'depth' does not exist on type
config.width = '20px';
config.width; // Typed as stringCasting
type Config = { [key: string]: string | number; }
const config = {
width: '100px',
} as Config;
config.depth = '40px';
config.width; // Typed as string | number
config.width = 20;
config.width; // Typed as number
config.isActive = true; // Type 'boolean' is not assignable to type 'string | number'const assertion
const config = {
width: '100px',
height: 0,
} as const;
config.depth; // Property 'depth' does not exist on type
config.width = ''; // Cannot assign to 'width' (read-only property)
config.width; // Typed as 100px, not stringVariable annotation
type Config = { [key: string]: string | number; }
const config: Config = {
width: '100px',
};
config.depth = '40px';
config.width; // Typed as string | number
config.width = 20;
config.width; // Typed as number
config.isActive = true; // Type 'boolean' is not assignable to type 'string | number'satisfies operator
type Config = { [key: string]: string | number; }
const config = {
width: '100px',
} satisfies Config;
config.depth = ''; // Property 'depth' does not exist on type '{ width: string; }'
config.width = 3; // Type 'number' is not assignable to type 'string'
config.width; // Typed as string