Typescript

Introduction

TypeScript is a typed language which produces javascript.

e.g.

let myString = "fred";
let myBoolean = true;

function createMessage(name:string) {

}

Typescript supports classes and access modifiers

class Person {
   
   name: string
   lastName: string
   
   public Person(name:string) {
       this.name = name;
   }

   public void setLastName(lastName: string) {
       this.lastName = lastName;
   }
}

Configuration

tsconfig

You can set the options for the compiler you can specify a tsconfig.json file. By using

tsc --init

you get a default file.

You can inherit tsconfigs from parent directories. This compiles all *.ts files in this directory and child directories.

{
  "extends": "../tsconfig.base",
  "compilerOptions": {
    "removeComments": true
  },
  "include": [
    "./**/*.ts"
  ]
}

Webpack Configuration

The ts-loader module allows recompiling of the type script and you need to install it if using.

module.exports = {
  entry: './app/app.ts',
  devtool: 'inline-source-map'
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', 'js']
  },
  output: {
    filename: 'bundle.js'
  },
  devServer: {
    inline: false
  }
};

Data Types

No more var

Don't use var but instead use

let

or

const

Base Data Types

The following types are available

• Boolean
• Number
• String
• Array
• Enum (not in javascript e.g. enum Category {biology, Poetry, Fiction})
• Tuple (e.g. let myTuple: [number, string] = [25,'truck'] not other elements can have only number of string e.g. myTuple[2] = 'fred')

Other types

• void
• null
• undefined
• Never (e.g. for infinite loop return types)
• Any (e.g. for when using types not guaranteed from other libraries)

Union types This allows more than type e.g.

let number_string : string | number

Not good if you ask me. However maybe useful for strings e.g.

let null_string : string | null

By default the null is not allowed to be assigned without a union declaration.

Type assertions

You can assert types in one of two ways

let value: any = 5;

let fixedString: string =  (<number>value).toFixed(4);
console.log(fixedString); // 5.0000

or

let fixedString: string =  (value as number).toFixed(4);

Functions

Adding types

With typescript we can specify types e.g.

function funFunc(score: number, message1: string = "default ", message2?: string): string {
   return message1 + message2;
}

The ? means the parameters is option and the final colon shows the return value of the function

Arrow Functions or lamdas

These take the format of

parameters  => function body

e.g. For zero parameters

 let greeting = () =>  console.log("Hello world");
 greeting(); // Hello world

For 1 parameter

 let squareit = x => x * x;
 let result = squareit(4); // 16

For multiple parameters

 let adder = (a,b) = a + b;
 let sum = adder(2,3); // 5

The example below shows a function on array (filter) which takes a function as an argument where the arguments are element, index and original array.

var scores = [70,125,85,110, 10000];

var highscores = scores.filter((element, index, array) => {
    var result = false
    if (index === 0) {
        console.log("arrrrayyy", array)
        result = true;
    }
	if(element > 100) {
  	    result = true;
    }
    return result;
});

console.log("test");
console.log("iain", highscores);

Another example,

Without arrow function

function Book() {
  let self = this;
  self.publishDate = 2016;
  setInterval(function() {
    console.log(self.publishDate);
  }, 1000)  
}

With arrow function

function Book() {
  this.publishDate = 2016;
  setInterval(() = > {
    console.log(this.publishDate);
  }, 1000)  
}

function types (delegates)

You can assign functions with the same signatures to variables with typescript. E.g.

function logError(err: string) : void {
   console.error(err);
}

function logLog(err: string) : void {
   console.log(err);
}

let logger : (value: string) => void;

if(x === 1)
{
  logger = logError;
}
else
{
  logger = logLog;
}

logger('Score: ${x}');

Rest Parameters (params or variadic)

Example below

function GetBooksReadForCustomer(name: string, ...bookIDs: number[]) {

}

let books = GetBooksReadForCustomer('Bob', 1,2,3);

Function Overloads

You can declare several overloads for a function but implement just once. Not quite sure of the benefit but there you go.

function GetTitles(author: string) string[];
function GetTitles(author: boolean) string[];

function GetTitles(author: any) string[] {

  if(typeof bookProperty == 'string') {
    // do stuff
  }
  else if(typeof bookProperty == 'boolean') {
    // do stuff
  }
  return 'stuff';  
}

Custom types

Typescript supports classes and interfaces

Interfaces

Standard

Basic interfaces

interface Employee {
  name: string;
  title: string;
}

interface Manager extends Employee {
  department : string;
  numberOfEmployees: number;

  scheduleMeeting: (topic: string) => void;
}

let developer = {
  name: 'iain',
  title: 'GDB',
  editor: 'Visual Studio Code'
}

let newEmployee: Employee = developer;

Interface for Function types

Combining with function types

// Simple function
function CreateCustomerID(name: string, id: number): string {
  return name + id;
}

// Define an interface
interface StringGenerator {
  (chars: string, nums: number): string;
}

