* [Motivation](#motivation)
* [Tutorial](#tutorial)
* [Code examples](#examples)
* [fetch](#fetch)
* [axios](#examples)
* [IntelliSense examples](#intellisense-examples)
* [Things to know](#things-to-know)
## Motivation
TypeScript is a powerful assistant when your are developping, with autocomplete suggestion and complilation errors. I made some utils to define a schema object and then avoid to always import types or interfaces if your shema doesn't change.
## Tutorial
My use case come from HTTP request pattern. Our REST API schema is always the same and can be define in one place in the application. Let's see our requirement for make HTTP request:
- the request need an `url` to work correctly.
- the request have a specific `method`, like GET, POST, PATCH...
- the url can contain `path params`, like a resource id.
- the url can contain `query params`, like a pagination
- the request can contain `data` (or `body`)
- the request contain a `response`, with always the same data types
Some of these data are dynamics, and others never change. `url` and `method` never change, while `path params`, `query params`, `data` and `response` depends on the context.
Let's define our schema:
```ts
const schema = {
'PATCH users/:id': {
url: (pathParams: { id: string }) => `users/${pathParams.id}`,
method: 'PATCH',
queryParams: null,
data: {} as {
username?: string,
email?: string
},
response: {} as {
id: string,
username: string,
email: string
}
},
}
```
*Wait, what is that object ? Is a plain JavaScript object or a TypeScript definition ?*
It's both !
Technicaly, it's a plain JavaScript object, but it's also used as TypeScript definition for some keys with the powerful of `as` TypeScript keyword.
Now, let's build a `request()` function, base on native `fetch` browser:
```js
import queryString from 'query-string'
const request = (config) => {
const {
url,
method,
data,
queryParams,
...restConfig
} = config
const baseURL = 'https://api.com'
const queryParamsStr = queryString.stringify(queryParams)
const fullURL = `${baseURL}/${url}?${queryParamsStr}`
return fetch(fullURL, {
method,
body: JSON.stringify(data),
...restConfig
}).then(res => res.json())
}
```
It's a very basic function with some data handling, like stringify `query params` and `data`, concat `baseURL` and return a promise with plain JavaScript object.
Currently, TypeScript doesn't know anything about the request schema. It could be usefull if TS can autocomplete config data depends on the request ?
`typescript-object-schema` provide 3 utils types to build a powerfull config schema:
```js
import { ObjectParams, FnParams, Extends } from 'typescript-object-schema'
```
* `ObjectParams` - used to add an object of your schema in your config
* `FnParams` - used to add a function argument of your schema in your config
* `Extends` - used to extends an object (internally, it avoid conflict with `ObjectParams` and `FnParams` keys)
Too complicated ? Let's see an example:
```ts
type Schema = typeof schema
type SchemaKeys = keyof Schema
type RequestConfig = NonNullable