The power of TypeScript will be revealed by the example of several tasks from type-challenges of the hard level.

Advanced types / Holy.js notes

Given an object, returns object with all optional fields

GetOptional

Given a number as string literal type, returns a number as number literal type

StringToNumber

Given a string and a separator, returns an array or a tuple with the substrings between the separator

Split

Given a tuple and a filter, returns the tuple without elements that are part of the filter

Tuple Filter

Given two objects, returns the object which is formed as a spread of two objects

Spread in Object types

Given a number as a string, return its absolute value as a string too

Absolute

Given a string, return a union of all characters from the string

Making Union out of string

We have spread on objects in JavaScript so we can add value by the specified key, let's find out how to do that in TypeScript.

Append to Object

Given the tuple, make it flatten as Array.prototype.flat when pass Infinity

Flatten Tuple Type

Given the string, calculate its length. Also try to find the maximum computable string length having a limit of recursive calls

Length of String

Given a union, return a union of tuples with all possible permutations (all possible positions of elements without repetition)

Permutations

Given the function and the type, include the type as the following argument in the list of function arguments

Append argument to a function

Given the string, replace all string occurrences with specified string

Replace all occurrences in a string

Given the string, replace first string occurrence with specified string

Replace occurrence in a string

Uppercase, Lowercase, Capitalize and Uncapitalize since TypeScript 4.1

Type Aliases for String manipulation

Given the string, remove whitespaces from the beginning and the end

Trim

Given the string, remove whitespaces from the beginning

Trim Left

Structural type system, workaround in TypeScript, unique symbol and code examples

Opaque Types

Given a union of several types, remove those types which doesn't extend the specified structure

Extract under the hood

Given the tuple with Promise elements, return Promise of tuple

Promise.all under the hood

Given the tuple, implement Pop, Shift, Push and Unshift methods like Array.prototype has

Manipulation with Tuple elements

Infer last element

Given API, collect the object with keys and values after each call

Mapped Types in functions

Given the tuple, return a union of tuple elements

Making union out of tuple

Given the object, return object where all properties on all levels are readonly

Recursive Readonly for objects

Given the object and a union of properties, return object where those properties are readonly

Partial Readonly

Given the object and a union of properties, return the object but without those properties

Omit under the hood

Given the function, we need to extract what it returns

ReturnType under the hood

Given the tuple and the type, return true if the type is an element of the tuple. Otherwise, return false

Includes

Given two tuples, put the elements of both of them into the resulting tuple

Spread in Tuple types

Given the boolean, in case of true return first type, otherwise second one

Boolean conditional statement

Given the promise, return the value after applying await recursively

Unwrapping Promises

Given two unions, remove all the elements of the second one from the first union

Exclude under the hood

Infer length

Given the tuple, return its first element

Infer first element

Given the tuple, we need to get object where key and value equals to the elements of the tuple

Making object out of tuple

Given the object, we need to make properties on the first level readonly

Readonly under the hood

Given existing type or interface, we need to extract part of properties

Pick under the hood

Easy, medium, hard and extreme step by step solutions to type challenges in TypeScript

Type Challenges

Basic implementation of getting a value in an object, optional paths, array and tuples, one solution with connection to JavaScript

Advanced Get

Developed features, team members and collaboration inside the team

Video ads player in Yandex

Code obfuscation using confusion and the way how to make it readable again

Video player in Joyn

Subtitles with WebVTT, statistics and DRM

Video player in Udemy

Video player in BBC

From video tag to the implementation, state machine, the way bundle is loaded, bundle names

Video player in Amazon

CSS support in different browser engines, hacks and tricks, JS libraries