08 2023 档案
摘要:The `as` Prop in React Option 1: import { Equal, Expect } from '../helpers/type-utils'; export const Wrapper = <TProps extends keyof JSX.IntrinsicElem
阅读全文
摘要:import { Router, useRouter } from "fake-external-lib"; export const withRouter = <TProps extends { router: Router }>( Component: React.ComponentType<T
阅读全文
摘要:Fix forwardRef globally To jump ahead to the solution, uncommenting the following code from Stefan Baumgartner will globally override the value of for
阅读全文
摘要:import { Equal, Expect } from "../helpers/type-utils"; type InputProps = React.ComponentProps<"input">; const COMPONENTS = { text: (props) => { return
阅读全文
摘要:1. React.ReactNode import { useState } from "react"; import { createPortal } from "react-dom"; import { Equal, Expect } from "../helpers/type-utils";
阅读全文
摘要:Navigating to the type definition for lazy by CMD + click in local VS Code, or in the DefinitelyTyped repo. We can see the following definition: funct
阅读全文
摘要:# Create a node cli ## Init a project Run: `npm run init` Let's say we want to create a cli command call `note-dev`, let's add this into `package.json
阅读全文
摘要:An LRU (Least Recently Used) cache is a type of data structure that maintains a limited size of items and evicts the least recently accessed item when
阅读全文
摘要:I want to add a common attribute to dom element globally: <> <div testId="123" /> <audio testId="123" /> <video testId="123" /> <a testId="123" /> <ab
阅读全文
摘要:The ElementTypetype helper is a bit unusal because it accepts some props and derives what types of components would be able to recieve those props. He
阅读全文
摘要:interface IntrinsicElements { // HTML a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>; abbr: React.Detail
阅读全文
摘要:This is ReactNode: type ReactNode = | ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined This is React.ReactEle
阅读全文
摘要:Run playwright A basic playwright code example: import {test, expect} from "@playwright/test" test("Math works", () => { expect(1+2).toBe(2); }); // O
阅读全文
摘要:export = React; export as namespace React; declare namespace React { // // React Elements // type ElementType<P = any> = { [K in keyof JSX.IntrinsicEl
阅读全文
摘要:import { DependencyList, useMemo, useState } from "react"; import { Equal, Expect } from "../helpers/type-utils"; const useCustomState = <TValue>(init
阅读全文
摘要:import { useState } from "react"; import { Equal, Expect } from "../helpers/type-utils"; type UseStateReturnValue<T> = { value: T; set: React.Dispatch
阅读全文
摘要:import { useEffect, useState } from "react"; export type Result<T> = | ["loading", undefined?] | ["error", Error] | ["success", T]; export const useDa
阅读全文
摘要:import React from "react"; import { Equal, Expect } from "../helpers/type-utils"; const createRequiredContext = <T extends any>() => { const context =
阅读全文
摘要:// Problem import { useState } from "react"; import { Equal, Expect } from "../helpers/type-utils"; export const useId = (defaultId: string) => { cons
阅读全文
摘要:In package management systems like npm (for JavaScript/Node.js projects), dependencies are typically fetched from a remote registry. However, there ar
阅读全文
摘要:Typescript has its problem that when you try to compare generic function to a function signature, you will run into issue. Because for one function, i
阅读全文
摘要:import { Equal, Expect } from "../helpers/type-utils"; interface Button<T> { value: T; label: string; } interface ButtonGroupProps<T> { buttons: Butto
阅读全文
摘要:import { ReactNode } from "react"; import { Equal, Expect } from "../helpers/type-utils"; interface TableProps<T> { rows: T[]; renderRow: (row: T) =>
阅读全文
摘要:interface TableProps<T> { rows: T[]; renderRow: (row: T) => ReactNode; } export class Table<T> extends React.Component<TableProps<T>> { render(): Reac
阅读全文
摘要:export const Table = <T>(props: TableProps<T>) => { return ( <table> <tbody> {props.rows.map((row) => ( <tr>{props.renderRow(row)}</tr> ))} </tbody> <
阅读全文
摘要:Go ahead and install the Remote - Containers extension. This takes everything one step further: you can actually set up someone's editor for them when
阅读全文
摘要:import { ComponentProps } from "react"; import { Equal, Expect } from "../helpers/type-utils"; const buttonProps = { type: "button", // @ts-expect-err
阅读全文
摘要:## Feed `env` to docker container In the code we need to use `const dataPath = path.join(process.env.DATA_PATH || "./data.txt");` When run docker cont
阅读全文
摘要:So far we've been dealing with self-contained containers. Normally this is all you ever want: containers that can spin up and spin down as frequently
阅读全文
摘要:const presetSizes = { xs: "0.5rem", sm: "1rem", }; type Size = keyof typeof presetSizes; //type LooseSize = Size | string; // the result will be strin
阅读全文
摘要:<Parent> <child> <button /> </child> </Parent> function onClick(event) { console.log('target: ', event.target) // button console.log('currentTarget',
阅读全文
摘要:const installedApps = await navigator.getInstalledRelatedApps() const packageId = "com.app.pwa" const app = installedApps.find(app => app.id packageId
阅读全文
摘要:export default function compare( a: BinaryNode<number> | null, b: BinaryNode<number> | null, ): boolean { if (a null && b null) { return true; } if (a
阅读全文
摘要:## Basic node image ```Dockerfile FROM node:12-stretch COPY index.js index.js CMD ["node", "index.js"] ``` Build docker image: `docker build -t my-nod
阅读全文
摘要:import React, { forwardRef } from "react"; // Declare a type that works with generic components type FixedForwardRef = <T, P = {}>( render: (props: P,
阅读全文