// A simple Javascript function:
function sum(a, b) {
  return a + b;
}

// Using type annotations:
function sum(a: number, b: number): number {
  return a + b;
}

// Using type level programming:
function genericFunction<A, B>(a: A, b: B): DoSomething<A, B> {
  return doSomething(a, b);
}

// This is a type-level function:
type DoSomething<A, B> = ...

// This is a value-level function:
const doSomething = (a, b) => ...

type SomeFunction<A, B> = [A, B];
/*                ----    ------
                   ^         \
                  type        return type
               parameters

     \-------------------------/
                 ^
              Generic
*/

type CanCross = "green" | "orange";
type ShouldStop = "orange" | "red";

// this is equivalent to "green" | "orange" | "red"
type TrafficLight = CanCross | ShouldStop;

let canCross: CanCross = "green";
let shouldStop: ShouldStop = "red";

let trafficLight: TrafficLight;
trafficLight = shouldStop; // ✅
trafficLight = canCross; // ✅

// You can assign anything to a variable of type unknown:
let something: unknown;
something = "Hello";            // ✅
something = 2;                  // ✅
something = { name: "Alice" };  // ✅
something = () => "?";          // ✅
// it also means you can't do much with a variable of type unknown 
// because TypeScript doesn't have a clue about the value it contains!
let something: unknown;
something = "Hello";
something.toUpperCase();
//       ^ ❌ Property 'toUpperCase' does not exist on type 'unknown'.

A | unknown = unknown

A & unknown = A

type WithName = { name: string };
type WithAge = { age: number };

function someFunction(input: WithName & WithAge) {
  // `input` is both a `WithName` and a `WithAge`!
  input.name; // ✅ property `name` has type `string`
  input.age; // ✅ property `age` has type `number`
}

function panic(): never {
  throw new Error("🙀");
}
const oops: never = panic(); // ✅

const username: string = panic(); // ✅ TypeScript is ok with this!
const age: number = panic(); // ✅ And with this.
const theUniverse: unknown = panic(); // ✅ Actually, this will always work.

type U = "Hi" | "Hello" | never;
// is equivalent to:
type U = "Hi" | "Hello";
// It's just like merging an empty set with another set.
A | never = A
// what if you intersect A with never
A & never = never // ? 

A | any = any
A & any = any

type User = {
  name: string;
  age: number;
  isAdmin: boolean;
};

// ✅ this object is in the `User` set.
const salama: User = {
  name: "Salama",
  isAdmin: true,
  age: 28,
};

// ❌
const bob: User = {
  name: "Bob",
  age: 45,
  // <- the `isAdmin` key is missing.
};

// ❌
const peter: User = {
  name: "Peter",
  isAdmin: false,
  age: "45" /* <- the `age` key should be of type `number`,
                   but it's assigned to a `string`. */,
};

const alice: User = {
  name: "Alice",
  age: 35,
  isAdmin: true,
  bio: "...",
/* ~~~~~~~~~  
       ^  ❌ This doesn't type-check. */
};

const looksLikeAUser = {
  name: "Alice",
  age: 35,
  isAdmin: true,
  bio: "...", // <- extra prop!
};

// ✅ This works just fine!
const alice: User = looksLikeAUser;

type User = { name: string; age: number; isAdmin: boolean };

// reading props
type Age = User["age"]; // => number
type Role = User["isAdmin"]; // => boolean
// dot notation does not work with types
type Age = User.age;
//             ^ ❌ syntax error!

// you can read multipe props at once with unions
type NameOrAge = User["name" | "age"]; // => string | number
// is the same as
type NameOrAge = User["name"] | User["age"]; // => string | number

// retrieve the union of all keys in an object type 
type Keys = keyof User; // "name" | "age" | "isAdmin"

// Since keyof returns a union of string literals, we can combine it with the square brackets notation
// to retrieve the union of the types of all values in this object!
type UserValues = User[keyof User]; //  string | number | boolean

// we can even create a generic utilty for it
type ValueOf<Obj> = Obj[keyof Obj];
type UserValues = ValueOf<User>; //  string | number | boolean

type BlogPost = { title: string; tags?: string[] };
//                                   ^ this property is optional!

// ✅ No `tags` property
const blogBost1: BlogPost = { title: "introduction" };

// ✅ `tags` contains a list of strings
const blogBost2: BlogPost = {
  title: "part 1",
  tags: ["#easy", "#beginner-friendly"],
};

// why do we need some special syntax where it we could do that?
type BlogPost = { title: string; tags: string[] | undefined };
const blogBost1: BlogPost = { title: "part 1" };
//             ^ ❌ type error: the `tags` key is missing.

// ✅
const blogBost2: BlogPost = { title: "part 1", tags: undefined };

type WithName = { name: string };
type WithAge = { age: number };
type WithRole = { isAdmin: boolean };
// we can merge object with &
type User = WithName & WithAge & WithRole;
type Organization = WithName & WithAge; // organizations don't have a isAdmin

type A = { a: string };
type KeyOfA = keyof A; // => 'a'

type B = { b: number };
type KeyOfB = keyof B; // => 'b'

type C = A & B;
type KeyOfC = keyof C; // => 'a' | 'b'

type A = { a: string; c: boolean };
type KeyOfA = keyof A; // => 'a' | 'c'

type B = { b: number; c: boolean };
type KeyOfB = keyof B; // => 'b' | 'c'

type C = A | B;
type KeyOfC = keyof C; 
// => ('a' | 'c') & ('b' | 'c') <=> 'c'

keyof (A & B) = (keyof A) | (keyof B)
keyof (A | B) = (keyof A) & (keyof B)

type WithName = { name: string; id: string };
type WithAge = { age: number; id: number };
type User = WithName & WithAge;

