All JavaScript and TypeScript options of the final 3 years | by Linus Schlumberger | Mar, 2023

2023-03-09 04:35:59

TypeScript as envisioned by Steady Diffusion

This text goes by nearly the entire adjustments of the final 3 years (and a few from earlier) in JavaScript / ECMAScript and TypeScript.

Not the entire following options might be related to you and even sensible, however they need to as a substitute serve to indicate what’s potential and to deepen your understanding of those languages.

There are numerous TypeScript options I omitted as a result of they are often summarized as “This didn’t work such as you would anticipate it to however now does”. So if one thing didn’t work prior to now, attempt it once more now.

Overview

JavaScript / ECMAScript (oldest first)
TypeScript (oldest first)

Previous (Nonetheless related older introductions)

Tagged template literals: By prepending a perform title in entrance of a template literal, the perform might be handed the components of the template literals and the template values. This has some fascinating makes use of.

// As an example we need to write a technique to log arbitrary strings containing a quantity, however format the quantity.
// We are able to use tagged templates for that.
perform formatNumbers(strings: TemplateStringsArray, quantity: quantity): string {
return strings[0] + quantity.toFixed(2) + strings[1];
}
console.log(formatNumbers`That is the worth: ${0}, it is essential.`); // That is the worth: 0.00, it is essential.// Or if we wished to "translate" (change to lowercase right here) translation keys inside strings.
perform translateKey(key: string): string {
return key.toLocaleLowerCase();
}
perform translate(strings: TemplateStringsArray, ...expressions: string[]): string {
return strings.cut back((accumulator, currentValue, index) => accumulator + currentValue + translateKey(expressions[index] ?? ''), '');
}
console.log(translate`Howdy, that is ${'NAME'} to say ${'MESSAGE'}.`); // Howdy, that is title to say message.

Symbols (beforehand incorrectly categorised as ES2022): Distinctive keys for objects: Image("foo") === Image("foo"); // false. Used internally.

const obj: { [index: string]: string } = {};const symbolA = Image('a');
const symbolB = Image.for('b');
console.log(symbolA.description); // "a"
obj[symbolA] = 'a';
obj[symbolB] = 'b';
obj['c'] = 'c';
obj.d = 'd';
console.log(obj[symbolA]); // "a"
console.log(obj[symbolB]); // "b"
// The important thing can't be accessed with another symbols or with out a image.
console.log(obj[Symbol('a')]); // undefined
console.log(obj['a']); // undefined
// The keys aren't enumerated when utilizing for ... in.
for (const i in obj) {
console.log(i); // "c", "d"
}

ES2020

Non-obligatory chaining: To entry a price (by way of indexing) of a doubtlessly undefined object, elective chaining can be utilized by utilizing ? after the guardian object title. That is additionally potential to make use of for indexing ([...]) or perform calling.

// PREVIOUSLY:
// If we have now an object variable (or another construction) we do not know for sure is outlined,
// We can't simply entry the property.
const object: { title: string } | undefined = Math.random() > 0.5 ? undefined : { title: 'take a look at' };
const worth = object.title; // kind error: 'object' is probably 'undefined'.// We may first test whether it is outlined, however this hurts readability and will get complicated for nested objects.
const objectOld: { title: string } | undefined = Math.random() > 0.5 ? undefined : { title: 'take a look at' };
const valueOld = objectOld ? objectOld.title : undefined;
// NEW:
// As an alternative we will use elective chaining.
const objectNew: { title: string } | undefined = Math.random() > 0.5 ? undefined : { title: 'take a look at' };
const valueNew = objectNew?.title;
// This may also be used for indexing and capabilities.
const array: string[] | undefined = Math.random() > 0.5 ? undefined : ['test'];
const merchandise = array?.[0];
const func: (() => string) | undefined = Math.random() > 0.5 ? undefined : () => 'take a look at';
const outcome = func?.();

import(): Dynamically import, similar to import ... from ..., however at runtime and utilizing variables.

let importModule;
if (shouldImport) {
importModule = await import('./module.mjs');
}

String.matchAll: Get a number of matches of an everyday expression together with their seize teams, with out utilizing a loop.

const stringVar = 'testhello,testagain,';// PREVIOUSLY:
// Solely will get matches, however not their seize teams.
console.log(stringVar.match(/take a look at([w]+?),/g)); // ["testhello,", "testagain,"]
// Solely will get one match, together with its seize teams.
const singleMatch = stringVar.match(/take a look at([w]+?),/);
if (singleMatch) {
console.log(singleMatch[0]); // "testhello,"
console.log(singleMatch[1]); // "good day"
}
// Will get the identical outcome, however could be very unintuitive (the exec technique saves the final index).
// Must be outlined exterior the loop (to save lots of the state) and be world (/g),
// in any other case it will produce an infinite loop.
const regex = /take a look at([w]+?),/g;
let execMatch;
whereas ((execMatch = regex.exec(stringVar)) !== null) {
console.log(execMatch[0]); // "testhello,", "testagain,"
console.log(execMatch[1]); // "good day", "once more"
}
// NEW:
// Regex must be world (/g), additionally does not make any sense in any other case.
const matchesIterator = stringVar.matchAll(/take a look at([w]+?),/g);
// Must be iterated or transformed to an array (Array.from()), no direct indexing.
for (const match of matchesIterator) {
console.log(match[0]); // "testhello,", "testagain,"
console.log(match[1]); // "good day", "once more"
}

Promise.allSettled(): Like Promise.all(), however waits for all Guarantees to complete and doesn’t return on the primary reject/throw. It makes dealing with all errors simpler.

