Add FrontendType while context is typed on backend

[michie1]

Resolves #51

• [x] How to name the type? FrontendType, ClientType?
• [x] Why is the return type of getPerson Promise<Person> and not Promise<Person | null>, while typescript is also not complaining about dead code when we compare it to null?
• [x] Handle functions that are not using this and are therefore not being typed.
• [x] Write docs

Not done in this PR:

• How to write a test for this?
• Prevent casting https://github.com/reframejs/wildcard-api/pull/58#discussion_r505507215

[brillout]

Neat...

1. What do you think of ServerGeneric? And what do you think of naming the type variables?

   
   type WithoutContext<EndpointFunction, Context> =
   EndpointFunction extends (this: Context, ...args: infer EndpointArguments) => infer EndpointResult
   ? (...args: EndpointArguments) => EndpointResult
   : never;

export type ServerGeneric<Endpoints, Context> = { [endpointName in keyof Endpoints]: WithoutContext<Endpoints[endpointName], Context>; };

It's more verbose though. not sure which is better.

2. The `examples/typescript/tsconfig.json` doesn't have `"strict": true`. Setting `strict` solves this.

3. I just tried and seems to just work.

4. Check out the `docs/readme.tempate.md` and the `package.json#scripts.docs` script of the root `package.json`.

```md
## TypeScript

You can use your backend types on the frontend by using TypeScript's `typeof`.

~~~ts
!INLINE /examples/typescript/endpoints.ts

!INLINE /examples/typescript/client/index.ts

The `!INLINE` command inlines the content of the file; comfy to write always-updated and bug-free code blocks :).

5. I guess `tsc --noEmit` would do the trick? I tried and it seems to find the tsc files and transpile them (I still have to check if it actually finds all the `.tsc` files), even though `tsconfig.json` is pretty much empty. Maybe a `examples/typescript/package.json#scripts.test` that 1. installs the dependencies and 2. runs `tsc --noEmit`.

Thanks for your lovely solution & PR. It was making me sad that I couldn't find a solution.

[michie1]

1. I'm not sure about ServerGeneric, I don't know if calling it generic makes it more clear. Furthermore, it's not a big deal for me. Using larger names for the variables is a good idea.
2. That's easy. I'm so used to strict set to true.
3. :ok_hand:
4. :ok_hand:
5. I don't have experience with testing types. Usually you just write tests in typescript, tests the behavior and when there are no compile errors the types are correct. https://www.npmjs.com/package/tsd is a package to test types, but I think it's an overkill for this PR and probably for this project as well.

You are welcome. It's nice for me that I can contribute something back. The PR is not finished yet, but we'll get there.

[michie1]

Btw, I can't start the backend in the typescript example in Master.

/home/m/wildcard-api/server/WildcardServer.ts:338
  assert(yes(() => {}));

Seems like there is a bug in the isArrowFunction?

[brillout]

I suspect you are using another Node version. I'll rewrite a more stable version on master.

[brillout]

I suspect you are using another Node version. I'll rewrite a more stable version on master.

Done 80c00cabefc9eda180454cf2214c791d0959c785. Does it work now?

[brillout]

1. You're right it's redundant. Hm, not sure how to name this then. Maybe we can keep FrontendType until we find something better.

2. Ok that makes a lot of sense; I'll add TS types to the tests.

[brillout]

Done 80c00ca. Does it work now?

The patch is published in 0.5.2

[michie1]

Done 80c00ca. Does it work now?

The patch is published in 0.5.2

I get the same assertion error with node v12.19.0 and latest master (bd7e3fab975321e0cbdc1257d2036b4f4d7404af)

ts-node is converting the arrow function to a regular function. console.log((() => {}).toString()); // function () { } ts-node -e "console.log((() => {}).toString())" tsc is doing the same.

[brillout]

I've made some changes to the scripts.

Does the following now work?

1. git checkout master
2. git pull
3. cd examples/typescript/
4. yarn clean
5. yarn start
6. Go to http://localhost:3000

That's precisely what I'm doing on my end and TS is not transpiling arrow functions, which is the expected behavior since tsconfig.json#compilerOptions.target==="es2017" (the root tsconfig.json).

[michie1]

Yes, that works, my bad. Thanks!

[brillout]

Ok neat - no probs. (Actually I'm glad I rewrote the scripts, they were suboptimal.)

[brillout]

Merged :ok_hand:.

I'm curious, you mentioned a while ago using getContext to set cookies, are you still using that approach? What do you think of https://github.com/reframejs/wildcard-api/issues/59?