yossarian captain-yossarian

## css-tricks.md

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                captain-yossarian
                / css-tricks.md
            
            
              Last active
              February 1, 2022 20:00
            
              
                Article for css-tricks
              
          
    I assume you are familiar with TypeScript mapped types and type inference.
In this article I will try to show you the power of static validation in TypeScript.
Validation of inferred function arguments

Let's start from a small example to better understand the approach. Imagine we have a function which expects some css width value. It may be 100px, 50vh or 10ch. Our function should do anything with argument, because we are not interested in business logic.
The naive approach would be to write this:
const units = (value: string) => { }

  
## article_dou.md

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                captain-yossarian
                / article_dou.md
            
            
              Last active
              January 17, 2022 20:33
            
              
                article_dou
              
          
    Привіт, мене звати Сергій. Працюю 5 років як Front End програміст, здебільшого з TypeScript.
Ця стаття буде присвячена статичній валідації в TypeScript. Я спробую показати
коли краще використовувати перезавантаження функції,
мапування типів, рекурсії типів чи умовних типів. Усі приклади взяті з практики.
Виведення точних типів

Розглянемо наступний приклад:


## data_structures.ts
class Queue<T> {
    private items: T[]
    constructor() {
        this.items = new Array<T>();
    }

    enqueue(element: T) {
        this.items.push(element);
    }

## algorithms.ts
// string permutation
function permut(str: string): string[] | string {

  if (str.length === 1) {
    return str
  }

  let result: string[] = [];

  for (let i = 0; i < str.length; i++) {

## useTranslation.ts
type Dict = typeof dict

type KeysUnion<T, Cache extends string = ''> =
  T extends PropertyKey ? Cache : {
    [P in keyof T]:
    P extends string
    ? Cache extends ''
    ? KeysUnion<T[P], `${P}`>
    : Cache | KeysUnion<T[P], `${Cache}.${P}`>
    : never

## linked_lists.ts
type LinkedList<T> = {
    value: T,
    next: LinkedList<T> | null
}

const cons = (value: number, next: LinkedList<number> | null = null) => {
    return { value, next }
}

const lookup = (

## binary_tree.ts
const LEAFES = ['left', 'right'] as const;

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
  : obj is Obj & Record<Prop, unknown> =>
  Object.prototype.hasOwnProperty.call(obj, prop);


const withChildren = <
  Type extends Box
>(btree: TreeNode<Type>)

## index.ts
type Elem = Param;

type HandleFalsy<T extends Param> = (
  T['x'] extends undefined
  ? T['y']
  : (
    unknown extends T['x']
    ? T['y'] : T['x']
  )
)

## full_code.ts
class Base {
  base = 'base'
}

class A extends Base {
  a = 'a'
}
class B extends Base {
  b = 'b'
}

## another_constraint.ts
const fn = <
  T extends typeof Base,
  Instance extends InstanceType<T>
>(Cls: T & (new () => Instance), prop: keyof Instance,
) => new Cls()[prop];
	class Queue<T> {
	private items: T[]
	constructor() {
	this.items = new Array<T>();
	}

	enqueue(element: T) {
	this.items.push(element);
	}
	// string permutation
	function permut(str: string): string[] \| string {

	if (str.length === 1) {
	return str
	}

	let result: string[] = [];

	for (let i = 0; i < str.length; i++) {
	type Dict = typeof dict

	type KeysUnion<T, Cache extends string = ''> =
	T extends PropertyKey ? Cache : {
	[P in keyof T]:
	P extends string
	? Cache extends ''
	? KeysUnion<T[P], `${P}`>
	: Cache \| KeysUnion<T[P], `${Cache}.${P}`>
	: never
	type LinkedList<T> = {
	value: T,
	next: LinkedList<T> \| null
	}

	const cons = (value: number, next: LinkedList<number> \| null = null) => {
	return { value, next }
	}

	const lookup = (
	const LEAFES = ['left', 'right'] as const;

	const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop)
	: obj is Obj & Record<Prop, unknown> =>
	Object.prototype.hasOwnProperty.call(obj, prop);


	const withChildren = <
	Type extends Box
	>(btree: TreeNode<Type>)
	type Elem = Param;

	type HandleFalsy<T extends Param> = (
	T['x'] extends undefined
	? T['y']
	: (
	unknown extends T['x']
	? T['y'] : T['x']
	)
	)
	class Base {
	base = 'base'
	}

	class A extends Base {
	a = 'a'
	}
	class B extends Base {
	b = 'b'
	}
	const fn = <
	T extends typeof Base,
	Instance extends InstanceType<T>
	>(Cls: T & (new () => Instance), prop: keyof Instance,
	) => new Cls()[prop];