// Old way
let IdGenerator: (chars: string, nums: number) => string;
IdGenerator = CreateCustomerID;

// Improved way
let IdGenerator = StringGenerator;

Example

interface DamageLogger {
  (damage: string) : void;
}

let logDamage: DamageLogger;
logDamage = (damage: string) => console.log('Damage reported: ' + damage);
logDamage('coffee stains'); // Damage reported: coffee stains

Classes

Basic Stuff

Example below, default access is public

class Developer {

  department: string;
  private _title: string;
  
  get title(): string {
    return this._title;
  }

  set title(newTitle: string) {
    this._title = newTitle.toUppperCase();
  }

  // Static members and attributes exist
  static could_be_a_const: string = 'Hello me';
  static logMe() {
      console.log('Hello');
  }
}

// Extending
class WebDeveloper extends Developer {

   readonly favoriteEditor: string
   constructor(editor: string) {
      super();
      this.favoriteEditor = editor;
   }
}

// Abstract
class MyClass {

   abstract printStuff(): void;
}

Non C# Stuff

Initialise attribute without type

// C# ish
class Author {
  name: string;
  constructor(inName: string) {
     name = inName;
  }
}

// Typescript
class Author {
  constructor(public name: string) {
  }
}

Class Expression

You can create an expression of a class. E.g. implement an abstract on on the fly.

let Newspaper = class extends ReferenceItem {
  ImplementationOfAbstract: void {
    console.log('I am implemented now');
  }
}

let myPaper = new Newspaper('The Gazette', 2016);
myPaper.ImplementationOfAbstract();

Importing

To import typescript classes you can use the Triple-slash directive

/// <reference path="player.ts" />

Generics

Array

Array is a built in Generic e.g.

let Books : Book[]
// With Generic Array
let Books : Array<Book>

Functions

Much the same as c#

function LogAndReturn<T>)thing : T) : T {
   console.log(thing);
   return thing;
}

let someString : string = LogAndReturn<string>('log this');

Interfaces and Classes

Much the same as c# as well

interface Inventory<T> {
  getNewestItem:() => T;
  addItem: (newItem: T) => void;
  getAllItems: () => Array<T>;
}

class Catalog<T> implements Inventory<T> {
   private catalogItems = new Array<T>();
   addItem(newItem: T)_ {
     this.catalogItems.push(newItem);
   }
...
}

let bookCatalog = new Catalog<Book>();

Constraints

This is just for typescript I think

class Catalog<T extends CatalogItem> implements Inventory<T> {

  // Only types satisfying the extends constraint CatalogItem 
  // are allowed at compile time. Seems a bit constraining to me.
}

TypeScript Declaration Files

These are typescript wrappers for JavaScript libraries. This allows the typescript compiler to validate your usage.

These will have the extension .d.ts and you can find these on GitHub at definitely typed. Note these may sometimes be out of date.

Search here

npm allows you to install these using

npm install --save @types/lodash

Advanced

Destructuring

Like javascript

let medals : string[] = ['gold', 'silver', 'bronze']
let [first, second, third] = medals;

let person = {
  name: 'Audrey',
  address: '123 Main St',
  phone: '555:1212'
}

let {name, address, phone} = person

Spread Operator

Like javascript

Additional to other array

let newBookIDs = [10,20]
let allBookIDs = [1,2,3, ...newBookIDs] // 1,2,3,10,20

Intersection types

// Previously we had union types  on functions e.g.
function test(inArg : number | string) : void {

}

// Now we have Intersection types where all the members
// of the types are combined
function test() : Book & Magazine {
 
}

// So without publish which is a member of magazine it 
// will not compile as it checks all members exist
let serialNovel: Book & Magazine = {

  id; 100,
  title: 'The Gradual Tale',
  author: 'Occasional Pen'
  // publisher: 'Serial Press'
}

Mixins

Not sure if this is worthwhile. It seems to be a form of multiple inheritance similar to C++ which most people hate. The key thing is the applyMixins which copies the functions from the base classes to the new class and is "Magic"

// Disposable Mixin
class Disposable {
    isDisposed: boolean;
    dispose() {
        this.isDisposed = true;
    }

}

// Activatable Mixin
class Activatable {
    isActive: boolean;
    activate() {
        this.isActive = true;
    }
    deactivate() {
        this.isActive = false;
    }
}

class SmartObject {
    constructor() {
        setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
    }

    interact() {
        this.activate();
    }
}

interface SmartObject extends Disposable, Activatable {}
applyMixins(SmartObject, [Disposable, Activatable]);

let smartObj = new SmartObject();
setTimeout(() => smartObj.interact(), 1000);

////////////////////////////////////////
// In your runtime library somewhere
////////////////////////////////////////

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
        });
    });
}

String Literal Types and Type Aliases

// Like enums
let empCategory: 'Manager' | 'Non-Manager'

// Type aliases
type EmployeeCategory = 'Manager' | 'Non-Manager'

