[typescript] How to type the context?
See original GitHub issueIn the authentication example it’s possible to extend the context, but this
is not typed when noImplicitThis
is set to true. 'this' implicitly has type 'any' because it does not have a type annotation
“noImplicitThis”.
It would be nice if this was automatically being done by using the type of the getContext
function.
“Solutions”:
noImplicitThis
setting this to false// @ts-ignore
ignore the error- Typing the
this
parameter. See https://www.typescriptlang.org/docs/handbook/functions.html#this-parameters This solution won’t work well, because now the frontend also expects an extra parameter.
Issue Analytics
- State:
- Created 3 years ago
- Comments:17 (14 by maintainers)
Top Results From Across the Web
Context | React TypeScript Cheatsheets
interface ContextState { // set the type of state you want to handle with context e.g. ; } // set an empty object...
Read more >How to use React Context with TypeScript - LogRocket Blog
In this guide, we will learn how to use TypeScript with React Context by building ... Setting up; Create the to-do type; Create...
Read more >How to use React Context with TypeScript - Felix Gerschau
Create a Context and Provider just like you would in JavaScript. · If you don't use default values, you need to provide an...
Read more >How to type React Context with TypeScript – and why is it so ...
Think of this as the myContext = []; of your Context. It fills the already created Context with some sensible default data.
Read more >TypeScript and React: Context - fettblog.eu
TypeScript and React: Context ... React's context API allows you to share data on a global level. To use it, you need two...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I was re-reading the issue and saw one of my first “solutions”.
This solution in combination with
FooMinusContext
applied to each function would work as well I think. I’ll try to make that type. If it works correctly the only thing the library needs to do is exporting that type. It won’t be a breaking change.Just some brainstorming, I’m thinking how to omit using
this
:A: Could it be possible to export a function getContext() from the library which can be used in the function declaration? On the server we might need to call
const wc = wildcard.init<Context>();
When the function is called on the client side it’s connected to request (e.g. Express) middle ware.B: On the frontend you call a function for example with
foo(5)
, but on the backend you can define the function asfoo(context: Context, value: number)
. On the frontend you could use a wrapper type that omits the first parameter.https://github.com/reframejs/wildcard-api/blob/3ed87113503cb75d09a7cb4f5669a7ba9fe26371/server/WildcardServer.ts#L287
Here you could inject the context as first argument. Potentially you could place it as last argument and keep using the
thisArgument
of theapply
function, so Javascript users can keep using it the current way, while Typescript users could use the correctly typed version.