LE
A
PLAY
GaME
@phenomnomnominal 2022
@phenomnomnominal 2022
Sign
here
in
@phenomnomnominal 2022
HELLO!?
@phenomnomnominal 2022
What's going on?
@phenomnomnominal 2022
I'm CrAig
@phenomnomnominal 2022
@phenomnomnominal 2022
&
ex
in
type A
te
nd
s
fer
= B ?
C :
D
@phenomnomnominal 2022
@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
@phenomnomnominal 2022
@phenomnomnominal 2022
We got it!
@phenomnomnominal 2022
@phenomnomnominal 2022
asserts
PASS =
input
is
PASS
`${string}
_${string}`
in
string
|
number
|
Null
=
@phenomnomnominal 2022
@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
@phenomnomnominal 2022
@phenomnomnominal 2022
@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
@phenomnomnominal 2022
@phenomnomnominal 2022
@phenomnomnominal 2022
@phenomnomnominal 2022
@phenomnomnominal 2022
@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