type Id = User["id"]; // => string & number <=> never

interface User extends WithName, WithAge, WithRole {}
interface Organization extends WithName, WithAge {}

// You can read this as "any key assignable to string has a value of type boolean.
type RecordOfBooleans = { [key: string]: boolean };
// Records can also be defined using the built-in Record generic:
type RecordOfBooleans = Record<string, boolean>;
// which is defined as follows
type Record<K, V> = { [Key in K]: V };
// you can also use union of string litrals for keys
type InputState = Record<"valid" | "edited" | "focused", boolean>;
// or without using record
type InputState = { [Key in "valid" | "edited" | "focused"]: boolean };
// Which is equivalent to:
type InputState = { valid: boolean; edited: boolean; focused: boolean };

type Props = { value: string; focused: boolean; edited: boolean };
type PartialProps = Partial<Props>; // makes all props as optional
// is equivalent to:
type PartialProps = { value?: string; focused?: boolean; edited?: boolean };

type Props = { value?: string; focused?: boolean; edited?: boolean }
type RequiredProps = Required<Props>; // makes all props as required
// is equivalent to:
type RequiredProps = { value: string; focused: boolean; edited: boolean };

type Props = { value: string; focused: boolean; edited: boolean };
// removes all keys that aren't assignable to the type of key
type ValueProps = Pick<Props, "value">;
// is equivalent to:
type ValueProps = { value: string };
type SomeProps = Pick<Props, "value" | "focused">;
// is equivalent to:
type SomeProps = { value: string; focused: boolean };

type Props = { value: string; focused: boolean; edited: boolean };
// removes all object properties that are assignable to given type
type ValueProps = Omit<Props, "value">;
// is equivalent to:
type ValueProps = { edited: boolean; focused: boolean };
type OtherProps = Omit<Props, "value" | "focused">;
// is equivalent to:
type OtherProps = { edited: boolean };

type Empty = [];
type One = [1];
// types can be different!
type Two = [1, "2"];
// tuples can contain duplicates
type Three = [1, "2", 1];

type SomeTuple = ["Bob", 28, true];
// you can access a value inside a tuple by using a numerical index
type Name = SomeTuple[0]; // "Bob"
type Age = SomeTuple[1]; // 28
// you can also read several indicies
type NameOrAge = SomeTuple[0 | 1]; // => "Bob" | 28
// you can read all indicies with the number type
type Values = SomeTuple[number]; // "Bob" | 28 | true

// concat
type Tuple1 = [4, 5];
type Tuple2 = [1, 2, 3, ...Tuple1]; // => [1, 2, 3, 4, 5]

// merge
type Tuple1 = [1, 2, 3];
type Tuple2 = [4, 5];
type Tuple3 = [...Tuple1, ...Tuple2]; // => [1, 2, 3, 4, 5]
// ... are called Variadic Tuples

// Named indcies help disambiguate the purpose of values of the same type
type User = [firstName: string, lastName: string];

// Optional indecies
type OptTuple = [string, number?];
//                             ^ optional index!
const tuple1: OptTuple = ["Bob", 28]; // ✅
const tuple2: OptTuple = ["Bob"]; // ✅
const tuple3: OptTuple = ["Bob", undefined]; // ✅
//    ^ we can also explicitly set it to `undefined`

type Tags = string[];
type Users = Array<User>; // same as `User[]`
type Bits = (0 | 1)[]; // you can use unions for item type

// Extracting the type in an Array
type SomeArray = boolean[];
type Content = SomeArray[number]; // boolean

// you can mix Arrays and Tuples
// number[] that starts with 0
type PhoneNumber = [0, ...number[]];

// string[] that ends with a `!`
type Exclamation = [...string[], "!"];

// non-empty list of strings
type NonEmpty = [string, ...string[]];

// starts and ends with a zero
type Padded = [0, ...number[], 0];

type UserTuple = [name: string, age?: number, ...addresses: string[]];
// It looks just like functions arguments
function createUser(name: string, age?: number, ...addresses: string[]) {}
// We could also have used our UserTuple to type the same function:
function createUser(...args: UserTuple) {
  const [name, age, ...addresses] = args;
  //     ~~~~  ~~~     ~~~~~~~~~
  //      ^     ^          ^
  //  string   number   string[]
}
createUser("Gabriel", 29, "28 Central Ave", "7500 Greenback Ln"); // ✅
createUser("Bob"); // ✅ `age` is optional and addresses can be empty.
createUser("Alice", 0, false);
//                     ~~~~~ ❌ not a `string`!
// Using tuples to type function parameters can be convenient 
// if you want to share the types of parameters between several different functions
function createUser(...args: UserTuple) {}
function updateUser(user: User, ...args: UserTuple) {}
// or if your function has several signatures:
type Name =
  | [first: string, last: string]
  | [first: string, middle: string, last: string];

function createUser(...name: Name) {}
createUser("Gabriel", "Vergnaud"); // ✅
createUser("Gabriel", "Léo", "Vergnaud"); // ✅
createUser("Gabriel"); // ❌
createUser("Oups", "Too", "Many", "Names"); // ❌

type ZipWithArgs<I, O> = [
  ...arrays: I[][], // <- Leading rest element!
  zipper: (...values: I[]) => O
];

declare function zipWith<I, O>(...args: ZipWithArgs<I, O>): O[];
const res = zipWith(
  [0, 1, 2, 3, 4],
  [1930, 1987, 1964, 2013, 1993],
  [149, 170, 186, 155, 180],
  (index, year, height) => {
    // index, year, and height are inferred as 
    // numbers!
    return [index, year, height];
  }
)
// You couldn't type this function with regular parameter types
// because the JavaScript syntax doesn't support leading rest elements
declare function zipWith<I, O>(
  ...arrays: I[][], /* ~~~
   ^ ❌ A rest parameter must be last in a parameter list */
  fn: (...values: I[]) => O
): O[];