async perform success1() {return 'a'}
async perform success2() {return 'b'}
async perform fail1() {throw 'fail 1'}
async perform fail2() {throw 'fail 2'}// PREVIOUSLY:
console.log(await Promise.all([success1(), success2()])); // ["a", "b"]
// however:
attempt {
await Promise.all([success1(), success2(), fail1(), fail2()]);
} catch (e) {
console.log(e); // "fail 1"
}
// Discover: We solely catch one error and may't entry the success values.
// PREVIOUS FIX (actually suboptimal):
console.log(await Promise.all([ // ["a", "b", undefined, undefined]
success1().catch(e => { console.log(e); }),
success2().catch(e => { console.log(e); }),
fail1().catch(e => { console.log(e); }), // "fail 1"
fail2().catch(e => { console.log(e); })])); // "fail 2"
// NEW:
const outcomes = await Promise.allSettled([success1(), success2(), fail1(), fail2()]);
const sucessfulResults = outcomes
.filter(outcome => outcome.standing === 'fulfilled')
.map(outcome => (outcome as PromiseFulfilledResult<string>).worth);
console.log(sucessfulResults); // ["a", "b"]
outcomes.filter(outcome => outcome.standing === 'rejected').forEach(error => {
console.log((error as PromiseRejectedResult).purpose); // "fail 1", "fail 2"
});
// OR:
for (const results of outcomes) {
if (outcome.standing === 'fulfilled') {
console.log(outcome.worth); // "a", "b"
} else if (outcome.standing === 'rejected') {
console.log(outcome.purpose); // "fail 1", "fail 2"
}
}

globalThis: Entry variables within the world context, whatever the atmosphere (browser, NodeJS, …). Nonetheless thought-about dangerous follow, however typically crucial. Akin to this on the high degree within the browser.

console.log(globalThis.Math); // Math Object

import.meta: When utilizing ES-modules, get the present module URL import.meta.url.

console.log(import.meta.url); // "file://..."

export * as … from …: Simply re-export defaults as submodules.

export * as am from 'another-module'

import { am } from 'module'

ES2021

String.replaceAll(): Exchange all cases of a substring in a string, as a substitute of all the time utilizing an everyday expression with the worldwide flag (/g).

