02 2023 档案
摘要:Problem for partial inference: export const makeSelectors = < TSource, TSelectors extends Record<string, (source: TSource) => any> = {}, >( selectors:
阅读全文
摘要:For the following code: import { CSSProperties } from 'react'; const useStyled = <TTheme = {}>(func: (theme: TTheme) => CSSProperties) => { return {}
阅读全文
摘要:const returnsValueOnly = <T>(t: T) => { return t; } const result = returnsValueOnly("a"); // const returnsValueOnly: <"a">(t: "a") => "a" const return
阅读全文
摘要:For example we want to have one object merge into Window with type information as well. import { Equal, Expect } from "../helpers/type-utils"; const a
阅读全文
摘要:import { Equal, Expect } from '../helpers/type-utils'; export function makeEventHandlers< T extends { [Key in keyof T]: (key: Key) => void } >(obj: T)
阅读全文
摘要:So we have the configObj look like this: export const configObj = { routes: ["/", "/about", "/contact"], fetchers: { // @ts-expect-error "/does-not-ex
阅读全文
摘要:From ts-toolbelt /** * Explain to TS which function parameter has priority for generic inference * @param A to de-prioritize * @returns `A` * @example
阅读全文
摘要:import { getAnimatingState } from "fake-animation-lib"; import { Equal, Expect } from "../helpers/type-utils"; const animatingState = getAnimatingStat
阅读全文
摘要:import React from 'react'; declare global { namespace JSX { interface IntrinsicElements { 'custom-element': { children?: React.ReactNode; title?: stri
阅读全文
摘要:import { Equal, Expect } from '../helpers/type-utils'; import { F } from 'ts-toolbelt'; interface Fruit { name: string; price: number; } export const
阅读全文
摘要:In Javascript, if you are using Object to store key-valeu pairs while you will be adding and deleting keys frequently, then you should use Map instead
阅读全文
摘要:Promise.all: Problem: let's say we have two promises, P1, P2, P1 reject in 1s, and P2 reject in 3s. What will happen in catch block? It only able to c
阅读全文
摘要:import { createMachine } from "@zag-js/core"; type MachineState = { value: "idle" | "focused"; }; type MachineContext = { value: string[]; focusedInde
阅读全文
摘要:Idea is put component props inside hook, and return from hook, that's way to keep component clean and simple Hook: import { MachineOptions } from "./m
阅读全文
摘要:The gap property in CSS is a shorthand for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within
阅读全文
摘要:Run: pnpm create vite Give a project name, select framework & Typescript. Run: pnpm devto start the dev server
阅读全文
摘要:import { it } from 'vitest'; interface Events { click: { x: number; y: number; }; focus: undefined; } type LookUpEvents<K extends keyof Events> = Even
阅读全文
摘要:import { expect, it } from "vitest"; import { fetchUser } from "fake-external-lib"; type Middleware<TInput, TOutput> = (input: TInput) => TOutput; cla
阅读全文
摘要:From previous post, Builder pattern - 03 If we do the following changes: - class TypeSafeStringMap<TMap extends Record<string, string> = {}> { + class
阅读全文
摘要:import { expect, it } from 'vitest'; class TypeSafeStringMap<TMap extends Record<string, string> = {}> { private map: TMap; constructor() { this.map =
阅读全文
摘要:export class BuilderTuple<TList extends any[] = []> { list: TList; constructor() { this.list = [] as any; } push<TNum extends number>(num: TNum): Buil
阅读全文
摘要:The builder pattern is a design pattern commonly used in OOP. It is used to create complex objects step by step throught a series of methods, each of
阅读全文
摘要:file1: import { expect, it } from "vitest"; /** * Here, we've actually got _multiple_ problem files! * Make sure to to check problem.2.ts too. */ decl
阅读全文
摘要:We have the following code: class Form<TValues> { error?: string; constructor( public values: TValues, private validate: (values: TValues) => string |
阅读全文
摘要:import { it } from 'vitest'; import { Brand } from '../helpers/Brand'; type Valid<T> = Brand<T, 'Valid'>; interface PasswordValues { password: string;
阅读全文
摘要:import { it } from 'vitest'; import { Equal, Expect } from '../helpers/type-utils'; export const isDivElement = (element: unknown): element is HTMLDiv
阅读全文
摘要:import { expect, it } from "vitest"; import { Equal, Expect } from "../helpers/type-utils"; export const values = ["a", "b", undefined, "c", undefined
阅读全文
摘要:import { Equal, Expect } from "../helpers/type-utils"; const obj = { a: 1, b: 2, c: 3, } as const; type ObjKey = keyof typeof obj; //Type '"a"' is not
阅读全文
摘要:// You'll need to use function overloads to figure this out! function useData<T>(params: { fetchData: () => Promise<T>; initialData?: T }): { getData:
阅读全文
摘要:Define function / variable in global scope globalThis.myFunc = () => true; // doesn't compile globalThis.myVar = 1; // doesn't compile it("Should let
阅读全文
摘要:In this exercise, we're going to look at a really interesting property of branded types when they're used with index signatures. Here we have our User
阅读全文
摘要:https://www.npmjs.com/package/umzug // index.js const { Sequelize } = require('sequelize'); const { Umzug, SequelizeStorage } = require('umzug'); cons
阅读全文
摘要:We use needleas a client on Node.js express server for fetching the data or site. https://www.npmjs.com/package/needle The leanest and most handsome H
阅读全文
摘要:Express app: import cors from 'cors'; import express, { Application } from 'express'; import routes from './routes'; import * as middlewares from './m
阅读全文
摘要:function getTimeNow() { const now = new Date().toLocaleTimeString( 'en-US', { hour12: false } ); return now; } function info(functionName: string, ...
阅读全文
摘要:name: Development pipeline on: pull_request: branches: - main jobs: Server: runs-on: ubuntu-22.04 steps: - name: Check files uses: actions/checkout@v3
阅读全文
摘要:Server wait for database get ready # From https://docs.docker.com/compose/startup-order/ #!/bin/sh # wait-for-postgres.sh set -e host="$1" shift # Log
阅读全文
摘要:To clean up Docker images and containers, you can use the following commands in the terminal: Remove all containers: docker rm $(docker ps -a -q) Remo
阅读全文
摘要:Existing Dockerfile Dockerfile: FROM python:3 ENV PYBASE /pybase ENV PYTHONUSERBASE $PYBASE ENV PATH $PYBASE/bin:$PATH RUN pip install pipenv WORKDIR
阅读全文
摘要:type A = {other: 'string', url: 'string'} type B = {other: 'string', ids: 'string'} type Exclusive< T extends Record<PropertyKey, unknown>, U extends
阅读全文
摘要:import { Equal, Expect } from "../helpers/type-utils"; const obj = { a: 1, b: 2, c: 3, } as const; type ObjKey = keyof typeof obj; // If don't pass in
阅读全文
摘要:Requirement is if pass in initialData, then return type should not contain undefined, otherwise, it should. import { it } from "vitest"; import { Equa
阅读全文
摘要:When we pass in "div" to document.querySelector, it returns an HTMLDivElement or null. Similarly, when we pass it "span" we're getting an HTMLSpanElem
阅读全文
摘要:Here's a function called returnWhatIPassInExceptFor1: function returnWhatIPassInExceptFor1(t: unknown): unknown { if (t 1) { return 2; } return t; } W
阅读全文