if (trafficLight === "green") go();
else stop();

type TrueOrFalse = A extends B ? true : false;
/*                 -----------   ----   -----
                      ^          /         \
                 condition    branch     branch
                             if true    if false
          
                   \-------------------------/
                                ^
                        Conditional Type
*/

type IsMeaningOfLife<N> = N extends 42 ? true : false;

type OK = IsMeaningOfLife<42>; // => true
type KO = IsMeaningOfLife<41>; // => false

type IsMeaningOfLife<N> = N extends 42 ? true : false;

type wat = IsMeaningOfLife<never>;
//   ?^ never 🤔
type T1 = Expect<Equal<wat, true>>; // ❌
type T2 = Expect<Equal<wat, never>>; // ✅

type If<A extends boolean, B, C> = A extends true ? B : C;

type a = If<true, number, string>; // number
type b = If<false, {}, []>; // []

// The boolean type has 4 subtypes: true, false, boolean and never. 
// Remember never, the empty set? It's a subtype of every other type
type T1 = If<true, number, string>; // ✅ => number
type T2 = If<false, number, string>; // ✅ => string
type T3 = If<never, number, string>; // ✅ => never
type T4 = If<"not a boolean", number, string>;
//           ~~~~~~~~~~~~~~~ ❌ not assignable to type `boolean`.

// Imagine we have a function taking a string and wrapping it in an object
const createUser = <S>(name: S) => ({ name });
// If we give this function the string "Salama"
// we hope to get a value of type {name: "Salama"} back
const user = createUser("Salama");
//     ^? { name: string } 😿
const createUser = <S extends string>(name: S) => ({ name });
//                              👆
//              We add a `string` constraint on `S`.
const user1 = createUser("Salama");
//      ^? { name: "Salama" } 🎊
const user2 = createUser("Alice");
//      ^? { name: "Alice" } 🎈

const inferAsTuple = <
  T extends [unknown, ...unknown[]]
  //                  👆
  //   We use a non-empty array of unknown values.
>(tuple: T) => tuple;

const t1 = inferAsTuple([1, 2]);
//    ^? [number, number]
// instead of number[]

const t2 = inferAsTuple(["a", 2, true]);
//    ^? [string, number, boolean]
// instead of (string | number | boolean)[]

// Nested conditions
type GetColor<I> =
    I extends 0 ? "black"
  : I extends 1 ? "cyan"
  : I extends 2 ? "magenta"
  : "white";

type GetColor<I extends 0 | 1 | 2 | 3> = {
  0: "black";
  1: "cyan";
  2: "magenta";
  3: "white";
}[I];
// Note that it only works thanks to the type constraint on I.
// Without it, we would get the following error:
// Type 'I' cannot be used to index type 
// '{ 0: "black"; 1: "cyan"; 2: "magenta"; 3: "white"; }'. (2536)

type IsUser<T> =
  T extends { name: string; age: number }
    ? true
    : false;

type T1 = IsUser<{ name: "Salama" }> // => false
type T2 = IsUser<{ name: "Alice", age: 32 }> // => true

// Pattern matching is powerful because it's recursive.
// We can simultaneously check several properties of our types,
// at any depth of nesting:
type IsUser<T> = T extends {
  name: string;
  team: { memberCount: number };
}
  ? true
  : false;

type T1 = IsUser<{
  name: "Salama";
  team: {
    memberCount: 12;
    name: "sign"; // <- extra prop
  };
}>; // => true

type T2 = IsUser<{ name: "Alice" }>; // => false

type Plan = "basic" | "pro" | "premium";
type Role = "viewer" | "editor" | "admin";

// branching on several types by wrapping
// them in a tuple:
type CanEdit<P extends Plan, R extends Role> =
  [P, R] extends ["pro" | "premium", "editor" | "admin"]
  ? true
  : false;

type T1 = CanEdit<"basic", "editor">; // => false
type T2 = CanEdit<"premium", "viewer">; // => false
type T3 = CanEdit<"pro", "editor">; // => true
type T4 = CanEdit<"premium", "admin">; // => true

// Here, the function GetRole checks 
// if User is assignable to { name: string; role: any }.
// If it is, we declare a variable Role 
// that contains the type of the role property and we return it.
// If User isn't assignable to this pattern, we return the never type.
type GetRole<User> =
  User extends { name: string; role: infer Role }
    ? Role //                          ^ new! 🤔
    : never;

type T1 = GetRole<{ name: "Salama"; role: "admin" }>;
// => 'admin'

type T2 = GetRole<{ role: "user" }>;
// => `never` because the input type doesn't have a `name` property.

// you can give any name to your variable.
// You can only use it in the truthy code branch:
type GetRole<User> =
  User extends { name: string; role: infer lol }
    /*                                     👆
                               We can give it any name!     */
    ? lol // ✅ we can use `lol` here
    : lol // ❌ but not here.

type GetRole<User> =
  User extends { role: infer Role } ? Role : never;

// `GetRole` is the type-level equivalent of:
const getRole = ({ role }) => role;

type Fn<A> = A extends { a: { deeply: { nested: { prop: infer P } } } }
  ? P
  : never; // We have to handle the "else" case too!

type Head<Tuple> = Tuple extends [infer First, ...any] ? First : never;
// `Head` is the type-level equivalent of:
const head = ([first]) => first;
type T1 = Head<["alpha", "beta", "gamma"]>; // => "alpha"
type T2 = Head<[]>; // => never

