TypeScript
We use TypeScript to statically type-check and build our frontend.

Nuxt integration

We use typescript that is bundled with Nuxt since 2.5.0 release.
So do not install anything rather than nuxt and @nuxt/typescript. And it just works.

tsconfig.json

You can modify your ts configuration inside this file. Read more about useful options here.

Declaration files

We use client/shims/*.d.ts files to store several declarations that are required for our app. Like:
    @nuxt/axios that adds $axios property to vue and vuex
    $style property on Vue components to support css-modules
    global .vue files support for typescript

Supporting packages

We use nuxt-property-decorator to make our Vue components type-safe.
We also use vuex-class to make our state, actions, mutations, and getters typed.

Runtime checks

Sometimes you want to make some runtime type checks: inside API methods, input validations, etc.
And since TypeScript types are only allowed during static check, we cannot use them in runtime.
So, we use io-ts and io-ts-promise to build and validate runtime types.
That's how building runtime types is done:
1
import * as ts from 'io-ts'
2
3
// Runtime type, that can be used for schema validation:
4
export const RawComment = ts.type({
5
'id': ts.number,
6
'body': ts.string,
7
'email': ts.string,
8
})
9
10
// Static TypeScript type, that can be used as a regular `type`:
11
export type RawCommentType = ts.TypeOf<typeof RawComment>
Copied!
And then validating it:
1
import * as ts from 'io-ts'
2
import * as tPromise from 'io-ts-promise'
3
4
async function fetchComments ($axios): Promise<RawCommentType[]> {
5
const response = await $axios.get('comments')
6
// Now we are sure that `response.data` has the correct runtime type:
7
return tPromise.decode(ts.array(RawComment), response.data)
8
}
Copied!
That's a powerful combination of runtime and static type checking that enforces strong contracts on data exchange and keeping it up-to-date.
Last modified 6mo ago