Advanced Type Features

Polymorphic this

The this is referring to the type returned. e.g.

class Vehicle {
   Drive() {
      return this
   }
}

class Car extends Vehicle {
   CarryPeople() {
      return this
   }
}

class Truck extends Vehicle {
   CarryCargo() {
      return this
   }
}


let t = new Truck();
t.Drive() // returns a Truck object

Basically we are to understand that the this is the this of the type originally declared not the this of the function in this case Vehicle.

Declaration Merging

This looks like bad news. You can merge things which you declare without saying you are doing it but by just clashing with names e.g.

interface Book {
  id: number,
  author: string,
  category: Category
}

// By typing another they are merged by default

interface Book {
  identifier: number,
  writer: string
}

Maybe this is a better example where an extension is built on an existing class

import {UniversityLibrarian} from './classes'

declare module './classes' {
  interface UniversityLibrarian {
    phone: string;
    hostSeminar(topic: string): void;
  }
}

UniversityLibrarian.prototype.hostSeminar = function(topic) {
  console.log('Hosting a seminar on ' + topic)
}

Type Guards

typeof type guard

Protect code for correct type

if ( typeof x === 'string')
{
}
else if ( typeof x === 'number')
{
}

Allows types are

• string
• number
• boolean
• symbol

Custom type guard

You can write your own using

function isBook(text: Book | Magazine) : text is Book {
   return (<Book>text).author !== undefined
}

Symbols

The data type symbol is a primitive data type. The Symbol() function returns a value of type symbol, has static properties that expose several members of built-in objects, has static methods that expose the global symbol registry, and resembles a built-in object class, but is incomplete as a constructor because it does not support the syntax "new Symbol()".

let mySymbol = Symbol('first_symbol');

const CLASS_INFO = Symbol();

class myClass 
{
  [CLASS_INFO](): void {
     console.log('This is my class');
  }

  static [Symbol.hasInstance](obj: Object) : boolean {
       ...
  }
}

let aClass = new myClass(0;
aClass[CLASS_INFO]() // This is my class

May need to do some reading on this

Decorators

Introduction

// Class decorator
// target = Constructor function for the class
function ui_element(target: Function) { // do ui stuff}

// Method decorator
// Parameters are
// t = constructor function for a static method 
       or prototype for the class if it is an instance member
// p = name of the decorated member
// d = Property descriptor for the member
function my_deprecated(t: any, p: string, d: PropertyDescriptor)
{
  console.log('This method will go away soon...');
}

@ui_element
class {

 @my_deprecated
 someOldMethod() { }
  
}

// Decorator Factories
function ui_element(element: string) {
  return function(target: Function) {
    console.log('Create new element : ${element}');
  }
}

// Usage
@ui_element('Simple Form')
class ContactForm {

 // contact properties
}

Class Decorator

This is the signature for a class decorator

// ClassDectorator Type
<TFunction extends Function>(target: TFunction) => TFunction | void

Example where the constructor is not replaced

export function sealed(name: string ) {

  return function(target: Function): void {
    console.log('Sealing the constructor: ${name}')
    Object.seal(target);
    Object.seal(target.prototype)
  }
}

@sealed('Class Library')
class Boris {

}

Example where the constructor is replaced

export function logger<TFunction extends Function>(target: TFunction): TFunction {

  // Create a Function type
  let newConstructor: Function = function() {
    console.log('Creating new instance')
    console.log(target);
  }

  // Assign protype and constructor from original
  newConstructor.prototype = Object.create(target.prototype);
  newConstructor.prototype.constructor = target;

  // Return the new function
  return <TFunction>newConstructor;
}

Method Decorator

Example

export function readOnly(target : Object,
                         propertyKey: string,
                         descriptor: PropertyDescriptor) {

  console.log('Setting ${propertyKey}.');
  descriptor.writable = false;
}

// Changing to a factory decorator // i.e. remove export and replace with return, remove function name

export function writable(isWritable : boolean) {
   return function (target : Object,
                    propertyKey: string,
                    descriptor: PropertyDescriptor) {

     console.log('Setting ${propertyKey}.');
     descriptor.writable = isWritable;
   }
}

..

class aClass
{
   @writable(false);
   testMethod() :void {
     console.log("I am a test method")
   }
}

..

Asyncronous Calls

Callback functions

// Create Interface (not required by nicer
interface LibMgrCallBack {
  // pararameters : return args
  (err: Error, titles: string[]) : void
}

function getBooksByCategory(cat: Category, inCallBack: LibMgrCallBack) : void {

  // Fake function
  setTimeout( () => {

    try {

      let foundBooks: string[] = Util.GetBooks(cat);
      if(foundBooks.length > 0) { 
         callback(nuT^ll, foundBooks);
      } 
      else {
         throw new Error('No Books Found');
      }
    }
    catch(error) {
    }

  }, 2000);
}

function logCategorySearch(err: Error, titles: string[]) : void {
  if(err) {
     console.log('Error Message: ${err.message}');
  }
  else {
     console.log('Found following titles');
     console.log(titles);
  }
}

console.log('Begin')'Found titles: ${titles}'))
getBooksByCategory(Category.Fiction, logCategorySearch);
console.log('Submmitted')