const testString = 'good day/greetings everybody/everyone';
// PREVIOUSLY:
// Solely replaces the primary occasion
console.log(testString.substitute('/', '|')); // 'good day|greetings everybody/everyone'// As an alternative a regex wanted for use, which is worse for efficiency and wishes escaping.
// Not the worldwide flag (/g).
console.log(testString.substitute(///g, '|')); // 'good day|greetings everybody|everyone'
// NEW:
// Utilizing replaceAll that is a lot clearer and quicker.
console.log(testString.replaceAll('/', '|')); // 'good day|greetings everybody|everyone'

Promise.any: When just one results of an inventory of guarantees is required, it returns the primary outcome, it solely rejects when all guarantees reject and returns an AggregateError, as a substitute of Promise.race, which immediately rejects.

async perform success1() {return 'a'}
async perform success2() {return 'b'}
async perform fail1() {throw 'fail 1'}
async perform fail2() {throw 'fail 2'}// PREVIOUSLY:
console.log(await Promise.race([success1(), success2()])); // "a"
// however:
attempt {
await Promise.race([fail1(), fail2(), success1(), success2()]);
} catch (e) {
console.log(e); // "fail 1"
}
// Discover: We solely catch one error and may't entry the success worth.
// PREVIOUS FIX (actually suboptimal):
console.log(await Promise.race([ // "a"
fail1().catch(e => { console.log(e); }), // "fail 1"
fail2().catch(e => { console.log(e); }), // "fail 2"
success1().catch(e => { console.log(e); }),
success2().catch(e => { console.log(e); })]));
// NEW:
console.log(await Promise.any([fail1(), fail2(), success1(), success2()])); // "a"
// And it solely rejects when all guarantees reject and returns an AggregateError containing all of the errors.
attempt {
await Promise.any([fail1(), fail2()]);
} catch (e) {
console.log(e); // [AggregateError: All promises were rejected]
console.log(e.errors); // ["fail 1", "fail 2"]
}

Nullish coalescing project (??=): Solely assign a price when it was “nullish” earlier than (null or undefined).

let x1 = undefined;
let x2 = 'a';
const getNewValue = () => 'b';// Assigns the brand new worth to x1, as a result of undefined is nullish.
x1 ??= 'b';
console.log(x1) // "b"
// Doesn't assign a brand new worth to x2, as a result of a string shouldn't be nullish.
// Additionally observe: getNewValue() isn't executed.
x2 ??= getNewValue();
console.log(x1) // "a"

Logical and project (&&=): Solely assign a price when it was “truthy” earlier than (true or a price that converts to true).

let x1 = undefined;
let x2 = 'a';
const getNewValue = () => 'b';// Doesn't assign a brand new worth to x1, as a result of undefined shouldn't be truthy.
// Additionally observe: getNewValue() isn't executed.
x1 &&= getNewValue();
console.log(x1) // undefined
// Assigns a brand new worth to x2, as a result of a string is truthy.
x2 &&= 'b';
console.log(x1) // "b"

Logical or project (||=): Solely assign a price when it was “falsy” earlier than (false or converts to false).

let x1 = undefined;
let x2 = 'a';
const getNewValue = () => 'b';// Assigns the brand new worth to x1, as a result of undefined is falsy.
x1 ||= 'b';
console.log(x1) // "b"
// Doesn't assign a brand new worth to x2, as a result of a string shouldn't be falsy.
// Additionally observe: getNewValue() isn't executed.
x2 ||= getNewValue();
console.log(x1) // "a"

WeakRef: Maintain a “weak” reference to an object, with out stopping the thing from being garbage-collected.

const ref = new WeakRef(factor);// Get the worth, if the thing/factor nonetheless exists and was not garbage-collected.
const worth = ref.deref;
console.log(worth); // undefined
// Seems to be like the thing doesn't exist anymore.

Numeric literal separators (_): Separate numbers utilizing _ for higher readability. This doesn’t have an effect on performance.

const int = 1_000_000_000;
const float = 1_000_000_000.999_999_999;
const max = 9_223_372_036_854_775_807n;
const binary = 0b1011_0101_0101;
const octal = 0o1234_5670;
const hex = 0xD0_E0_F0;

ES2022

#personal: Make class members (properties and strategies) personal by naming them beginning with #. These then can solely be accessed from the category itself. They can’t be deleted or dynamically assigned. Any incorrect conduct will lead to a JavaScript (not TypeScript) syntax error. This isn’t advisable for TypeScript tasks, as a substitute simply use the present personal key phrase.

class ClassWithPrivateField {
#privateField;
#anotherPrivateField = 4;constructor() {
this.#privateField = 42; // Legitimate
this.#privateField; // Syntax error
this.#undeclaredField = 444; // Syntax error
console.log(this.#anotherPrivateField); // 4
}
}
const occasion = new ClassWithPrivateField();
occasion.#privateField === 42; // Syntax error

static class members: Mark any class fields (properties and strategies) as static.

class Logger {
static id = 'Logger1';
static kind = 'GenericLogger';
static log(message: string | Error) {
console.log(message);
}
}class ErrorLogger extends Logger {
static kind = 'ErrorLogger';
static qualifiedType;
static log(e: Error) {
return tremendous.log(e.toString());
}
}
console.log(Logger.kind); // "GenericLogger"
Logger.log('Check'); // "Check"
// The instantiation of static-only lessons is ineffective and solely executed right here for demonstration functions.
const log = new Logger();
ErrorLogger.log(new Error('Check')); // Error: "Check" (not affected by instantiation of the guardian)
console.log(ErrorLogger.kind); // "ErrorLogger"
console.log(ErrorLogger.qualifiedType); // undefined
console.log(ErrorLogger.id); // "Logger1"
// This throws as a result of log() shouldn't be an occasion technique however a static technique.
console.log(log.log()); // log.log shouldn't be a perform

static initialization blocks in lessons: Block which is run when a category is initialized, principally the “constructor” for static members.

class Check {
static staticProperty1 = 'Property 1';
static staticProperty2;
static {
this.staticProperty2 = 'Property 2';
}
}console.log(Check.staticProperty1); // "Property 1"
console.log(Check.staticProperty2); // "Property 2"

Import Assertions (non-standard, carried out in V8): Assert which kind an import is utilizing import ... from ... assert { kind: 'json' }. Can be utilized to immediately import JSON with out having to parse it.

import json from './foo.json' assert { kind: 'json' };
console.log(json.reply); // 42

RegExp match indices: Get the beginning and finish indexes of normal expression matches and seize teams. This works for RegExp.exec(), String.match() and String.matchAll().

const matchObj = /(take a look at+)(good day+)/d.exec('start-testesthello-stop');// PREVIOUSLY:
console.log(matchObj?.index);
// NEW:
if (matchObj) {
// Begin and finish index of complete match (earlier than we solely had the beginning).
console.log(matchObj.indices[0]); // [9, 18]
// Begin and finish indexes of seize teams.
console.log(matchObj.indices[1]); // [9, 13]
console.log(matchObj.indices[2]); // [13, 18]
}

Unfavourable indexing (.at(-1)): When indexing an array or a string, at can be utilized to index from the top. It’s equal to arr[arr.length - 1)

console.log([4, 5].at(-1)) // 5

hasOwn: Advisable new technique to discover out which properties an object has as a substitute of utilizing obj.hasOwnProperty(). It really works higher for some edge circumstances.

const obj = { title: 'take a look at' };console.log(Object.hasOwn(obj, 'title')); // true
console.log(Object.hasOwn(obj, 'gender')); // false

Error trigger: An elective trigger can now be specified for Errors, which permits specifying of the unique error when re-throwing it.

attempt {
attempt {
connectToDatabase();
} catch (err) {
throw new Error('Connecting to database failed.', { trigger: err });
}
} catch (err) {
console.log(err.trigger); // ReferenceError: connectToDatabase shouldn't be outlined
}

Future (can already be used with TypeScript 4.9)

Auto-Accessor: Robotically make a property personal and create get/set accessors for it.

class Individual {
accessor title: string;constructor(title: string) {
this.title = title;
console.log(this.title) // 'take a look at'
}
}
const particular person = new Individual('take a look at');

Fundamentals (Context for additional introductions)

Generics: Cross by varieties to different varieties. This permits for varieties to be generalized however nonetheless typesafe. At all times desire this over utilizing any or unknown.

// WITHOUT:
perform getFirstUnsafe(listing: any[]): any {
return listing[0];
}const firstUnsafe = getFirstUnsafe(['test']); // typed as any
// WITH:
perform getFirst<Sort>(listing: Sort[]): Sort {
return listing[0];
}
const first = getFirst<string>(['test']); // typed as string
// On this case the parameter may even be dropped as a result of it's inferred from the argument.
const firstInferred = getFirst(['test']); // typed as string
// The categories accepted as generics may also be restricted utilizing `extends`. The Sort can be normally shortened to T.
class Checklist<T extends string | quantity> {
personal listing: T[] = [];
get(key: quantity): T {
return this.listing[key];
}
push(worth: T): void {
this.listing.push(worth);
}
}
const listing = new Checklist<string>();
listing.push(9); // Sort error: Argument of kind 'quantity' shouldn't be assignable to parameter of kind 'string'.
const booleanList = new Checklist<boolean>(); // Sort error: Sort 'boolean' doesn't fulfill the constraint 'string | quantity'.

Previous (Nonetheless related older introductions)

Utility Sorts: TypeScript comprises many utility varieties, a few of the most helpful are defined right here.

interface Check {
title: string;
age: quantity;
}// The Partial utility kind makes all properties elective.
kind TestPartial = Partial<Check>; // typed as  undefined; age?: quantity 
// The Required utility kind does the alternative.
kind TestRequired = Required<TestPartial>; // typed as { title: string; age: quantity; }
// The Readonly utility kind makes all properties readonly.
kind TestReadonly = Readonly<Check>; // typed as { readonly title: string; readonly age: string }
// The Report utility kind permits the straightforward definition of objects/maps/dictionaries. It's most well-liked to index signatures every time potential.
const config: Report<string, boolean> = { choice: false, anotherOption: true };
// The Choose utility kind will get solely the required properties.
kind TestLess = Choose<Check, 'title'>; // typed as { title: string; }
kind TestBoth = Choose<Check, 'title' | 'age'>; // typed as { title: string; age: string; }
// The Omit utility kind ignores the required properties.kind
kind TestFewer = Omit<Check, 'title'>; // typed as { age: string; }
kind TestNone = Omit<Check, 'title' | 'age'>; // typed as {}
// The Parameters utility kind will get the parameters of a perform kind.
perform doSmth(worth: string, anotherValue: quantity): string {
return 'take a look at';
}
kind Params = Parameters<typeof doSmth>; // typed as [value: string, anotherValue: number]
// The ReturnType utility kind will get the return kind of a perform kind.
kind Return = ReturnType<typeof doSmth>; // typed as string
// There are numerous extra, a few of that are launched additional down.

Conditional Sorts: Conditionally set a kind primarily based on if some kind matches / extends one other kind. They are often learn in the identical method because the conditional (ternary) operator in JavaScript.

// Solely extracts the array kind whether it is an array, in any other case returns the identical kind.
kind Flatten<T> = T extends any[] ? T[number] : T;// Extracts out the factor kind.
kind Str = Flatten<string[]>; // typed as string
// Leaves the sort alone.
kind Num = Flatten<quantity>; // typed as quantity

Inferring with conditional varieties: Not all generic varieties must be specified by the patron, some may also be inferred from the code. To have conditional logic primarily based on inferred varieties, the infer key phrase is required. It in a method defines momentary inferred kind variables.

// Beginning with the earlier instance, this may be written extra cleanly.
kind FlattenOld<T> = T extends any[] ? T[number] : T;// As an alternative of indexing the array, we will simply infer the Merchandise kind from the array.
kind Flatten<T> = T extends (infer Merchandise)[] ? Merchandise : T;
// If we wished to write down a kind that will get the return kind of a perform and in any other case is undefined, we may additionally infer that.
kind GetReturnType<Sort> = Sort extends (...args: any[]) => infer Return ? Return : undefined;
kind Num = GetReturnType<() => quantity>; // typed as quantity
kind Str = GetReturnType<(x: string) => string>; // typed as string
kind Bools = GetReturnType<(a: boolean, b: boolean) => void>; // typed as undefined

Tuple Non-obligatory Parts and Relaxation: Declare elective components in tuples utilizing ? and the remaining primarily based on one other kind utilizing ....

// If we do not but know the way lengthy a tuple goes to be, nevertheless it's no less than one, we will specify elective varieties utilizing `?`.
const listing: [number, number?, boolean?] = [];
listing[0] // typed as quantity
listing[1] // typed as quantity | undefined
listing[2] // typed as boolean | undefined
listing[3] // Sort error: Tuple kind '[number, (number | undefined)?, (boolean | undefined)?]' of size '3' has no factor at index '3'.// We may additionally base the tuple on an current kind.
// If we need to pad an array firstly, we may do this utilizing the remaining operator `...`.
perform padStart<T extends any[]>(arr: T, pad: string): [string, ...T] {
const [pad, ...rest] = arr;
return relaxation;
}
const padded = padStart([1, 2], 'take a look at'); // typed as [string, number, number]

summary Courses and strategies: Courses and the strategies inside them may be declared as summary to forestall them from being instantiated.

summary class Animal {
summary makeSound(): void;transfer(): void {
console.log('roaming the earth...');
}
}
// Summary strategies must be carried out when prolonged.
class Cat extends Animal {} // Compile error: Non-abstract class 'Cat' doesn't implement inherited summary member 'makeSound' from class 'Animal'.
class Canine extends Animal {
makeSound() {
console.log('woof');
}
}
// Summary lessons can't be instantiated (like Interfaces), and summary strategies can't be known as.
new Animal(); // Compile error: Can not create an occasion of an summary class.
const canine = new Canine().makeSound(); // "woof"

Constructor signatures: Outline the typing of constructors exterior of Class declarations. Shouldn’t be used generally, summary lessons can be utilized as a substitute.

interface MyInterface {
title: string;
}interface ConstructsMyInterface {
new(title: string): MyInterface;
}
class Check implements MyInterface {
title: string;
constructor(title: string) {
this.title = title;
}
}
class AnotherTest {
age: quantity;
}
perform makeObj(n: ConstructsMyInterface) {
return new n('good day!');
}
const obj = makeObj(Check); // typed as Check
const anotherObj = makeObj(AnotherTest); // Sort error: Argument of kind 'typeof AnotherTest' shouldn't be assignable to parameter of kind 'ConstructsMyInterface'.

ConstructorParameters Utility Sort: TypeScript helper perform which will get the constructor parameters from a constructor kind (however not a category).

// What if we wished to get the constructor argument for our makeObj perform.
interface MyInterface {
title: string;
}interface ConstructsMyInterface {
new(title: string): MyInterface;
}
class Check implements MyInterface {
title: string;
constructor(title: string) {
this.title = title;
}
}
perform makeObj(take a look at: ConstructsMyInterface, ...args: ConstructorParameters<ConstructsMyInterface>) {
return new take a look at(...args);
}
makeObj(Check); // Sort error: Anticipated 2 arguments, however obtained 1.
const obj = makeObj(Check, 'take a look at'); // typed as Check

TypeScript 4.0

Variadic Tuple Sorts: Relaxation components in tuples can now be generic. The usage of a number of relaxation components is now additionally allowed.

// What if we had a perform that mixes two tuples of undefined size and kinds? How can we outline the return kind?// PREVIOUSLY:
// We may write some overloads.
declare perform concat(arr1: [], arr2: []): [];
declare perform concat<A>(arr1: [A], arr2: []): [A];
declare perform concat<A, B>(arr1: [A], arr2: [B]): [A, B];
declare perform concat<A, B, C>(arr1: [A], arr2: [B, C]): [A, B, C];
declare perform concat<A, B, C, D>(arr1: [A], arr2: [B, C, D]): [A, B, C, D];
declare perform concat<A, B>(arr1: [A, B], arr2: []): [A, B];
declare perform concat<A, B, C>(arr1: [A, B], arr2: [C]): [A, B, C];
declare perform concat<A, B, C, D>(arr1: [A, B], arr2: [C, D]): [A, B, C, D];
declare perform concat<A, B, C, D, E>(arr1: [A, B], arr2: [C, D, E]): [A, B, C, D, E];
declare perform concat<A, B, C>(arr1: [A, B, C], arr2: []): [A, B, C];
declare perform concat<A, B, C, D>(arr1: [A, B, C], arr2: [D]): [A, B, C, D];
declare perform concat<A, B, C, D, E>(arr1: [A, B, C], arr2: [D, E]): [A, B, C, D, E];
declare perform concat<A, B, C, D, E, F>(arr1: [A, B, C], arr2: [D, E, F]): [A, B, C, D, E, F];
// Even only for three gadgets every, that is actually suboptimal.
// As an alternative we may mix the kinds.
declare perform concatBetter<T, U>(arr1: T[], arr2: U[]): (T | U)[];
// However this varieties to (T | U)[]
// NEW:
// With variadic tuple varieties, we will outline it simply and hold the details about the size.
declare perform concatNew<T extends Arr, U extends Arr>(arr1: T, arr2: U): [...T, ...U];
const tuple = concatNew([23, 'hey', false] as [number, string, boolean], [5, 99, 20] as [number, number, number]);
console.log(tuple[0]); // 23
const factor: quantity = tuple[1]; // Sort error: Sort 'string' shouldn't be assignable to kind 'quantity'.
console.log(tuple[6]); // Sort error: Tuple kind '[23, "hey", false, 5, 99, 20]' of size '6' has no factor at index '6'.

Labeled Tuple Parts: Tuple components can now be named like [start: number, end: number]. If one of many components is known as, all of them have to be named.

kind Foo = [first: number, second?: string, ...rest: any[]];// This permits the arguments to be named accurately right here, it additionally reveals up within the editor.
declare perform someFunc(...args: Foo);

Class Property Inference from Constructors: When a property is ready within the constructor, the sort can now be inferred and now not must be set manually.

class Animal {
// No have to set varieties when they're assigned within the constructor.
title;constructor(title: string) {
this.title = title;
console.log(this.title); // typed as string
}
}

JSDoc @deprecated Assist: The JSDoc/TSDoc @deprecated tag is now acknowledged by TypeScript.

/** @deprecated message */
kind Check = string;const take a look at: Check = 'dfadsf'; // Sort error: 'Check' is deprecated.

TypeScript 4.1

Template Literal Sorts: When defining literal varieties, varieties may be specified by templating like ${Sort}. This permits the development of complicated string varieties, for instance when combining a number of string literals.

kind VerticalDirection = 'high' | 'backside';
kind HorizontalDirection = 'left' | 'proper';
kind Route = `${VerticalDirection} ${HorizontalDirection}`;const dir1: Route = 'high left';
const dir2: Route = 'left'; // Sort error: Sort '"left"' shouldn't be assignable to kind '"high left" | "high proper" | "backside left" | "backside proper"'.
const dir3: Route = 'left high'; // Sort error: Sort '"left high"' shouldn't be assignable to kind '"high left" | "high proper" | "backside left" | "backside proper"'.
// This may also be mixed with generics and the brand new utility varieties.
declare perform makeId<T extends string, U extends string>(first: T, second: U): `${Capitalize<T>}-${Lowercase<U>}`;

Key Remapping in Mapped Sorts: Retype mapped varieties whereas nonetheless utilizing their values like [K in keyof T as NewKeyType]: T[K].

// As an example we wished to reformat an object however prepend its IDs with an underscore.
const obj = { value1: 0, value2: 1, value3: 3 };
const newObj: { [Property in keyof typeof obj as `_${Property}`]: quantity }; // typed as { _value1: quantity; _value2: quantity; value3: quantity; }

Recursive Conditional Sorts: Use conditional varieties within its definition themselves. This permits for varieties that conditionally unpack an infinitely nested worth.

kind Awaited<T> = T extends PromiseLike<infer U> ? Awaited<U> : T;kind P1 = Awaited<string>; // typed as string
kind P2 = Awaited<Promise<string>>; // typed as string
kind P3 = Awaited<Promise<Promise<string>>>; // typed as string

Editor help for JSDOC @see tag: The JSDoc/TSDoc @see variable/kind/hyperlink tag is now supported in editors.

const originalValue = 1;
/**
* Copy of one other worth
* @see originalValue
*/
const worth = originalValue;

tsc — explainFiles: The --explainFiles choice can be utilized for the TypeScript CLI to clarify which information are a part of the compilation and why. This may be helpful for debugging. Warning: For big tasks or complicated setups it will generate numerous output, as a substitute use tsc --explainFiles | much less or one thing comparable.

tsc --explainFiles<<output
../../.asdf/installs/nodejs/16.13.1/.npm/lib/node_modules/typescript/lib/lib.es5.d.ts
Library referenced by way of 'es5' from file '../../.asdf/installs/nodejs/16.13.1/.npm/lib/node_modules/typescript/lib/lib.es2015.d.ts'
Library referenced by way of 'es5' from file '../../.asdf/installs/nodejs/16.13.1/.npm/lib/node_modules/typescript/lib/lib.es2015.d.ts'
../../.asdf/installs/nodejs/16.13.1/.npm/lib/node_modules/typescript/lib/lib.es2015.d.ts
Library referenced by way of 'es2015' from file '../../.asdf/installs/nodejs/16.13.1/.npm/lib/node_modules/typescript/lib/lib.es2016.d.ts'
Library referenced by way of 'es2015' from file '../../.asdf/installs/nodejs/16.13.1/.npm/lib/node_modules/typescript/lib/lib.es2016.d.ts'
../../.asdf/installs/nodejs/16.13.1/.npm/lib/node_modules/typescript/lib/lib.es2016.d.ts
Library referenced by way of 'es2016' from file '../../.asdf/installs/nodejs/16.13.1/.npm/lib/node_modules/typescript/lib/lib.es2017.d.ts'
Library referenced by way of 'es2016' from file '../../.asdf/installs/nodejs/16.13.1/.npm/lib/node_modules/typescript/lib/lib.es2017.d.ts'
...
output

Destructured Variables Can Be Explicitly Marked as Unused: When destructuring, an underscore can be utilized to mark a variable as unused. This prevents TypeScript from throwing an “unused variable” error.

const [_first, second] = [3, 5];
console.log(second);// And even shorter
const [_, value] = [3, 5];
console.log(worth);

TypeScript 4.3

Separate Write Sorts on Properties: When defining set/get accessors, the write/set kind can now be completely different than the learn/get kind. This permits for setters that settle for a number of codecs of the identical worth.

class Check {
personal _value: quantity;get worth(): quantity {
return this._value;
}
set worth(worth: quantity | string) {
if (typeof worth === 'quantity') {
this._value = worth;
return;
}
this._value = parseInt(worth, 10);
}
}

override: Explicitly mark inherited class strategies as overrides utilizing override, so when the guardian class adjustments, TypeScript can notify you that the guardian technique now not exists. This permits for safer complicated inheritance patterns.

class Father or mother {
getName(): string {
return 'title';
}
}class NewParent {
getFirstName(): string {
return 'title';
}
}

  See Also
  
    
  
  
    		
			blinkingrobots		
		    Brief-term Hebbian studying can implement transformer-like consideration
  
class Check extends Father or mother {
override getName(): string {
return 'take a look at';
}
}
class NewTest extends NewParent {
override getName(): string { // Sort error: This member can't have an 'override' modifier as a result of it's not declared within the base class 'NewParent'.
return 'take a look at';
}
}

static Index Signatures: When utilizing static properties on a Class, index signatures can now even be set utilizing static [propName: string]: string.

// PREVIOUSLY:
class Check {}Check.take a look at = ''; // Sort error: Property 'take a look at' doesn't exist on kind 'typeof Check'.
// NEW:
class NewTest {
static [key: string]: string;
}
NewTest.take a look at = '';

Editor Assist for JSDOC @hyperlink Tags: The JSDoc/TSDoc {@hyperlink variable/kind/hyperlink} inline tag is now supported and can present up and resolve in editors.

const originalValue = 1;
/**
* Copy of {@hyperlink originalValue}
*/
const worth = originalValue;

TypeScript 4.4

Precise Non-obligatory Property Sorts ( — exactOptionalPropertyTypes): Utilizing the compiler flag --exactOptionalPropertyTypes (or in tsconfig.json) assignments as undefined are now not allowed for properties which implicitly permit undefined (for instance property?: string). As an alternative undefined must explicitly be allowed like property: string | undefined.

class Check  undefined;
const take a look at = new Check();
take a look at.title = 'take a look at'; // Sort error: Possibility 'exactOptionalPropertyTypes' can't be specified with out specifying choice 'strictNullChecks'.
take a look at.age = 0;

TypeScript 4.5

The Awaited Sort and Promise Enhancements: The brand new Awaited<> utility kind extracts the worth kind from infinitely nested Guarantees (like await does for the worth). This additionally improved the sort inference for Promise.all().

// As an example we need to have a generic awaited worth.
// We are able to use the Awaited utility kind for this (its supply code was a part of a earlier instance),
// so infinitely nested Guarantees all resolve to their worth.
kind P1 = Awaited<string>; // typed as string
kind P2 = Awaited<Promise<string>>; // typed as string
kind P3 = Awaited<Promise<Promise<string>>>; // typed as string

kind Modifiers on Import Names: Inside regular (not import kind) import statements, the kind key phrase can be utilized to sign that the worth ought to solely be imported for kind compilation (and may be stripped away).

// PREVIOUSLY:
// The optimum technique to import varieties is to make use of the `import kind` key phrase to forestall them from really being imported after compilation.
import { one thing } from './file';
import kind { SomeType } from './file';
// This wants two import statements for a similar file.// NEW:
// Now this may be mixed into one assertion.
import { one thing, kind SomeType } from './file';

const Assertions: When defining constants as const can be utilized to precisely kind them as literal varieties. This has numerous use circumstances and makes correct typings simpler. It additionally makes objects and arrays readonly, which prevents mutations of fixed objects.

// PREVIOUSLY:
const obj = { title: 'foo', worth: 9, toggle: false }; // typed as { title: string; worth: quantity; toggle: boolean; }
// Any worth may be assigned as a result of they're usually typed.
obj.title = 'bar';const tuple = ['name', 4, true]; // typed as (string | quantity | boolean)[]
// The size and actual kind can't be decided from the sort. Any values may be assigned wherever.
tuple[0] = 0;
tuple[3] = 0;
// NEW:
const objNew = { title: 'foo', worth: 9, toggle: false } as const; // typed as { readonly title: "foo"; readonly worth: 9; readonly toggle: false; }
// No worth may be assigned (as a result of it's outlined as "foo" (and likewise is readonly)).
objNew.title = 'bar'; // kind error: Can not assign to 'title' as a result of it's a read-only property.
const tupleNew = ['name', 4, true] as const; // typed as readonly ["name", 4, true]
// The size and actual kind are actually outlined and nothing may be assigned (as a result of it's outlined as literals (and likewise is readonly)).
tupleNew[0] = 0; // kind error: Can not assign to '0' as a result of it's a read-only property.
tupleNew[3] = 0; // kind error: Index signature in kind 'readonly ["name", 4, true]' solely permits studying.

Snippet Completions for Strategies in Courses: When a category inherits technique varieties, they’re now urged as snippets in editors.

TypeScript 4.6

Listed Entry Inference Enhancements When immediately indexing a Sort with a key, the sort will now be extra correct when it’s on the identical object. Additionally, only a good instance to indicate what is feasible with fashionable TypeScript.

interface AllowedTypes {
'quantity': quantity;
'string': string;
'boolean': boolean;
}// The Report specifies the type and worth kind from the allowed varieties.
kind UnionRecord<AllowedKeys extends keyof AllowedTypes> = { [Key in AllowedKeys]:
{
sort: Key;
worth: AllowedTypes[Key];
logValue: (worth: AllowedTypes[Key]) => void;
}
}[AllowedKeys];
// The perform logValue solely accepts the worth of the Report.
perform processRecord<Key extends keyof AllowedTypes>(file: UnionRecord<Key>) {
file.logValue(file.worth);
}
processRecord({
sort: 'string',
worth: 'good day!',
// The worth used to implicitly have the sort string | quantity | boolean,
// however now could be accurately inferred to only string.
logValue: worth => {
console.log(worth.toUpperCase());
}
});

TypeScript Hint Analyzer ( — generateTrace): The --generateTrace <Output folder> choice can be utilized for the TypeScript CLI to generate a file containing particulars concerning the sort checking and compilation course of. This might help optimize complicated varieties.

tsc --generateTrace hintcat hint/hint.json
<<output
[
{"name":"process_name","args":{"name":"tsc"},"cat":"__metadata","ph":"M","ts":...,"pid":1,"tid":1},
{"name":"thread_name","args":{"name":"Main"},"cat":"__metadata","ph":"M","ts":...,"pid":1,"tid":1},
{"name":"TracingStartedInBrowser","cat":"disabled-by-default-devtools.timeline","ph":"M","ts":...,"pid":1,"tid":1},
{"pid":1,"tid":1,"ph":"B","cat":"program","ts":...,"name":"createProgram","args":{"configFilePath":"/...","rootDir":"/..."}},
{"pid":1,"tid":1,"ph":"B","cat":"parse","ts":...,"name":"createSourceFile","args":{"path":"/..."}},
{"pid":1,"tid":1,"ph":"E","cat":"parse","ts":...,"name":"createSourceFile","args":{"path":"/..."}},
{"pid":1,"tid":1,"ph":"X","cat":"program","ts":...,"name":"resolveModuleNamesWorker","dur":...,"args":{"containingFileName":"/..."}},
...
output
cat trace/types.json
<<output
[{"id":1,"intrinsicName":"any","recursionId":0,"flags":["..."]},
{"id":2,"intrinsicName":"any","recursionId":1,"flags":["..."]},
{"id":3,"intrinsicName":"any","recursionId":2,"flags":["..."]},
{"id":4,"intrinsicName":"error","recursionId":3,"flags":["..."]},
{"id":5,"intrinsicName":"unresolved","recursionId":4,"flags":["..."]},
{"id":6,"intrinsicName":"any","recursionId":5,"flags":["..."]},
{"id":7,"intrinsicName":"intrinsic","recursionId":6,"flags":["..."]},
{"id":8,"intrinsicName":"unknown","recursionId":7,"flags":["..."]},
{"id":9,"intrinsicName":"unknown","recursionId":8,"flags":["..."]},
{"id":10,"intrinsicName":"undefined","recursionId":9,"flags":["..."]},
{"id":11,"intrinsicName":"undefined","recursionId":10,"flags":["..."]},
{"id":12,"intrinsicName":"null","recursionId":11,"flags":["..."]},
{"id":13,"intrinsicName":"string","recursionId":12,"flags":["..."]},
...
output

TypeScript 4.7

ECMAScript Module Assist in Node.js: When utilizing ES Modules as a substitute of CommonJS, TypeScript now helps specifying the default. Specify it within the tsconfig.json.

...
"compilerOptions": [
...
"module": "es2020"
]
...

kind in bundle.json: The sphere kind in bundle.json may be set to "module", which is required to make use of node.js with ES Modules. Most often, that is sufficient for TypeScript and the compiler choice above shouldn’t be wanted.

...
"kind": "module"
...

Instantiation Expressions: Instantiation expressions permit the specifying of kind parameters when referencing a price. This permits the narrowing of generic varieties with out creating wrappers.

class Checklist<T> {
personal listing: T[] = [];get(key: quantity): T {
return this.listing[key];
}
push(worth: T): void {
this.listing.push(worth);
}
}
perform makeList<T>(gadgets: T[]): Checklist<T> {
const listing = new Checklist<T>();
gadgets.forEach(merchandise => listing.push(merchandise));
return listing;
}
// As an example we need to have a perform that creates an inventory however solely permits sure values.
// PREVIOUSLY:
// We have to manually outline a wrapper perform and move the argument.
perform makeStringList(textual content: string[]) {
return makeList(textual content);
}
// NEW:
// Utilizing instantiation expressions, that is a lot simpler.
const makeNumberList = makeList<quantity>;

extends Constraints on infer Sort Variables: When inferring kind variables in conditional varieties, they’ll now immediately be narrowed/constrained by utilizing extends.

// As an example we need to kind a kind that solely will get the primary factor of an array if it is a string.
// We are able to use conditional varieties for this.// PREVIOUSLY:
kind FirstIfStringOld<T> =
T extends [infer S, ...unknown[]]
? S extends string ? S : by no means
: by no means;
// However this wants two nested conditional varieties. We are able to additionally do it in a single.
kind FirstIfString<T> =
T extends [string, ...unknown[]]
// Seize the primary kind out of `T`
? T[0]
: by no means;
// That is nonetheless suboptimal as a result of we have to index the array for the proper kind.
// NEW:
// Utilizing extends Constraints on infer Sort Variables, this may be declared rather a lot simpler.
kind FirstIfStringNew<T> =
T extends [infer S extends string, ...unknown[]]
? S
: by no means;
// Word that the typing labored the identical earlier than, that is only a cleaner syntax.
kind A = FirstIfStringNew<[string, number, number]>; // typed as string
kind B = FirstIfStringNew<["hello", number, number]>; // typed as "good day"
kind C = FirstIfStringNew<["hello" | "world", boolean]>; // typed as "good day" | "world"
kind D = FirstIfStringNew<[boolean, number, string]>; // typed as by no means

Non-obligatory Variance Annotations for Sort Parameters: Generics can have completely different behaviors when checking in the event that they “match”, for instance, the permitting of inheritance is reversed for getters and setters. This may now be optionally specified for readability.

// As an example we have now an interface / a category that extends one other one.
interface Animal {
animalStuff: any;
}interface Canine extends Animal {
dogStuff: any;
}
// And we have now some generic "getter" and "setter".
kind Getter<T> = () => T;
kind Setter<T> = (worth: T) => void;
// If we need to discover out if Getter<T1> matches Getter<T2> or Setter<T1> matches Setter<T2>, this is determined by the covariance.
perform useAnimalGetter(getter: Getter<Animal>) {
getter();
}
// Now we will move a Getter into the perform.
useAnimalGetter((() => ({ animalStuff: 0 }) as Animal));
// This clearly works.
// However what if we need to use a Getter which returns a Canine as a substitute?
useAnimalGetter((() => ({ animalStuff: 0, dogStuff: 0 }) as Canine));
// This works as properly as a result of a Canine can be an Animal.
perform useDogGetter(getter: Getter<Canine>) {
getter();
}
// If we attempt the identical for the useDogGetter perform we is not going to get the identical conduct.
useDogGetter((() => ({ animalStuff: 0 }) as Animal)); // Sort error: Property 'dogStuff' is lacking in kind 'Animal' however required in kind 'Canine'.
// This doesn't work, as a result of a Canine is anticipated, not simply an Animal.
useDogGetter((() => ({ animalStuff: 0, dogStuff: 0 }) as Canine));
// This, nevertheless, works.
// Intuitively we'd perhaps anticipate the Setters to behave the identical, however they do not.
perform setAnimalSetter(setter: Setter<Animal>, worth: Animal) {
setter(worth);
}
// If we move a Setter of the identical kind it nonetheless works.
setAnimalSetter((worth: Animal) => {}, { animalStuff: 0 });
perform setDogSetter(setter: Setter<Canine>, worth: Canine) {
setter(worth);
}
// Similar right here.
setDogSetter((worth: Canine) => {}, { animalStuff: 0, dogStuff: 0 });
// But when we move a Canine Setter into the setAnimalSetter perform, the conduct is reversed from the Getters.
setAnimalSetter((worth: Canine) => {}, { animalStuff: 0, dogStuff: 0 }); // Sort error: Argument of kind '(worth: Canine) => void' shouldn't be assignable to parameter of kind 'Setter<Animal>'.
// This time it really works the opposite method round.
setDogSetter((worth: Animal) => {}, { animalStuff: 0, dogStuff: 0 });
// NEW:
// To sign this to TypeScript (not wanted however useful for readability), use the brand new Non-obligatory Variance Annotations for Sort Parameters.
kind GetterNew<out T> = () => T;
kind SetterNew<in T> = (worth: T) => void;

Decision Customization with moduleSuffixes: When utilizing environments which have customized file suffixes (for instance .ios for native app builds), these can now be specified for TypeScript to accurately resolve imports. Specify them within the tsconfig.json.

...
"compilerOptions": [
...
"module": [".ios", ".native", ""]
]
...

import * as foo from './foo';
// This primary checks ./foo.ios.ts, ./foo.native.ts, and eventually ./foo.ts.

Go to Supply Definition in editors: In editors, the brand new “go to supply definition” menu choice is accessible. It’s much like “go to definition”, however prefers .ts and .js information over kind definitions (.d.ts).

TypeScript 4.9

The satisfies Operator: The satisfies operator permits checking the compatibility with varieties with out really assigning that kind. This permits for maintaining extra correct inferred varieties whereas nonetheless maintaining compatibility.

// PREVIOUSLY:
// As an example we have now an object/map/dictionary which shops numerous gadgets and their colours.
const obj = {
fireTruck: [255, 0, 0],
bush: '#00ff00',
ocean: [0, 0, 255]
} // typed as { fireTruck: quantity[]; bush: string; ocean: quantity[]; }// This implicitly varieties the properties so we will function on the arrays and the string.
const rgb1 = obj.fireTruck[0]; // typed as quantity
const hex = obj.bush; // typed as string
// As an example we solely need to permit sure objects.
// We may use a Report kind.
const oldObj: Report<string, [number, number, number] | string> = {
fireTruck: [255, 0, 0],
bush: '#00ff00',
ocean: [0, 0, 255]
} // typed as Report<string, [number, number, number] | string>
// However now we lose the typings of the properties.
const oldRgb1 = oldObj.fireTruck[0]; // typed as string | quantity
const oldHex = oldObj.bush; // typed as string | quantity
// NEW:
// With the satisfies key phrase we will test compatibility with a kind with out really assigning it.
const newObj = {
fireTruck: [255, 0, 0],
bush: '#00ff00',
ocean: [0, 0, 255]
} satisfies Report<string, [number, number, number] | string> // typed as { fireTruck: [number, number, number]; bush: string; ocean: [number, number, number]; }
// And we nonetheless have the typings of the properties, the array even obtained extra correct by changing into a tuple.
const newRgb1 = newObj.fireTruck[0]; // typed as quantity
const newRgb4 = newObj.fireTruck[3]; // Sort error: Tuple kind '[number, number, number]' of size '3' has no factor at index '3'.
const newHex = newObj.bush; // typed as string

“Take away Unused Imports” and “Type Imports” Instructions for Editors: In editors, the brand new instructions (and auto-fixes) “Take away Unused Imports” and “Type Imports” make managing imports simpler.

Source Link