// or the rest of the list
type Tail<Tuple> = Tuple extends [any, ...infer Rest] ? Rest : [];
// `Tail` is the type-level equivalent of:
const tail = ([first, ...rest]) => rest;
type T1 = Tail<["alpha", "beta", "gamma"]>; // => ["beta", "gamma"];
type T2 = Tail<["alpha"]>; // => []
type T3 = Tail<[]>; // => []

// You're also allowed to use infer several times in a pattern
type FirstAndLast<Tuple> = Tuple extends [infer First, ...any[], infer Last]
  ? [First, Last]
  : [];

type T1 = FirstAndLast<[1]>; // => []
type T2 = FirstAndLast<[1, 2]>; // => [1, 2]
type T3 = FirstAndLast<[1, 2, 3]>; // => [1, 3]
type T4 = FirstAndLast<[1, 2, 3, 4]>; // => [1, 4]

// this type
type IsEqual = (a: number, b: number) => boolean;
// contains the same type-level information as this one
type IsEqual = {
  inputs: [a: number, b: number];
  output: boolean;
};

// get list of parameters as a tuple using infer
type Parameters<F> = F extends (...params: infer P) => any ? P : never;
type Fn = (name: string, id: number) => boolean;
type T1 = Parameters<Fn>; // => [name: string, id: number]

// get the return type
type ReturnType<F> = F extends (...params: any[]) => infer R ? R : never;
type Fn = (name: string, id: number) => boolean;
type T1 = ReturnType<Fn>; // => boolean

// Parameters<F> and ReturnType<F> are actually built into TypeScript's standard library.
// Now you know how they are implemented!

type SetValue<S> = S extends Set<infer V> ? V : never;

type T1 = SetValue<Set<number>>; // => number
type T2 = SetValue<Set<string>>; // => string

// you can do the same with your genrics as well
type MyOwnGeneric<A, B> = { content: A; children: B[] };

type ExtractParams<S> = S extends MyOwnGeneric<infer A, infer B>
  ? [A, B]
  : never;

type T1 = ExtractParams<MyOwnGeneric<number, boolean>>;
// => [number, boolean]
type T2 = ExtractParams<MyOwnGeneric<string[], unknown>>;
// => [string[], unknown]

// imaginary imperative language 🤖
do that;
while (condition is true) {
  do this repetitive thing;
}
// and don't ask questions, computer!

// Using JS as a functional language 🌈
const doRepetitiveTask = (some, input) =>
  condition === true
    ? doRepetitiveTask(again, withSomeOtherInput) // <- recursion
    : something;

// Here is our previous example again,
// but this time written in the language of types:
type DoRepetitiveTask<Some, Input> =
  Condition extends true
    ? DoRepetitiveTask<Again, WithSomeOtherInput>
    : Something

// Columns contain lists of values
type Column = {
  name: string;
  values: unknown[];
};

// A table is a non-empty list of columns
type Table = [Column, ...Column[]];

// `UserTable` is a subtype of `Table`:
type UserTable = [
  { name: "firstName"; values: string[] },
  { name: "age"; values: number[] },
  { name: "isAdmin"; values: boolean[] }
];

const users: UserTable = [
  { name: "firstName", values: ["Gabriel", "Bob", "Alice"] },
  { name: "age", values: [29, 43, 31] },
  { name: "isAdmin", values: [true, false, false] },
];
const firstNames = getColumn(users, "firstName");
// We would like `firstNames` to be inferred as a `string[]`
const isAdmins = getColumn(users, "isAdmin");
// and `isAdmins` to be inferred as a `boolean[]`

declare function getColumn<
  T extends Table,
  N extends string
>(table: T, columnName: N): GetColumn<T, N>;
/*                          ~~~~~~~~~~~~~~~
 *                               ^ 🤔
 */

// We need to define a type-level GetColumn function that finds the right column in the list:
type Result1 = GetColumn<UserTable, "firstName">;
//         ^?  string[]
type Result2 = GetColumn<UserTable, "isAdmin">;
//         ^?  boolean[]       


type GetColumn<List, Name> = // 🤯
  List extends [infer First, ...infer Rest] // we pattern-match on the list!
    ? First extends { name: Name, values: infer Values } // if the name is the right one
      ? Values // we return the `Values` property!
      : GetColumn<Rest, Name> // Call the same function with the rest of the list!
    : undefined; // We choose to return undefined if the list is empty.

declare const products: [
  { name: "productName"; values: string[] },
  { name: "price"; values: number[] },
  { name: "location"; values: [lat: number, long: number][] }
];

const locations = getColumn(products, "location");
//            ^?  [lat: number, long: number][]

const result2 = getColumn(products, "oops");
//          ^?  undefined

type SomeLoop<List /* ... other params */> =
  // 1. Split the list:
  List extends [infer First, ...infer Rest]
    // 2. Compute something using the first element.
    //    Maybe recurse on the `Rest`:
    ? SomeLoop<Rest /* ... modified params */>
    // 3. Return a default type if the list is empty:
    : SomeDefault;

return [1, 2, 3, 4] 
  .map((x) => x * x)               // [1, 4, 9, 16]
  .filter((x) => x > 5)            // [9, 16]
  .reduce((sum, x) => sum + x, 0); // 25

// map loop structure
type SomeMapLoop<List> =
  List extends [infer First, ...infer Rest]
    ? [ /* ... 🤖 your logic */ , ...SomeMapLoop<Rest>]
    : [];

// Example
type Names = ToNames<[
  { id: 1; name: "Alice" },
  { id: 2; name: "Bob" }
]>;
// => ["Alice", "Bob"]

type ToNames<List> =
  List extends [infer First, ...infer Rest]
    ? [GetName<First>, ...ToNames<Rest>]
    : [];

type GetName<User> =
  User extends { name: infer Name } ? Name : "Anonymous";

