lumie1337

import React from 'react';
import ReactDOM from 'react-dom';

function WrapperStyle(props) {
  return (
    <div style={{padding: "10px", border: "10px solid red"}}>
      {props.children}
    </div>
  )
}

lumie1337

// utilities from https://github.com/ksandin/toolbelt/blob/master/types/common.d.ts
type Identity<T> = { id: T };
type SubTypeKeys<Base, Condition> = {
    [Key in keyof Base]: Base[Key] extends Condition ? Key : never
}[keyof Base];
type SubTypeKeysRecursive<Base, Condition> = SubTypeKeys<Base, Condition> | {
    [Key in keyof Base]: Base[Key] extends object ?
        [SubTypeKeysRecursive<Base[Key], Condition>] extends [never] ? never : Key :
        never

lumie1337

// lets suppose
type F<T> = [T] // Note: this does not support any mapped types here, more specifically we can NOT test T for any types as we have placeholders in there

// instead of writing this
class HasGeneric<A, B = F<A>, C = F<B>, D = F<C>> {
  useA: A
  useB: B
  useC: B
  useD: B

lumie1337

// First Some Helpers

// This is used as workaround for recursive types
// e.g. type F<T> = { [indirect]: T extends string ? F<T> : never }[indirect] is valid
declare const indirect: unique symbol;

// We use this to do some basic counting on the type level; if you need functions of arity 10+, you need to extend this
type Succ = {
    0: 1,

lumie1337

const append = (a) => (e) => React.createElement(React.Fragment, {}, e, a)
const id = (a) => a
const when = (cond, action) => cond ? action : id

function compose(...args) { }

function nicer(type) {
    return compose(
        when(type === "edit", append(<div></div>)),
        when(false, (e) => <div><span>{e}</span></div>),

lumie1337

type CSSProperty = {
    width: string
    height: string
}
// Placeholder
type Theme = string

type StylesheetGroup = {
    [s: string]: CSSProperty

lumie1337

let my_number_var: number;

function ffi(var_from_js: unknown) {
  // forces you to do this
  if(typeof var_from_js === "number")
    my_number_var = var_from_js
  else
    throw new Error("invalid use of api")
}

lumie1337

const oldConcat = Array.prototype.concat;
Array.prototype.concat = function (...args) {
  return oldConcat.apply(this, args.map(x => x == null ? [] : x))
}

// now this works
// Note: only works when actually transpiling to [1,2,3].concat(false && [4,5,6])
//    does not actually work in chrome console

lumie1337

// how keyof works
type P1 = keyof ({ a: string } | { b: string }) // => "a" & "b" (aka never)
type P2 = keyof ({ a: string } & { b: string }) // => "a" | "b"
type P3 = ({ a: string } | { b: string }) extends infer P ? P extends object ? keyof P : never : never
// => "a" | "b"
// in P3, the conditional type forces branching so that expression keyof P is applied for each part of the union rather than the whole

// the reason why this works as it does:
//   a function is given as argument { a: string } | { b: string }, then keyof cannot be statically determined

lumie1337

Deep Merge Semantics are:

• keys of objects get merged { a: .. , b: .. } with { b: .. , c: .. }
  • the value of b needs to be merged; recurse
• elements of arrays get
• primitives in left and right that are distinct, produce a type error

so

• objects have set semantics; recursive set merge
• arrays have sequence semantics; order is important