🍭

暫定的に Nuxt で TypeScript 4.1 を使用する

2020/11/24に公開

Nuxt

TypeScript

EveOneZenn

tech

はじめに

この記事は #EveOneZenn (Everyday One Zenn) vol.02 です。

まだ公式でサポートされていない Nuxt で TypeScript 4.1 を使用するまでのセットアップをまとめます。
@nuxt/typescript-build が公式に TypeScript 4.1 をサポートするまでの間は、ここで詳細する手順でプロジェクトをセットアップする必要があります。

前回：

TL;DR

typescript と ts-loader を手動インストールする。

$ yarn add -D typescript ts-loader

単純に `@nuxt/typescript-build` をセットアップした場合

まずは、単純に @nuxt/typescript-build をインストールしたプロジェクトで TypeScript 4.1 の新機能、 Template Literal Types を使用してみます。

依存関係と nuxt.config.ts は次のとおりです。
ここでは、Vueコンポーネントをタイプセーフにするため @nuxt/composition-api も使用しています。

package.json

{
  "scripts": {
    "dev": "nuxt-ts"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.0",
    "nuxt": "^2.14.7"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.7",
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/composition-api": "^0.15.1"
  }
}

nuxt.config.ts

import { NuxtConfig } from '@nuxt/types';

const config: NuxtConfig = {
  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/composition-api'
  ]
};

export default config;

このプロジェクトで次のように Template Literal Types を使用するページを作成してみます。

pages/index.vue

<script lang="ts">
import { defineComponent, computed } from '@nuxtjs/composition-api';

const NAME = 'simochee';

export default defineComponent({
  setup() {
    const greet = <T extends string>(name: T): `Hello, ${T}` => `Hello, ${name}` as const;
    const greeting = computed((): 'Hello, Zenn' => greet(NAME));

    return {
      greeting,
    };
  },
});
</script>

この時点で、エディタ（VSCode）上でシンタックスエラーとなります。

Nuxt ビルダー上でも同様に複数のエラーが表示されます。

TypeScript のバージョンアップ

続いて、 TypeScript を @nuxt/typescript-build に依存しているパッケージとは別に手動で v4.1 をインストールします。

$ yarn add -D typescript

これで、エディタ上に用事されていたエラーは Template Literal Types の型不正のみとなります。

しかし、Nuxt ビルダー上でも型不正エラーが表示されますが、コンパイルエラーも表示されます。

`ts-loader` のインストール

ビルダーに表示されたコンパイルエラーは ts-loader を手動でインストールしなおせば解消されます。

$ yarn add -D ts-loader

これで、 Nuxt ビルダー上でも型不正エラーのみが表示されるようになりました。

GitHubで編集を提案