const a = `string text ${expression} string text`

type World = "world";
 
type Greeting = `hello ${World}`;
              = "hello world"

type World = "world" | "tomorrow";
 
type Greeting = `hello ${World}`;
              = "hello world" | "hello tomorrow"

TemplateLiteral<A | B | C> = 
  TemplateLiteral<A> | TemplateLiteral<B> | TemplateLiteral<C>

type Colors = "black" | "white" | "purple"
type Animals = "goose" | "hamster"

type ColoredAnimals = `${Colors} ${Animals}`
                    = "black goose" | "black hamster" | "white goose" | "white hamster" | "purple goose" | "purple hamster"

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

type EverythingBeforeWorld<T> = T extends `${infer H}World` ? H : never;
type T1 = EverythingBeforeWorld<"Hello World">;
        = "Hello "

// lib.dom.d.ts
/** Returns the first element that is a descendant of node that matches selectors. */
querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
querySelector<E extends Element = Element>(selectors: string): E | null;

const a = document.querySelector('div') // HTMLDivElement
const b = document.querySelector('div > button') // Element
const c = document.querySelector('  ') // Element, but run-time error

document.querySelector('div#app') // ==> HTMLDivElement

document.querySelector('div#app > form#login') // ==> HTMLFormElement

document.querySelectorAll('span.badge') // ==> NodeListOf<HTMLSpanElement>

anElement.querySelector('button#submit') // ==> HTMLButtonElement

type QuerySelector<TSelector extends string> = IsInvalid<TSelector> extends true
  ? never
  : TagNameToElement<HandleSimpleSelector<GetLastSimpleSelector<TSelector>>>;

function identity<T>(arg: T): T {
             // (dec)     1   2
  return arg;
}

// K only appeared once
function printProperty<T, K extends keyof T>(obj: T, key: K) {
  console.log(obj[key]);
}

function printProperty<T>(obj: T, key: keyof T) {
  console.log(obj[key]);
}