How to type the context from the docs example
Using the example from here I'm trying to get it working in TS, but TS doesn't seem to understand
<CounterContext.Provider and throws all kinds of errors.
Does anyone know how to make this work?
import { createContext, createSignal, useContext } from "solid-js";
import type { ParentProps } from "solid-js";
const CounterContext = createContext<number>(0);
export function CounterProvider(props: ParentProps & { initialCount?: number }) {
const [count, setCount] = createSignal(props.initialCount || 0);
const counter = [
count,
{
increment() {
setCount(prev => prev + 1);
},
decrement() {
setCount(prev => prev - 1);
}
}
];
return (
<CounterContext.Provider value={counter}>
{props.children}
</CounterContext.Provider>
);
}
export function useCounter() { return useContext(CounterContext); }
import { createContext, createSignal, useContext } from "solid-js";
import type { ParentProps } from "solid-js";
const CounterContext = createContext<number>(0);
export function CounterProvider(props: ParentProps & { initialCount?: number }) {
const [count, setCount] = createSignal(props.initialCount || 0);
const counter = [
count,
{
increment() {
setCount(prev => prev + 1);
},
decrement() {
setCount(prev => prev - 1);
}
}
];
return (
<CounterContext.Provider value={counter}>
{props.children}
</CounterContext.Provider>
);
}
export function useCounter() { return useContext(CounterContext); }
3 Replies
The TS errors, if that helps
[{
"resource": "test.ts",
"owner": "typescript",
"code": "2503",
"severity": 8,
"message": "Cannot find namespace 'CounterContext'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 6,
"endLineNumber": 21,
"endColumn": 20
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1005",
"severity": 8,
"message": "'>' expected.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 30,
"endLineNumber": 21,
"endColumn": 35
},{
"resource": "test.ts",
"owner": "typescript",
"code": "2304",
"severity": 8,
"message": "Cannot find name 'value'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 30,
"endLineNumber": 21,
"endColumn": 35
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1005",
"severity": 8,
"message": "')' expected.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 35,
"endLineNumber": 21,
"endColumn": 36
},{
"resource": "test.ts",
"owner": "typescript",
"code": "2365",
"severity": 8,
"message": "Operator '>' cannot be applied to types '{ counter: (Accessor<number> | { increment(): void; decrement(): void; })[]; }' and '{ props: { children?: JSX.Element; } & { initialCount?: number; }; \"\": any; }'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 36,
"endLineNumber": 22,
"endColumn": 23
},{
"resource": "test.ts",
"owner": "typescript",
"code": "2365",
"severity": 8,
"message": "Operator '<' cannot be applied to types 'boolean' and 'RegExp'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 36,
"endLineNumber": 23,
"endColumn": 31
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1005",
"severity": 8,
"message": "',' expected.",
"source": "ts",
"startLineNumber": 22,
"startColumn": 13,
"endLineNumber": 22,
"endColumn": 14
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1161",
"severity": 8,
"message": "Unterminated regular expression literal.",
"source": "ts",
"startLineNumber": 23,
"startColumn": 6,
"endLineNumber": 23,
"endColumn": 31
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1128",
"severity": 8,
"message": "Declaration or statement expected.",
"source": "ts",
"startLineNumber": 24,
"startColumn": 3,
"endLineNumber": 24,
"endColumn": 4
}]
[{
"resource": "test.ts",
"owner": "typescript",
"code": "2503",
"severity": 8,
"message": "Cannot find namespace 'CounterContext'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 6,
"endLineNumber": 21,
"endColumn": 20
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1005",
"severity": 8,
"message": "'>' expected.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 30,
"endLineNumber": 21,
"endColumn": 35
},{
"resource": "test.ts",
"owner": "typescript",
"code": "2304",
"severity": 8,
"message": "Cannot find name 'value'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 30,
"endLineNumber": 21,
"endColumn": 35
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1005",
"severity": 8,
"message": "')' expected.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 35,
"endLineNumber": 21,
"endColumn": 36
},{
"resource": "test.ts",
"owner": "typescript",
"code": "2365",
"severity": 8,
"message": "Operator '>' cannot be applied to types '{ counter: (Accessor<number> | { increment(): void; decrement(): void; })[]; }' and '{ props: { children?: JSX.Element; } & { initialCount?: number; }; \"\": any; }'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 36,
"endLineNumber": 22,
"endColumn": 23
},{
"resource": "test.ts",
"owner": "typescript",
"code": "2365",
"severity": 8,
"message": "Operator '<' cannot be applied to types 'boolean' and 'RegExp'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 36,
"endLineNumber": 23,
"endColumn": 31
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1005",
"severity": 8,
"message": "',' expected.",
"source": "ts",
"startLineNumber": 22,
"startColumn": 13,
"endLineNumber": 22,
"endColumn": 14
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1161",
"severity": 8,
"message": "Unterminated regular expression literal.",
"source": "ts",
"startLineNumber": 23,
"startColumn": 6,
"endLineNumber": 23,
"endColumn": 31
},{
"resource": "test.ts",
"owner": "typescript",
"code": "1128",
"severity": 8,
"message": "Declaration or statement expected.",
"source": "ts",
"startLineNumber": 24,
"startColumn": 3,
"endLineNumber": 24,
"endColumn": 4
}]
Change the file extension from
ts to tsx:facepalm: