LE

A

PLAY

GaME

@phenomnomnominal 2022

Sign

here

in

@phenomnomnominal 2022

HELLO!?

@phenomnomnominal 2022

What's going on?

@phenomnomnominal 2022

I'm CrAig

@phenomnomnominal 2022

&

ex

in

type A

te

nd

s

fer

= B ?

C :

D

@phenomnomnominal 2022

UnKno

inter

wn

face

ty

class

number

null

|

pe

@phenomnomnominal 2022

string

Date

boolean

Thingie

@phenomnomnominal 2022

const name: string = 'Craig';

Cannot Assign String to Number

const isKidnapped: boolean = true;

const timeRemaining: string = 18;

@phenomnomnominal 2022

const name: string = 'Craig';

CAN ASSIGN ANYTHING TO ANY

const isKidnapped: boolean = true;

const timeRemaining: any = 18;

@phenomnomnominal 2022

any

ANY IS A

TOP TYPE

string

Date

boolean

Thingie

@phenomnomnominal 2022

const isDead: boolean = true;

CAN ASSIGN ANYTHING TO unknown

const isAlive: boolean = false;

const timeRemaining: unknown = 18;

@phenomnomnominal 2022

any

string

Date

boolean

Thingie

Unknown IS Also A

TOP TYPE

unknown

@phenomnomnominal 2022

any

never

unknown

@phenomnomnominal 2022

Can't Assign anything to never

const nada: never = true;

const nope: never = null;

const nothing: never = 'Eighteen';

const nej: never = [];

const nein: never = () => ({});

@phenomnomnominal 2022

any

never

Never IS THE

Bottom TYPE

unknown

@phenomnomnominal 2022

We got it!

@phenomnomnominal 2022

asserts

PASS =

input

is

PASS

`${string}

_${string}`

in

string

|

number

|

Null

=

@phenomnomnominal 2022

never

any

unknown

@phenomnomnominal 2022

const input: unknown = 'HELP';

function shout (input: string): string {

return `${input}!`;

}

shout(input);

Can't Assign unknown to string

@phenomnomnominal 2022

string

unknown

@phenomnomnominal 2022

if (typeof input === 'string') {

}

shout(input);

Input is definitely a string

const input: unknown = 'HELP';

function shout (input: string): string {

return `${input}!`;

}

@phenomnomnominal 2022

string

"HELP" | "PLEASE" | "SAVE US"

@phenomnomnominal 2022

function isHelp (input: unknown): input is Help {
const HELPS = ['HELP', 'PLEASE', 'SAVE US'];

return HELPS.includes(input as Help);

}

SPecial Type Guard Syntax

type Help = 'HELP' | 'PLEASE' | 'SAVE US';

@phenomnomnominal 2022

Input is definitely a valid string

if (isHelp(input)) {

shout(input);

}

const input: unknown = 'HELP';

type Help = 'HELP' | 'PLEASE' | 'SAVE US';

function isHelp (input: unknown): input is Help {
const HELPS = ['HELP', 'PLEASE', 'SAVE US'];

return HELPS.includes(input as Help);

}

@phenomnomnominal 2022

string

`${string}!`

@phenomnomnominal 2022

type Exclamation = `${string}!`;

special assertion guard syntax

function validate (input: unknown): {

if (typeof input !== 'string' || !input.endsWith('!')) {
throw new Error();
}

}

asserts input is Exclamation

@phenomnomnominal 2022

Input is definitely an Exclamation

validate(input);

shout(input);

type Exclamation = `${string}!`;

const input: unknown = 'HELP!';

function validate (input: unknown): asserts input is Exclamation {

if (typeof input !== 'string' || !input.endsWith('!')) {
throw new Error();
}

}

@phenomnomnominal 2022

type Scream = Uppercase<Exclamation>;

type GoodPassword = `${Scream}_${Whisper}`;

type Whisper = Lowercase<Exclamation>;

'A!_a!' | 'AA!_a!' | 'AAA!_aaa!' | 'AAAA!_aaaa! | 'AAAAA!_aaaaa!' | 'AAAAAA!_aaaaaa!' | ...

type Exclamation = `${string}!`;

@phenomnomnominal 2022

ty

prop

peof

in

key

erty

<>

of

[index: string]

@phenomnomnominal 2022

Array<Item>

Promise<Resolved>

Uppercase<`${string}!`>;

Intrinsic string manipulation type

@phenomnomnominal 2022

type VictimName = string;
type VictimNames = Array<string>

type Help = 'HELP' | 'PLEASE' | 'SAVE US'

type Exclamation = `${string}!`;

@phenomnomnominal 2022