Promises

So,

• Requires 2015
• Similar to Tasks in c#.
• You can chain promises togethe'Found titles: ${titles}'))r
• Simple API, then, catch

function doAsyncWork(resolve, reject) {

   // Perform Async work
   if(success) resolve(data)'Found titles: ${titles}'))
   else reject(reason)
}

let p: Promise<string> = new Promise(doAsyncWork);

// Alternate and more realistic
let p: Promise<string> = new Promise( (resolve, reject) => {
   // Perform Async work
   if(success) resolve(data)
   else reject(reason)
})

Taking callback example

function getBooksByCategory(cat: Category): Promise<string[]> {
   
  let p: Promise<string[]> = new Promise((resolve, reject) => {

    setTimeout( () => {

      let foundBooks: string[] = Util.GetBooks(cat);

      if(foundBooks.length > 0) { 
         resolve(foundBooks);
      } 
      else {
         reject('No Books Found');
      }

    }, 2000);

  });
}

console.log('Begin')

getBooksByCategory(Category.Fiction)
 .then(
  titles => {
     console.log('Found titles: ${titles}');
     throw 'something bad happened'; // Force exception
     return titles.length;
  }, reason = { return 0;})
 .then(numOfBooks => console'Found titles: ${titles}')).log('Number Of Books found: ${numOfBooks}')) // Chained
 .catch(reason => console.log('Found titles: ${reason}'))

console.log('Beginning')
logSearchResults(Category.Fiction);
console.log('Submitted')

async await

Example

async function doAsyncWork() {
  let results = await GetLongTask();
  console.log(results)
}

Taking promise example

async function logSearchResult(bookCategory: Category) {
  let foundBooks = await getBooksByCategory(bookCategory)
  console.log(foundBooks)
}


console.log('Beginning')
logSearchResults(Category.Fiction);
console.log('Submitted')

Tips For TypeScript

Option Fields for Types

This was a humorous approach to this where the type was

type Props {
   name: string
   gender: "male | female"
   salary?: number
   weight?: number
}

You only want weight for male and salary for female so we can use intersections

type Props {
   name: string
} & (MaleProps | FemaleProps)

type MaleProps {
   gender: "male"
   weight: number
}

type FemaleProps {
   gender: "female"
   salary: number
}

Guards

We can check a type by looking for a property and use the in Operator. E.g.

const printDocument =  (doc: DelimitedDocument | PlaintextDocument) => {
  if("seperator" in doc) {
     printDeliminated(doc)
  }
  else {
     printPlaintext(doc)
  }
};

We can provide a property (__typename) in the types to determine the type and use a predicate. E.g.

export type = Invoice = FinalInvoice | DraftInvoice

export const isTypeFinalInvoice = (invoice: Invoice): invoice is FinalInvoice => {
   return invoice.__typename === "FinalInvoice";
}
export const isTypeDaftInvoice = (invoice: Invoice): invoice is DaftInvoice => {
   return invoice.__typename === "DaftInvoice";
}

Test using asserts not assert

