随笔分类 - TypeScript
摘要：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
阅读全文
摘要：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
阅读全文
摘要：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> <
阅读全文
摘要：import { ComponentProps } from "react"; import { Equal, Expect } from "../helpers/type-utils"; const buttonProps = { type: "button", // @ts-expect-err
阅读全文
摘要：const presetSizes = { xs: "0.5rem", sm: "1rem", }; type Size = keyof typeof presetSizes; //type LooseSize = Size | string; // the result will be strin
阅读全文
摘要：Using Linked list to implement a Queue. In javascript, if you want to push a item in front of an Array, it need to shift the rest of items, not good f
阅读全文
摘要：Implement the util type OptionalUndefined<T, Props> that turns all the properties of T that can be undefined, into optional properties. In addition, a
阅读全文
摘要：Given a number N, find the Nth triangular number, i.e. 1 + 2 + 3 + ... + N /* _____________ Your Code Here _____________ */ export type NumberToArray<
阅读全文
