LoginSignup
18

More than 3 years have passed since last update.

Nuxt.jsでTypeScript 3.7を使う

Last updated at Posted at 2019-11-18

2019/12/18追記

12/12にBabelを取り除きTypeScriptのみでTypeScript 3.7の新機能に対応した@nuxt/typescript-build@0.5.1がリリースされました。

Babel削除に伴い、tsconfig.jsontargetes2018に指定しないと、vue-loaderがOptional ChainingやNullish Coalescingを解析できなくなりました。
そのため、TypeScriptの時点でPolyfill込みのトランスパイルを行う必要があります。

SyntaxError: /path/to/project/component.vue: Support for the experimental syntax 'optionalChaining' isn't currently enabled (30:28):

  29 |         const obj = { foo: 1 };
> 30 |         console.log(obj.bar?.baz?.qux);
     |                            ^

Add @babel/plugin-proposal-optional-chaining (https://git.io/vb4Sk) to the 'plugins' section of your Babel config to enable transformation.
{
  "compilerOptions": {
-    "target": "esnext"
+    "target": "es2018"
  }
}

なお、@nuxt/typescript-build@0.5.1以降はtsconfig.jsontarget指定以外に特別な対応は不要となりました。

手動アップグレード分を削除する

追記前の状態では、手動で関連パッケージをインストールしているため、今後バージョンの乖離が起こる可能性があります。そのため、手動アップデート分のパッケージ情報をpackage.jsonから削除することをおすすめします。

$ yarn remove typescript ts-node ts-loader @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining

2019/12/09追記

本日リリースされた@nuxt/typescript-build@0.4.0@nuxt/typescript-runtime@0.3.0でTypeScript 3.7が正式にサポートされました 🎉

これらのバージョンを使用していれば、以降のBabelプラグインの追加以外の設定は不要となります。

Babelプラグインの追加自体はNode側プロセスで必要みたいなので対応しなければならなようです。

手動アップグレード分を削除する

以降の手順を試された方は、今後のアップデートでバージョンの乖離が起きないよう、手動アップグレードしたtypescriptts-nodets-loaderpackage.jsonから削除しておくことをおすすめします。

$ yarn remove typescript ts-node ts-loader

はじめに

2019/11/18現在、Nuxt.jsではTypeScript 3.7を使用することはできません。

ただし、使用しているパッケージのバージョンを手動で変更すればTypeScript 3.7に対応することができるようです。

ここでは、その手順をご紹介します。

開発環境での設定

パッケージのバージョンアップ

手動で以下のパッケージをバージョンアップします。

  • @nuxt/typescript-runtime
  • @nuxt/typescript-build
  • ts-node
  • ts-loader
  • typescript
$ yarn add "@nuxt/typescript-build@^0.3.4"
$ yarn add -D \
  "@nuxt/typescript-runtime@^0.2.4" \
  "ts-node@^8.5.0" \
  "ts-loader@^6.2.1" \
  "typescript@^3.7.2"

Babelプラグインの追加

TypeScript 3.7から追加された文法上の新機能である Optional ChainingNullish Coalescing はそのままでは実行することができません。

  • @babel/plugin-proposal-nullish-coalescing-operator
  • @babel/plugin-proposal-optional-chaining

そのため、Babelプラグインを追加してトランスパイルされるようにします。

yarn add -D \
  @babel/plugin-proposal-nullish-coalescing-operator \
  @babel/plugin-proposal-optional-chaining

これら2つのプラグインをBabelの設定に追加します。

// nuxt.config.ts
const config: Configuration = {
  build: {
    babel: {
      plugins: [
        '@babel/plugin-proposal-nullish-coalescing-operator',
        '@babel/plugin-proposal-optional-chaining',
      ],
    },
  },
};

moodule.exports = config;

以上で、TypeScript 3.7を使ってNuxtアプリがビルドできるようになりました 🎊

VSCodeでの設定

VSCodeでTypeScript 3.7を用いたVueアプリの開発を行うためには少し設定が必要です。

.tsファイル

.tsファイルの場合は、右下のTypeScriptバージョンを3.6.3からワークスペースのバージョン (3.7.2)に変更すればTypeScript 3.7の新機能でもエラーが発生しなくなります。

image.png

image.png

.vueファイル

.vueファイルの場合はVeturの設定を変更する必要があります。

vetur.useWorkspaceDependenciesにチェックを入れると、ワークスペースのTypeScriptをVeturが参照するため、3.7.2の新機能を使用できるようになります。

image.png

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18