// filter loop structure
type SomeFilter<List> =
  List extends [infer First, ...infer Rest]
    ? First extends  /* ... ❓ your condition */
      ? [First, ...SomeFilter<Rest>]
      : SomeFilter<Rest>
    : [];

// Example
type Numbers = OnlyNumbers<[1, 2, "oops", 3, "hello"]>;
// => [1, 2, 3]

type OnlyNumbers<List> =
  List extends [infer First, ...infer Rest]
    ? First extends number
      ? [First, ...OnlyNumbers<Rest>]
      : OnlyNumbers<Rest>
    : [];

// reduce loop structure
type SomeReduce<Tuple, Acc = /* ... 📦 initial value */> =
  Tuple extends [infer First, ...infer Rest]
  ? SomeReduce<Rest, /* ... 🤖 logic */>
  : Acc;
// Example
type User = FromEntries<[
  ["name", "Gabriel"],
  ["age", 29]
]>;
// => { name: "Gabriel"; age: 29 }

type FromEntries<Entries, Acc = {}> =
  /* `Acc` is optional, with a `{}` default value */
  Entries extends [infer Entry, ...infer Rest]
    ? FromEntries<
        Rest,
        Entry extends [infer Key, infer Value]
          ? Acc & { [K in Key]: Value }
          : Acc
      >
    : Acc;

// FromEntries is Tail-Recursive
type FromEntries<Tuple, Acc = {}> = ...
  ? FromEntries<...> // <- Because we just return the recursive
  //                       result, without modifying it.
  : ...;

type Append<Tuple extends any[], Element> = [...Tuple, Element];
//                         👆
//       `tuple` has to be assignable to `any[]`

type T1 = Append<[1, 2], 3>; // ✅ [1, 2, 3]
type T2 = Append<{ oops: "!" }, 3>;
/*               ~~~~~~~~~~~~~
                 ^ ❌ not assignable to any[]

type User = { name: string };

type ToNames<List extends User[]> =
  // Expects a list of users 👆
  List extends [{ name: infer Name }, ...infer Rest]
    ? [Name, ...ToNames<Rest>]
    /*                  ~~~~
         ❌ Type 'Rest' does not satisfy
            the constraint 'User[]'.       */
    : [];

type User = { name: string };

type ToNames<List extends User[]> =
  List extends [
    { name: infer Name },
    ...infer Rest extends User[] // <- constraint
  ]
    ? [Name, ...ToNames<Rest>] // ✅
    : [];

type ToNames<List extends User[]> =
  List extends [{ name: infer Name }, ...infer Rest]
    ? [
        Name,
        ...ToNames<Rest extends User[] ? Rest : never> // ✅
      ]
    : [];
// ToNames still works as expected:
type Names = ToNames<[
  { id: 1; name: "Alice" },
  { id: 2; name: "Bob" }
]>; // => ["Alice", "Bob"] 

type As<A, B> = A extends B ? A : never;
type ToNames<List extends User[]> =
  List extends [{ name: infer Name }, ...infer Rest]
    ? [Name, ...ToNames<As<Rest, User[]>>] // ✅
    : [];

// I'm sure you use template literals all the time to concatenate strings together
//  at the value levelconst firstName = "Albert";
const lastName = "Einstein";
const name = `${firstName} ${lastName}`; // <- template literal
// => "Albert Einstein"

// Well, template literal types let you do the same thing with types:
type FirstName = "Albert";
type LastName = "Einstein";

type Name = `${FirstName} ${LastName}`; // <- template literal ✨type✨!
// => "Albert Einstein"

// Template Literal Types let you interpolate other things than strings
// like numbers or booleans
type Index = 20;
type Accessor = `users[${Index}].isAdmin`;
// => "users[20].isAdmin"
type EqualsTrue = `${Accessor} === ${true}`;
// => "users[20].isAdmin === true"

//Templates containing primitive types
type FirstName = "Salama";
type Salama = `${FirstName} ${string}`; // `Salama ${string}`

const name1: Salama = "Salama Ashoush"; // ✅
const name2: Salama = "Salama Fauré"; // ✅
const name3: Salama = "Salama "; // ✅ because "" is a string.
const name4: Salama = "Who's there?"; // ❌
const name5: Salama = "Hello Salama"; // ❌

type Age = `I was born in ${number}.`;

const age1: Age = "I was born in 1993."; // ✅
const age2: Age = "I was born in 3.141592."; // ✅
const age3: Age = "I was born in a galaxy far, far away..."; // ❌
// "a galaxy far, far away..." is not a number!

declare function ping(localDomain: `localhost:${number}`): void;

ping("localhost:3000"); // ✅
ping("localhost:8080"); // ✅
ping("localhost:three-thousand"); // ❌


// Almost all primitive types can be used in a template:
type StringifiableTypes = 
  | string | boolean | number
  | bigint | null    | undefined;
// The only exception is the symbol type,
// which makes sense since symbols cannot be stringified in JavaScript either.

type Size = "sm" | "md" | "lg";
type ClassName = `size-${Size}`;
// => "size-sm" | "size-md" | "size-lg"

// Now, what if we try to interpolate several union types in the same template?
type Variant = "primary" | "secondary";
type Size = "sm" | "md" | "lg";

type ButtonStyle = `${Variant}-${Size}`;
// => | "primary-sm"   | "primary-md"   | "primary-lg"
//    | "secondary-sm" | "secondary-md" | "secondary-lg"

type X = "left" | "right";
type Y = "top" | "bottom";

