Notes on Typescript and React

[dafi]

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#keyof-and-lookup-types

• Lookup Types

https://stackoverflow.com/a/68399521/195893

The type T[K] is a lookup type which gets the type of the property of T whose key is K. In (typeof list)[number], you're getting the types of the properties of (typeof list) whose keys are number. Arrays like typeof list have numeric index signatures, so their number key yields the union of all numerically-indexed properties.

export type AppToolbarActionType = (typeof actions)[number];

// https://stackoverflow.com/questions/57773734/how-to-use-partially-the-computed-property-name-on-a-type-definition/57774343#57774343
// allow to index elements by string to simplify onChange
type EditLinkDialogState = LinkEditedProperties & Record<string, string | undefined>;

// We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
        // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
        // Also, the ` | S` allows intellisense to not be dumbisense
        setState<K extends keyof S>(
            state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
            callback?: () => void
        ): void;

        

• Document color-mix usage

• Confusion about tuple/array declaration syntax

export interface TupleVsArraySyntax {
  tuple?: [number[]];
  array?: number[][];
}

let mylinks: TupleVsArraySyntax = {};
mylinks.tuple = [
  [1, 2, 3],
  [4, 5, 6],
];
mylinks.array = [
  [1, 2, 3],
  [4, 5, 6],
  [4, 5, 6],
];

• Understand how to use https://react-hook-form.com/ts

• Improve InputHTMLAttributes usages

components libraries

https://react.semantic-ui.com/
https://www.flowbite-react.com/

hooks

https://usehooks.com/
https://github.com/rehooks/awesome-react-hooks

migrate ref usage from component to functional component

Use https://react.dev/reference/react/useImperativeHandle, see InputText