const status = {
'Ana': 'ungrateful',
'Rhubarb': 'grateful',
'Chau': 'ungrateful',
'Jeff': 'ungrateful',
'Santosh': 'ungrateful',
'Sherry': 'ungrateful'
};

type VictimStatus = Record<string, string>;

@phenomnomnominal 2022

type VictimStatus = {
[key: VictimName]: string;
}

type MikeStatus = VictimStatus['Mike']; // string

@phenomnomnominal 2022

type MakeGrateful<Victims> = {
[Name in keyof Victims]: 'grateful'
}

type Grateful = MakeGrateful<VictimStatus>;

type CraigStatus = Grateful['Craig']; // 'grateful'

type VictimStatus = {
[key: VictimName]: string;
}

@phenomnomnominal 2022

typefunction MakeGrateful (input) {

}

This is imaginary syntax!

type output = {};

output[name] = 'grateful';

return output;

for (name in input) {

}

@phenomnomnominal 2022

type MakeMemorial<Victims> = {
[Name in keyof Victims as `❤️ ${Name}`]: Victims[Name]
}

const LAST_WORDS = {

'Kirk': 'Plz',
'Spivey': 'My god, what have I done?',
'Erik': 'Will I get brutally murdered?',
'Srashti': 'Why not 😁',
'Katerina': '🐈'
}

define the new property

Lookup the type with the original name

@phenomnomnominal 2022

typefunction MakeMemorial (input) {

}

Lookup the type with the original name

define the new property

= input[name];

for (name in input) {

}

type output = {};

output[`❤️${name}`]

return output;

@phenomnomnominal 2022

type Memorials = MakeMemorial<typeof LAST_WORDS>;

const LAST_WORDS = {

'Kirk': 'Plz',
'Spivey': 'My god, what have I done?',
'Erik': 'Will I get brutally murdered?',
'Srashti': 'Why not 😁',
'Katerina': '🐈'
} as const;

Use typeof to Get a type from a POJO

Use specific string types

@phenomnomnominal 2022

type Memorials = MakeMemorial<typeof LAST_WORDS>;

const LAST_WORDS = {

'Kirk': 'Plz',
'Spivey': 'My god, what have I done?',
'Erik': 'Will I get brutally murdered?',
'Srashti': 'Why not 😁',
'Katerina': '🐈'
} as const;

type KirkMemorial = Memorials['❤️ Kirk']; // 'Plz'

look up the type with the mapped key

type KirkMemorial = Memorials['Kirk'];
// Error: Property "Kirk" does not exist

@phenomnomnominal 2022

type MappedType<A> = {
[B in keyof A as C]: D
}

A: Input Type

B: Union of KEY names

C: Mapped Key

D: Mapped TYpe

@phenomnomnominal 2022

_!#J?:>

_!#7?:>

_!#3?:>

_!#E?:>

in

A ext

fer

B ?

C :

D

ends

Para

meters

extends

@phenomnomnominal 2022

type A extends B ? C : D

@phenomnomnominal 2022

type ConditionalType<A> = A extends B ? C : D

B: Super type

A: Input Type

C: True type

D: False type

@phenomnomnominal 2022

type Open<Key> = Key extends Password

? true

: false;

type Password = `${string}!_${string}!`;

type Locked = Open<'ngconf'>; // false

type Unlocked = Open<'HELP!_ME!'>; // true

@phenomnomnominal 2022

typefunction Open (Key) {
if (Key extends Password) {

return true;
}

return false;
}

type Password = `${string}!_${string}!`;

@phenomnomnominal 2022

type Encoded = `_!#${string}?:>`;

type Detect<Code> = Code extends Encoded

? Code

: never;

@phenomnomnominal 2022

type Encoded = `_!#${string}?:>`;

type Decode<Code> =
Code extends `_!#${infer Info}?:>`

? Info

: never;

type Decoded = Decode<`_!#J?:>`>; // J

@phenomnomnominal 2022

_!#J?:>

_!#7?:>

_!#3?:>

_!#F?:>

_!#9?:>

_!#)?:>

_!#E?:>

_!#%?:>

@phenomnomnominal 2022

type Letter = 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';

type Decode<Input extends `_!#${Letter}?:>`> =
Input extends `_!#${infer Info}?:>`

? Info

: never;

type Bad = Decode<'_!#%?:>`>; // never

type Good = Decode<'_!#J?:>`>; // J

@phenomnomnominal 2022

The TypeScript Type System

Type Narrowing

Top and Bottom Types

Template Literal Types

Mapped Types

Conditional Types

Extracting data with Infer

@phenomnomnominal 2022

THE END!

@phenomnomnominal 2022