function getArrow(x: X, y: Y) {
  const diagonal = `${x}-${y}` as const;
  /*                              👆                         
     `as const` tells TypeScript to infer this 
      type as `${X}-${Y}` instead of `string`.   
                                                */
  switch (diagonal) {
    case "left-top": return "↖";
    case "left-bottom": return "↙";
    case "right-top": return "↗";
    // case "right-bottom": return "↘";
    
    default: return exhaustive(diagonal);
    /*                         ~~~~~~~~
       ❌ The "right-bottom" case isn't handled!  
                                                 */
  }
}

function exhaustive(arg: never): never {
  throw new Error('non exhaustive.');
}

// There's Uppercase, which turns every letter in the string into uppercase:
type T1 = Uppercase<"hello">; //   =>   "HELLO"

// Lowercase performs the opposite transformation and turns every letter into lowercase:
type T2 = Lowercase<"HELLO">; //   =>   "hello"

// Capitalize only puts the first letter of the string in uppercase:
type T3 = Capitalize<"hello, world!">; //   =>   "Hello, world!"

// And Uncapitalize puts the first letter of the string in lowercase:
type T4 = Uncapitalize<"HelloWorld">; //   =>   "helloWorld"

type Method = "GET" | "POST";
type Resource = "user" | "blogPost";
type PropName = `${Lowercase<Method>}${Capitalize<Resource>}`;
// => "getUser" | "getBlogPost" | "postUser" | "postBlogPost"

type HTTPService = Record<PropName, Function>;
// => { getUser: Function; getBlogPost: Function; postUser: Function; ... }

const httpService = {
  getUser: () => Promise.resolve({ name: "Gabriel" }),
  postUser: (user: User) => Promise.resolve(),
  postBlogPost: (blogbost: BlogPost) => Promise.resolve(),
} satisfies HTTPService;
/*          ~~~~~~~~~~~
                 ^
   ❌ Doesn't type-check because we forgot `getBlogPost`!
                                                         */

const user = await httpService.getUser();
// => `{ name: string }` 👌

type GetNameTuple<Name> =
  Name extends `${infer FirstName} ${infer LastName}`
    ? [FirstName, LastName] //    ^
    : never;      /*      notice the space 🪐   */

type T1 = GetNameTuple<"Hermione Granger">; // ["Hermione", "Granger"]
type T2 = GetNameTuple<"Ron Weasley">; // ["Ron", "Weasley"]

type SplitDomain<Name> =
  Name extends `${infer Sub}.${infer Domain}.${infer Extension}`
    ? [Sub, Domain, Extension]
    : never;

type T1 = SplitDomain<"www.google.com">;
//   =>   ["www", "google", "com"]

type T2 = SplitDomain<"en.wikipedia.org">;
//   =>   ["en", "wikipedia", "org"]

type T3 = SplitDomain<"github.com">;
//   =>   never. The subdomain part is missing.

type GetNameTuple<Name> =
  Name extends `${infer FirstName} ${infer LastName}`
    ? [FirstName, LastName]
    : never;
type T = GetNameTuple<"Albus Perceval Wulfric Brian Dumbledore">;
//   =>   ["Albus", "Perceval Wulfric Brian Dumbledore"]

// The string is split at the first space character.
// It looks like the type checker traverses our string from left to right!
// The direction in which TypeScript goes is even more obvious when we do not include any separator in our pattern:
type SplitString<Input> =
  Input extends `${infer A}${infer B}`
    ? [A, B] //           ^ no separator 🤔
    : never;
// The string is split after the first character in this case!
type T1 = SplitString<"some string">;// ["s", "ome string"]
type T2 = SplitString<"what">;//  ["w", "hat"]

type SplitString<Str> = Str extends `${infer First}${infer Rest}`
  ? [First, Rest]
  : never;
type T = SplitString<"Albus">;
// => ["A", "lbus"]

type T = GetNameTuple<"Albus Perceval Wulfric Brian Dumbledore">;
//   =>   ["Albus", "Perceval Wulfric Brian Dumbledore"]

// takes a "Title Case" string and turns it into "snake_case":
type T1 = TitleToSnake<"Hello, Type Level TypeScript Member!">;
//   =>   "hello_type_level_typescript_member"

type SpacesToUnderscores<Str> =
    Str extends `${infer Start} ${infer Rest}`
      ? `${Start}_${SpacesToUnderscores<Rest>}` // <- recursion
      : Str; // <- str doesn't contain spaces!

type Yay = SpacesToUnderscores<"yay it works now">;
//    =>   "yay_it_works_now"


type TitleToSnake<Str extends string> =
    Lowercase<RemovePunctuation<SpacesToUnderscores<Str>>>;
//   Step 3  <-    Step 2      <-   Step1: ✅ Done 

type Punctuation = "." | "!" | "?" | ",";
// now, could we reuse the code of SpacesToUnderscores with different separators to split and join the string?
type RemovePunctuation<Str> =
  Str extends `${infer Start}${Punctuation}${infer Rest}`
    //                              ^
    //     We use the `Punctuation` union as a separator
    ? `${Start}${RemovePunctuation<Rest>}`
    //         ^ No separator here.
    : Str;