function assertIsNumber(val: any): asserts val is number {
    if(typeof val !== "number") {  
        throw new AssertionError("Not a number"
    }
)

Don't Use Enums

Got this from Matt Pocock. Not a fan and preferred as const object e.g.

const LOG_LEVEL = {
     DEBUG: 'DEBUG',
     WARNING: 'Warning',
     ERROR: 'Error'
} as const

type LogLevel = ObjectValues<typeof LOG_LEVEL>

Union Type

The union type can be for instance

type a = true | "" | 123 | "456"

They cannot have duplicates

// type a = true | "" | 123 | "456" | "456"

Conversion to Unions can be done using T[number]

type TupleToUnion<T extends any[]> = T[number]

type a = TupleToUnion<['', 123, '456','456', true,  '', '', '']>

// type a = true | "" | 123 | "456"

Constraining Types Array

To constrain an array you can do

type myType = number | boolean | string
type TupleToUnion<T extends myType[] = T[number]

But we can do the same with round parameters too. Round was the answer and not

// type TupleToUnion<T extends number | boolean | string[]> = T[number]
// type TupleToUnion<T extends <number | boolean | string>[]> = T[number]

type TupleToUnion<T extends (number | boolean | string)[]> = T[number]

Unions with Types

This example shows how to make a type which has known types and type which is a super set of these known types

// This will hide "sm" and "xs" in the autocomplete
type IconSize = "sm" | "xs" | string
// Better to do
type IconSize = "sm" | "xs" | Omit<string, "xs" | "sm">

Mapped As

Introduction

Needed this for the omit example further down. This is where you can map a value as. For example

type Person = {
   name:string
   age: number
}

type Setters = {
   [K in keyof Person as `set${Capitalize<K>}`]: (value: State[K]) => void
}

// type Setters = { 
//     setName: (value: string) => void 
//     setAge:  (value: number) => void 
// }

Using Intersection types with Mapped As

Here we only want the string keys for the object because we cannot Capitialize with other types. By specifying the intersection only strings are allowed.

type Setters<Person> = {
   [K in keyof Person & string as `set${Capitalize<K>}`]: (value: State[K]) => void
}

Conditional Types

We can breakdown complex types in to simple types. This is useful when the incoming data is more complex than we want

type Unarray<T> = T extends Array<infer U> ? U:T

type Release = Unarry<typeof backlog["releases"]>
type Epic = Unarray<Release["epics"]>

const backlog = {
    releases: [
      name: "Sprint 1", 
      epic: [
       {
           name: "Account Management",
           tasks: [
             { "name": "Single Sign on", Priority.mustHave },
             { "name": "Email Notification", Priority.mustHave },
           ]
       }
      ]
    ]
}

Infer Keyword

The infer keyword is used to represent the outcome on type if a generic. That is a bit of a mouthful so lets give an example. In this example R is a type to represent the return type.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

In this example R represents the type to for the promise

type PromiseReturnType<T> = T extends Promise<infer R> ? R : T

Some Key examples

Pick

Picks keys to include in an Object

MyPick<T, K extends keyof T> { [k in K] : T[k] }

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

Omit

Omits keys from an Object

type MyOmit2<T, K extends keyof T> = {  [P in keyof T as P extends K ? never: P] :T[P]}

interface Todo {
   title: string
    description: string
    completed: boolean
}

type TodoPreview = MyOmit<Todo, 'description' | 'title'>

const todo: TodoPreview = {
   completed: false,
}

Functional Overloads

Did not know this was possible but it is

Material UI

This is new stuff probably should be with react

// This lets you omit variant as a Prop
import React from "react"
import {Button, ButtonProps } from "matierial-ui/core"

type Props = Omit<ButtonProps, "variant">

const BrandButton: React.FC<Props> = ({children, ...rest }) => {
   return <Button {...rest, children} />
};

export default BrandButton;

Typescript Challenges

Introduction

This is a list of challenges to make a type the supports a question. challenges. This was very difficult for me to understand, maybe dyslexia, maybe just me but what they are looking for is a type which supports the line highlighted.

Example 1

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

Example Left Side (Signature)

So in this example we are look for a type on the left which = MyPick<Todo, 'title' | 'completed'>. Todo is a Type and 'title' and 'completed' are property keys of that type. So maybe we look at this like a function. So the function signature we need to capture the Type and the keys.

type MyPick<T, K extends keyof T>

So T is the Type and K = keyof T will return a union of keys from T

type myType1 = {
    key1: string,
    key2: string,
    key3: string
}

type K = keyof myType1 // Returns type with values 'key1', 'key2' nad 'key3'

// So we can we can assigned these values
const myVar1: K = 'key1'
const myVar2: K = 'key2'
const myVar3: K = 'rubbish' // Error

Right Side (Implementation)

So we need to make type

MyPick<T, K extends keyof T>

Equal

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

So we need to make an object that is a list (array) of keys title,completed and the a list (array) of values associated with that key.

{
  array of keys : value for key for this type
  keys[]: values[]
}

So give we have T as the type, K as the key we can do this

{
  [k in K] : T[k]
}

Example 2 Iterating over Keys

Ok example 2 is to make a type which makes the all properties read-only

interface Todo {
  title: string
  description: string
}

const todo: MyReadonly<Todo> = {
  title: "Hey",
  description: "foobar"
}

So the mistake I made with this was to think they wanted what they wanted before and so this would be the answer.

{
  readonly [k in K] : T[k]
}

But this is wrong because the challenges tell you the arguments and in this challenge there is only one argument - the type, no list of keys. Read the question. Going with the left and the right

Example Left Side (Signature)

Define a type of name MyRead=Only and one argument not two.

type MyReadonly<T> =

Right Side (Implementation)

So the right-hand side is the same as the previous question except we do not have K. We don't care because we want all of the keys of type so.

{
  readonly [P in keyof T] : T[P]
}

Example 3 Iterating over Arrays transformation

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const

type result = TupleToObject<typeof tuple> // expected { 'tesla': 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

type TupleToObject<T extends readonly any[]> = any

Example Left Side (Signature)

So in this case the left hand side is almost provided see below

type TupleToObject<T extends readonly any[]> =

Right Side (Implementation)

We need to, as ever identify the pattern which is result = array[0]: array[0], array[1]: array[1] ... array[n]: array[n]. So how do we access an array. We use an index. So

{ 
  [P in T[number]] : P 
}

Improving

However in the challenge they have a test for a invalid assignment

type error = TupleToObject<[[1, 2], {}]>

We need to stop the any in the left hand side. So lets put on some constraints. We constrain it to be an array.

type TupleToObject<T extends readonly (string | symbol | number)[] > = { [P in T[number]] : P }

Example 4 First Conditional Type

  type arr1 = ['a', 'b', 'c']
  type arr2 = [3, 2, 1]
  type arr3 = []


  type head1 = First<arr1> // expected to be 'a'
  type head2 = First<arr2> // expected to be 3
  type head3 = First<arr3> // expected to be never

  type First<T extends any[]> = any

Example Left Side (Signature)

So left side was provided. In the examples we could be more specific to specify string | number for the array but we will see why not in the right hand side

type First<T extends any[]>

Right Side (Implementation)

This is the first conditional type. For this we use the extends keyword which is in the form of SomeType extends OtherType ? x : y and defined by

If SomeType extends another given type OtherType, then ConditionalType is TrueType, otherwise it is FalseType

This confused me at first as arr3 = [] is true and arr2 = [3, 2, 1] is false. But this is because we are actually comparing

type answer1 = [] extends []            ? 'true' : 'false' // true
type answer2 = [] extends never[]       ? 'true' : 'false' // true
type answer3 = [1,2,3] extends number[] ? 'true' : 'false' // true
type answer4 = [1,2,3] extends []       ? 'true' : 'false' // false

So this is why this works. I am a better type script person for it. And the answer there is

T extends [] ? never : T[0]

Example 5 typeof

I do not know how this one works.

type tesla = ['tesla', 'model 3', 'model X', 'model Y']
type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT']

type teslaLength = Length<tesla>  // expected 4
type spaceXLength = Length<spaceX> // expected 5

type Length<T> = any

Example Left Side (Signature)

This seemed easy and correct but it is the test cases I struggled with

type Length<T extends []>

Right Side (Implementation)

This is what I came up with but the subsequent test cases made it not the right answer.

type Length<T extends string[]> = T['length']

Answer

So the tests cases which failed were

  Expect<Equal<Length<typeof tesla>, 4>>,
  Expect<Equal<Length<typeof spaceX>, 5>>,

Clearly we need to make the typeof bit work. So it appears that adding the readonly makes the type the first element in the array.

type Length<T extends readonly any[]> = T['length']

Example 6 Conditional Type 2

This one is where I hoped to answer my first one without looking but sadly not

type Result = MyExclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'

type MyExclude<T, U> = any

But this is asking can you output types T which are not in U. We need to remember never mean omit

type MyExclude<T, U> = T extends U ? never : T

Example 7 Infer

Infer allows you to name the thing you extracted and is used with conditional types.

  type ExampleType = Promise<string>
  type Result = MyAwaited<ExampleType> // string

// Make a type for this 
type MyAwaited<T> = any

// Which solves the following
type X = Promise<string>
type Y = Promise<{ field: number }>
type Z = Promise<Promise<string | number>>
type Z1 = Promise<Promise<Promise<string | boolean>>>
type T = { then: (onfulfilled: (arg: number) => any) => any }

type cases = [
  Expect<Equal<MyAwaited<X>, string>>,
  Expect<Equal<MyAwaited<Y>, { field: number }>>,
  Expect<Equal<MyAwaited<Z>, string | number>>,
  Expect<Equal<MyAwaited<Z1>, string | boolean>>,
  Expect<Equal<MyAwaited<T>, number>>,
]

This might get tricky as the answer came from [youtube]. So the first thing was to identify that from the tests they all take a generic parameter (X, Y, Z, Z1 and T). Looking at the types they are all Promises (except T) so lets make the generic and unknown promise

type MyAwaited<T extends Promise<unknown>> = any

Now we can use the infer keyword. This will solve the first two test cases X and Y.

type MyAwaited<T extends Promise<unknown>> = T extends Promise<infer V> ? V : never

For the next two cases Z and Z1 this is not resolved because they unwrap promises within promises, the first one promise, the second two promises, luckily we have type to unwrap a promise so we can call this recursively. We check if the value returned from the inter is a Promise<unknown>, if it is we use our type to remove the Promise, if it isn't we return our value.

type MyAwaited<T extends Promise<unknown>> = 
        T extends Promise<infer V> ? 
          (V extends Promise<unknown> ? MyAwaited<V>: V) : 
          never

I could not solve the final test but in the end found an answer where they used the recursive calling of then.

type MyAwaited<T> = T extends { then: (onfulfilled: (arg: infer U) => unknown) => unknown; }
  ? MyAwaited<U>
  : T;

Would have like to have seen the equivalent solution for this.

Example 8 Recursion II

This is apparently easy. So depressed doing these but youtube had the answer [youtube] and explained here because I need it explaining. This was the question, write an includes function.

type isPillarMen = Includes<['Kars', 'Esidisi', 'Wamuu', 'Santana'], 'Dio'> // expected to be `false`

I did actually know the answer for the first attempt but my it was not enough.

type Includes<T extends any[], U> = U extends T[number] ? true: false

// Many of the tests passed
Expect<Equal<Includes<['Kars', 'Esidisi', 'Wamuu', 'Santana'], 'Kars'>, true>>,
Expect<Equal<Includes<['Kars', 'Esidisi', 'Wamuu', 'Santana'], 'Dio'>, false>>,
Expect<Equal<Includes<[1, 2, 3, 5, 6, 7], 7>, true>>,
Expect<Equal<Includes<[1, 2, 3, 5, 6, 7], 4>, false>>,
Expect<Equal<Includes<[1, 2, 3], 2>, true>>,
Expect<Equal<Includes<[1, 2, 3], 1>, true>>,

// But many did not
Expect<Equal<Includes<[{}], { a: 'A' }>, false>>,
Expect<Equal<Includes<[boolean, 2, 3, 5, 6, 7], false>, false>>,
Expect<Equal<Includes<[true, 2, 3, 5, 6, 7], boolean>, false>>,
Expect<Equal<Includes<[{ a: 'A' }], { readonly a: 'A' }>, false>>,
Expect<Equal<Includes<[{ readonly a: 'A' }], { a: 'A' }>, false>>,
Expect<Equal<Includes<[1], 1 | 2>, false>>,
Expect<Equal<Includes<[1 | 2], 1>, false>>,

The issue is with how to compare. If we look at this test case, test is equal to true and therefore fails.

type test = Includes<[boolean, 2, 3, 5, 6, 7], false> // true

We need to use something better to compare. He googled and found this

type test2 = Equal<boolean, false> // false

So now all we need to do is to iterate using our new approach to compare. But first a reminder. With type script we can obtain the first or second element and the rest using the spread operator. This is the same for types

let [first, ...rest] = [1, 2, 3, 4];
let [first,second ...rest] = [1, 2, 3, 4];

So what we do below is we separate the first element in First off from the Rest of the elements. If equal all good, if not call recursively with the rest until there are no more elements. One last thing, the youtuber also thought this was not a simple challenge

type Includes<T extends any[], U> = T extends [infer First, ...infer Rest] ? 
  (Equal<U, First> extends true  ? true : Includes<Rest, U>) : false

Example 9 Parameters

So Given

const foo = (arg1: string, arg2: number): void => {}
const bar = (arg1: boolean, arg2: { a: 'A' }): void => {}
const baz = (): void => {}
const buz = (arg1: number): number => { return 0}

type cases = [
  Expect<Equal<MyParameters<typeof foo>, [string, number]>>,
  Expect<Equal<MyParameters<typeof bar>, [boolean, { a: 'A' }]>>,
  Expect<Equal<MyParameters<typeof baz>, []>>,
  Expect<Equal<MyParameters<typeof buz>, [number]>>,
]

// Solve
type MyParameters<T extends (...args: any[]) => any> = any

So we are passing (): void => {} so we should be able to capture the input as (...args: T) => any

type MyParameters<T> =  T extends ( (...args: infer U) => any ) ? U : never

Example 9 Parameters

So Given

const foo = (arg1: string, arg2: number): void => {}
const bar = (arg1: boolean, arg2: { a: 'A' }): void => {}
const baz = (): void => {}
const buz = (arg1: number): number => { return 0}

type cases = [
  Expect<Equal<MyParameters<typeof foo>, [string, number]>>,
  Expect<Equal<MyParameters<typeof bar>, [boolean, { a: 'A' }]>>,
  Expect<Equal<MyParameters<typeof baz>, []>>,
  Expect<Equal<MyParameters<typeof buz>, [number]>>,
]

// Solve
type MyParameters<T extends (...args: any[]) => any> = any

So we are passing (): void => {} so we should be able to capture the input as (...args: T) => any

type MyParameters<T> =  T extends ( (...args: infer U) => any ) ? U : never

Example 10 Return Value

Possibly getting easier. Copying is getting quicker and now I used my learning today so not a waste.

const fn = (v: boolean) => {
    if (v)
      return 1
    else
      return 2
  }

type MyReturnType<T> = any

type cases = [
  Expect<Equal<string, MyReturnType<() => string>>>,
  Expect<Equal<123, MyReturnType<() => 123>>>,
  Expect<Equal<ComplexObject, MyReturnType<() => ComplexObject>>>,
  Expect<Equal<Promise<boolean>, MyReturnType<() => Promise<boolean>>>>,
  Expect<Equal<() => 'foo', MyReturnType<() => () => 'foo'>>>,
  Expect<Equal<1 | 2, MyReturnType<typeof fn>>>,
  Expect<Equal<1 | 2, MyReturnType<typeof fn1>>>,
]

If we look at the examples for the test cases and switching them around we see a pattern

MyReturnType<() => string
MyReturnType<() => 123
MyReturnType<() => Promise<boolean>
MyReturnType<() => () => 'foo'

MyReturnType<typeof fn>
MyReturnType<typeof fn1>

The last two look slightly different but they are not. typeof fn just means

fn() => number
fn1() => number

So the answer is

type MyReturnType<T extends Function> =
  T extends (...args: any) => infer R
    ? R
    : never

Example 11 MyReadonly2

interface Todo1 {
  title: string
  description?: string
  completed: boolean
}

interface Todo2 {
  readonly title: string
  description?: string
  completed: boolean
}

interface Expected {
  readonly title: string
  readonly description?: string
  completed: boolean
}

Expect<Alike<MyReadonly2<Todo1>, Readonly<Todo1>>>,
Expect<Alike<MyReadonly2<Todo1, 'title' | 'description'>, Expected>>,
Expect<Alike<MyReadonly2<Todo2, 'title' | 'description'>, Expected>>,
Expect<Alike<MyReadonly2<Todo2, 'description' >, Expected>>,

type MyReadonly2<T, K> = any

This was though. The first thing to notice is the first test case. For this we need to remember we can have default arguments in typescript

type MyReadonly2<T, K extends keyof T = keyof T> = any

Next we need to understand intersection which is the & sign. This will combine the sets in the braces.

type MyReadonly2<T, K extends keyof T = keyof T> = 
  { SET A } &  
  { SET B }

Set A is all of the keys specified.

type MyReadonly2<T, K extends keyof T = keyof T> = 
  { readonly [P in K]      : T[P] } & 
  { SET B }

Set B is just excluding the value which are not in K. This is the same as the Omit. Understand the Mapped As and this is easy

type MyReadonly2<T, K extends keyof T = keyof T> = 
  { readonly [P in K]      : T[P] } & 
  {          [P in keyof T as P extends K ? never : P]: T[P] }

Example 12 Deep Readonly and Recursion

This was going so well as I understood recursion but needed something like

 { if !object ?  readonly [P in keyof T]: DeepReadonly<T[P]> : DeepReadonly< T[P]> }

type X1 = {
  a: () => 22
  b: string
  c: {
    d: boolean
    e: {
      g: {
        h: {
          i: true
          j: 'string'
        }
        k: 'hello'
      }
      l: [
        'hi',
        {
          m: ['hey']
        },
      ]
    }
  }
}

type Expected1 = {
  readonly a: () => 22
  readonly b: string
  readonly c: {
    readonly d: boolean
    readonly e: {
      readonly g: {
        readonly h: {
          readonly i: true
          readonly j: 'string'
        }
        readonly k: 'hello'
      }
      readonly l: readonly [
        'hi',
        {
          readonly m: readonly ['hey']
        },
      ]
    }
  }
}

So the extends never says is it not enumerable so we have out solution almost...

type DeepReadonly<T> = keyof T extends never
  ? T // Object
  : { readonly [k in keyof T]: DeepReadonly<T[k]> }; // Not an Object

Almost because of course there are many things we can put in an object, functions or maybe we have not an object but a union

type X2 = { a: string } | { b: number }

type Expected2 = { readonly a: string } | { readonly b: number }

Like a lot of these you can go on youtube and get the answer from Michigan Typescript. They actually used the answer above but below is what solved this completely for me. So the author decided to look at the value not the key. i.e. the right hand side. If this is not enumerable

type DeepReadonly<T> = {
  readonly [P in keyof T]: 
    keyof T[P] extends never
    ? T[P]
    : DeepReadonly<T[P]>
}

Example 13 Chainable

It seems this is more like doing cryptic crosswords where I need to break them down to even understand the question.

const result = config
  .option('foo', 123)
  .option('name', 'type-challenges')
  .option('bar', { value: 'Hello World' })
  .get()

// expect the type of result to be:
interface Result {
  foo: number
  name: string
  bar: {
    value: string
  }
}

I guess the first thing is to noticed is we are dealing with

const config = T
               .(Key,Value): T  
               .(Key,Value): T  
               .(Key,Value): T  
               .get() : T

Next we need to look at the args which are Key and Value. This gave the following

type Chainable<T = {}> = {
    option<
       K extends PropertyKey, 
       V
    >(
    ): Chainable<someKey, someValue>
    get(): T
}

So still a bit of voodoo but here goes. Here how we get the key and value

      key: K extends keyof T
          ? V extends T[K]
            ? never
            : K
          : K,
      value: V

So this is the first attempt but not quite perfect

type Chainable<T = {}> = {
  option<K extends string, V>(
      key: K, 
      value: V
  ): Chainable<Omit<T,K> & Record<K, V>>;
  get(): T;
};

And the final answer is

type Chainable<T = {}> = {
  option<
    K extends PropertyKey, 
    V>(
      key: K extends keyof T
          ? V extends T[K]
            ? never
            : K
          : K,
      value: V
  ): Chainable<Omit<T,K> & Record<K, V>>;
  get(): T;
};

This still fails this to error for this

const result3 = a
  .option('name', 'another name')
  // @ts-expect-error
  .option('name', 123)
  .get()