ReactN+TypeScript

code:ts

import { useGlobal, setGlobal } from 'reactn';

const INITIAL_STATE = {

a: 1,

b: "foo",

}

type TState = typeof INITIAL_STATE;

//type TState = {a: number; b: string;}

setGlobal(INITIAL_STATE);

const App: React.FC = () => {

const a = useGlobal("a");

// ERROR: Argument of type '"a"' is not assignable to parameter of type 'never'.

...

When I added a type specification to useGlobal, the compile error disappeared and I thought that was all right, but the type was wrong and the problem occurred later.

code:ts

// no compile error, it seems OK but...

// const a: string | number

// So,

console.log(a + 1);

// Operator '+' cannot be applied to types 'ReactText' and 'number'.

code:ts

declare module 'reactn/default' {

export interface State extends TState { }

}

const App: React.FC = () => {

console.log(a + 1); // OK

code:ts

useGlobal<TState>("a");

// return value: StateTuple<{

// a: number;

// b: string;

// }, "a" | "b">

code:ts

useGlobal<G extends {} = State, Property extends keyof G = keyof G>(property: Property): StateTuple<G, Property>;

export type StateTuple<G extends {}, P extends keyof G> = [

Setter<G, P>,

];

This is caused by the fact that when one type is specified for generics, which takes two type arguments, the other type is changed.

If no type argument is specified, the type Key is inferred from the argument, which is a literal type of string.

On the other hand, if the type is passed to Dict, Key becomes the keyof Dict. In this case, it becomes the union type of all keys.

code:ts

interface DefaultDict {

a: number,

b: string,

}

const dict: DefaultDict = {

a: 1,

b: "foo"

}

const bar: <

Dict extends {} = DefaultDict,

Key extends keyof Dict = keyof Dict

(key: Key) => Key

= (key) => key;

const a1 = bar("a");

// const a1: "a"

const a2 = bar<typeof dict>("a");

// const a2: "a" | "b"

const a3 = bar<DefaultDict>("a");

// const a3: "a" | "b"

code:ts

export type StateTuple<G extends {}, P extends keyof G> = [

Setter<G, P>,

];

---