type T1 = RemovePunctuation<"Hello, world!">;
/*   => | "Hello, world"
        | "Hello"
        | "Hello, world world"
        | "Hello world"  

// so this 
Str extends `${infer Start}${Punctuation}${infer Rest}` ? ... : ...
// actually becomes
Str extends ( | `${infer Start}.${infer Rest}`
              | `${infer Start}!${infer Rest}`
              | `${infer Start}?${infer Rest}`
              | `${infer Start},${infer Rest}` ) ? ... : ...

type SplitTest<Str> =
  Str extends ( | `${infer Start},${infer Rest}`
                | `${infer Start}!${infer Rest}` )
    ? [Start, Rest]
    : never;
type T = SplitTest<"Hello, world!">
// => ["Hello" | "Hello, world", " world!" | ""]

// Let's re-implement our RemovePunctuation generic with this technique:
type RemovePunctuation<Str, Output extends string = ''> =
  // Split the string after the first char:
  Str extends `${infer First}${infer Rest}`
    ? First extends Punctuation
      // If `First` is a punctuation char, drop it:
      ? RemovePunctuation<Rest, Output>
      // Otherwise, keep it in the output:
      : RemovePunctuation<Rest, `${Output}${First}`>
    : Output;
type T1 = RemovePunctuation<"Hello, world!">;
//   =>   "Hello world"

type TitleToSnake<Str extends string> =
    Lowercase<RemovePunctuation<SpacesToUnderscores<Str>>>;
//  Step 3 ✅   <-  Step 2 ✅    <-    Step1 ✅
type T1 = TitleToSnake<"Hello, Type Level TypeScript Member!">;
//   =>   "hello_type_level_typescript_member" 🙌
type T2 = TitleToSnake<"Do you enjoy this chapter?">;
//   =>   "do_you_enjoy_this_chapter" 💪

type DataState = {
  status: string;
  data?: number;
  error?: Error;
};

// Can you have an error property if status is equal to "success"?
// Can you have some data and an error at the same time?
// We just don't know!
let state: DataState = {
  status: "success",
  error: new Error("This is fine. 🔥🐶☕️🔥"), // This type-checks.
};

type DataState =
  | { status: "loading" }
  | { status: "success"; data: number }
  | { status: "error"; error: Error };

// Our type doesn't let us create invalid states anymore!
let state: DataState = {
  status: "success",
  error: new Error("ooooops"), // ❌ does NOT type-check!
};

type User = { name: string; age: number };
type Value = User["name" | "age"];
// => string | number

// Something very similar seems to happen 
// when interpolating a union in a Template Literal Type:
type Size = "sm" | "md" | "lg";
type ClassName = `button-${Size}`;
// => "button-sm" | "button-md" | "button-lg"

// Let's say I want to read from a config object:
const config = { env: "dev", port: 3000 };
// At runtime, I can only access one property at a time:
const c1 = config["env"]; // string
// later...
const c2 = config["port"]; // number
// I do not know which property I'm accessing anymore,
// but I can use a union type to represent the different possibilities
function logConfig(prop: "env" | "port") {
  const value = config[prop]; // string | number
  console.log(value);
}
// It doesn't change the fact that I'm accessing one property at a time:
logConfig("env");
// later...
logConfig("port");

type TrafficLight = "green" | "orange" | "red";
const trafficLight: TrafficLight = "green";

type ShouldStop = { green: "no"; orange: "yes"; red: "yes" };
type T = ShouldStop["green" | "orange" | "red"];

// So this
type T = ShouldStop["green" | "orange" | "red"];

// Is turned into:
type T = ShouldStop["green"] | ShouldStop["orange"] | ShouldStop["red"];

// Which evaluates to:
type T = "no" | "yes" | "yes";

// Which simplifies into:
type T = "no" | "yes";

// Multiplication famously distributes over addition:
x * (a + b) <=> (x * a) + (x * b)
//           👆
// This means "Is equivalent to".

// And interpolation of union types has the same property:
type T1 = `x ${"a" | "b" | "c"}`;
// <=>
type T2 = `x ${"a"}` | `x ${"b"}` | `x ${"c"}`;

type State =
  | { status: "success"; data: number }
  | { status: "error"; error: Error };

function handler(state: State): string {
  if (state.status === "success") {
    // state is *narrowed*:
    state; // { status: "success", data: number }
    return "🎉";
  }
  if (state.status === "error") {
    state; // { status: "error"; error: Error }
    return "😭";
  }
  return state; // never
  /*       ^
    ✅ Even though `state` isn't a `string`,
    This line type-checks because its type
    is narrowed to `never`.                                        */
}

// Why doesn't TS turn this type:
type State = {
  status: "success" | "error";
};
// Into this one:
type State =
  | { status: "success" }
  | { status: "error" };

// This IsString generic returns "yes" if the input type is assignable to string and "no" otherwise:
type IsString<T> = T extends string ? "yes" : "no";
type T1 = IsString<"is this a string?">; // "yes"
type T2 = IsString<123>; // "no"
// Now, what if we give a union type to IsString:
type T = IsString<"a" | 2 | "c">; // yes? no? 🤔

type MapOverUnion<U> = U extends unknown
  /*                   👆           👆
              The expression      This condition
             distributes here.    always passes.
                                                        */
  ? Transform<U>
  /*          👆
    `Transform` is called with every member, one by one. 
                                                         */
  : never;

// Let's say we have a generic that puts a type twice in a tuple:
type Duplicate<T> = [T, T];
// If we call it with 1 | 2 | 3 we get a tuple containing this union twice:
type T1 = Duplicate<1 | 2 | 3>;
//   =>  [1 | 2 | 3, 1 | 2 | 3]

// But if we use U extends unknown beforehand, we get a union of tuples instead:
type DistributeDuplicate<U> = U extends unknown ? [U, U] : never;
type T2 = DistributeDuplicate<1 | 2 | 3>;
//   =>  [1, 1] | [2, 2] | [3, 3]

// T1 and T2 are different because 
// T1 can contain mixed arrays, but T2 cannot:
const tuple1: T1 = [1, 2]; // ✅ type-checks!
const tuple2: T2 = [1, 2]; // ❌ does not type-check.

// We essentially just mapped Duplicate over our union type!
[1, 2, 3].map((x) => [x, x]);
// => [[1, 1], [2, 2], [3, 3]]

// You might initially think that using keyof would do the trick:
type AllKeys<T> = keyof T;

// But this isn't going to return every key:
type T = AllKeys<{ a: 1; b: 1 } | { a: 1; c: 1 }>;
// This only returns "a".

// As we've seen before keyof only returns keys 
// that exist on all objects in the union:
type T = keyof ({ a: 1; b: 1 } | { a: 1; c: 1 });
// => "a"

// to retrieve all existing keys
// you will need to distribute over your union first!
type AllKeys<T> = T extends unknown ? keyof T : never;
//                    👆
//        We distribute over `T` first!
type T = AllKeys<{ a: 1; b: 1 } | { a: 1; c: 1 }>;
// => "a" | "b" | "c" 🎉

// Now, keyof is applied to each member of the union separately,
// which means we get back the union of all of their keys!
type T = keyof { a: 1; b: 1 } | keyof { a: 1; c: 1 };
// => "a" | "b" | "c"

type AllKeys<T> = T extends unknown ? keyof T : never;
//                👆                        👆
//      This is our union type         This is each item
//      BEFORE distribution.           one by one.

type FeedItem =
  | { type: "post"; content: string }
  | { type: "likedBy"; user: string; content: string }
  | { type: "followSuggestions"; users: string[] }
  | { type: "image"; src: string }
  | { type: "video"; src: string };

declare const items: FeedItem[];

// How should we type this function?
const only = (items, types) => 
  items.filter((item) => types.include(item.type));
const mediaItems = only(items, ["image", "video"]);
// we would like `mediaItems` to be inferred as:
//  ( | { type: "image"; src: string }
//    | { type: "video"; src: string } )[]

// Both `Item` and `Type` are union types!
declare function only<
  // Items should have a `type` property
  Item extends { type: string },
  // `Type` strings should be valid type properties.
  Type extends Item["type"]
>(list: Item[], types: Type[]): FilterUnion<Item, Type>[];
                              ~~~~~~~~~~~
// the Item type parameter will be inferred as FeedItem and Type as "image" | "video".
// Now, we need to narrow Item based on Type.
const mediaItems = only(items, ["image", "video"]);

// It turns out we can simply use a conditional type:
type FilterUnion<Item, Type> =
  Item extends { type: Type }
    ? Item
    : never;

// It turns out we can simply use a conditional type:
type FilterUnion<Item, Type> = Item extends { type: Type } ? Item : never;
// never simplifies out, which means we only get elements passing our condition
type T = FilterUnion<FeedItem, "image" | "video">;
// => | { type: "image"; src: string }
//    | { type: "video"; src: string }

type FilterUnion<U, C> = U extends C ? U : never;

type T = FilterUnion<FeedItem, { type: "image" | "video" }>;
// => | { type: "image"; src: string }
//    | { type: "video"; src: string }
//    
type T1 = FilterUnion<true | "maybe", boolean>;
// => true

type T2 = FilterUnion<1 | "👋" | 2 | "🤯", string>;
// => "👋" | "🤯"

type T1 = Extract<"a" | "b" | "c" | null, string>;
// => "a" | "b" | "c"
type T2 = Extract<"value" | "onChange" | "onSubmit", `on${string}`>;
// => "onChange" | "onSubmit"
// Here is its definition:
type Extract<A, B> = A extends B ? A : never;

type Push<List, Item> = [...List, Item];
//                          ^ ❌ List isn't an array
type As<A, B> = A extends B ? A : never;
type Push<List, Item> = [...As<List, any[]>, Item];
                         
// It turns out we could just have used Extract!                 
type Push<List, Item> = [...Extract<List, any[]>, Item];
                        ^ ✅ this works too!

// It's the opposite of Extract:
type T1 = Exclude<"a" | "b" | "c" | null, null>;
// => "a" | "b" | "c"

type T2 = Exclude<"value" | "onChange" | "onSubmit", `on${string}`>;
// => "value"

type Exclude<A, B> = A extends B ? never : A;

// They do not distribute over union types defined inline:
// This union type is defined inline. Not distributive.
//             👇
type X = string | number extends string ? true : false;
// => `false` instead of `true | false`

// Nor union types resulting from a generic:
// This isn't a naked type variable. Not distributive.👇
type IsString<T> = OrNumber<T> extends string ? true : false;
type OrNumber<T> = T | number;
type X = IsString<string>;
// => `false` instead of `true | false`

// A conditional type will only distribute over a single type variable:
// This is a naked type variable. It distributes.                👇
type IsString<T> = T extends string ? true : false;
type X = IsString<string | number>;
// => true | false

type Extends<A, B> = A extends B ? true : false;
//                   👆
//           A is distributed here.
type T = Extends<"a" | "b" | "c", "a" | "b">; // => `boolean`
// `Extends` returns boolean because "a" and "b" are
//  assignable to "a" | "b", but "c" isn't.

// It would make more sense for Extends to return false
// instead of boolean in this case,
// but how can we fix it?
// we have several ways to prevent distribution from happening.
// The simplest is to wrap your union in a data structure before using extends
type Extends<A, B> = [A] extends [B] ? true : false;
//                    👆
//      Wrapping `A` in a tuple prevents
//       the union from distributing.
type T = Extends<"a" | "b" | "c", "a" | "b">;
// => false 🎉

type CreateEdge<Id, Condition> =
  [Id] extends [Condition]
    ? { source: Id; target: Id }
    /*          👆          👆
               Here, `Id` is the 
            undistributed union type.          
                                            */
    : never;

type Edge1 = CreateEdge<"1" | "2" | "3", `${number}`>;
// => { source: "1" | "2" | "3"; target: "1" | "2" | "3" }

type Edge2 = CreateEdge<"a" | "b" | "c", `${number}`>;
// => never

const edge: Edge1 = { source: "1", target: "2" };
//     ^ ✅ type-checks!