refactor: TypeScript を導入する（Nuxt バージョンアップ含む）

[inouetakuya]

Fix: TypeScript を導入する · Issue #6 · kazupon/vuefes-2019

完了条件

• Nuxt が最新バージョンに上げられていること（v2.6.1）
• TypeScript が利用できるようになっていること
• Vue コンポーネントを Vue.extend で書くかクラススタイルで書くか決まること
• テストが TypeScript で記述されていること

レビューポイント

• Vue コンポーネントの書き方について（Vue.extend or クラススタイル）
• tsconfig.json について気になる点があれば教えてください

Migration Guide

Release Notes - Nuxt.js
https://nuxtjs.org/guide/release-notes

Releases · nuxt/nuxt.js
https://github.com/nuxt/nuxt.js/releases

Nuxt 公式ドキュメント

TypeScript Support - Nuxt.js
https://nuxtjs.org/guide/typescript

API: The build Property - Nuxt.js
https://nuxtjs.org/api/configuration-build#typescript

参考（Vue.extend or クラススタイル）

TypeScript のサポート — Vue.js
https://jp.vuejs.org/v2/guide/typescript.html

Microsoft/TypeScript-Vue-Starter: A starter template for TypeScript and Vue with a detailed README describing how to use the two together.
https://github.com/Microsoft/TypeScript-Vue-Starter#single-file-components

Vuex による状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita
https://qiita.com/potato4d/items/c9c0c8e674f20c85948a

[inouetakuya]

@potato4d @aytdm @Monkick @mtmtkzm @ryamakuchi @satotakumi @yinm @hisako135 @448jp @kazupon

レビューをお願いしますー 🙏

Vue コンポーネントを Vue.extend で書くかクラススタイルで書くか決まること

これについては、現時点ではどちらのほうが明確に優れていると言い切れないため、好みの問題かと考えています。

そのうえで Nuxt 公式ドキュメント が

For components, we highly advice to use vue-property-decorator which depends on vue-class-component.

といっていることから、Nuxt x TypeScript はクラススタイルの書き方が主流になってくるかと思い、日本の Vue / Nuxt コミュニティにもその例を示したいと思い、クラススタイルを選択しましたが、どうでしょう？

[yinm]

確認事項だけコメントしました 🙏
Vue コンポーネントの書き方は、クラススタイルでいいんじゃないかなと思ってます！

[yinm]

出力後のJSって、ES5じゃなくても大丈夫でしょうか？？ (ブラウザのサポートってどこまでするのかなと思いまして 👀)

[inouetakuya]

TypeScript をコンパイルした後に、Babel がトランスパイルするので、ここは esnext のままで大丈夫です〜 😄

• https://github.com/nuxt/nuxt.js/blob/v2.6.1/packages/webpack/src/config/base.js#L264-L273

[inouetakuya]

2cedca2

nuxt.config.js -> nuxt.config.ts への変換については Lint エラーと TypeScript コンパイルエラーのため、切り戻します。対応に調査が必要なので、後日別途対応します。

• https://nuxtjs.org/guide/typescript#from-javascript-to-typescript

Lint

[@GISELE.local vuefes-2019]$ yarn lint
yarn run v1.15.2
$ yarn eslint && yarn stylelint
$ eslint --ext .ts,.js,.vue --ignore-path .gitignore .

/Users/inouetakuya/src/github.com/kazupon/vuefes-2019/nuxt.config.ts
  1:8  error  'NuxtConfiguration' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Compile TypeScript

[@GISELE.local vuefes-2019]$ yarn generate
yarn run v1.15.2
$ nuxt generate

 FATAL  ⨯ Unable to compile TypeScript:                                                                                                            15:57:25
nuxt.config.ts:20:3 - error TS2322: Type '{ src: string; lang: string; }[]' is not assignable to type 'string[]'.
  Type '{ src: string; lang: string; }' is not assignable to type 'string'.

20   css: [{ src: '~/assets/stylesheets/main.scss', lang: 'scss' }],
     ~~~

  node_modules/@nuxt/config/types/index.d.ts:23:3
    23   css?: string[]
         ~~~
    The expected type comes from property 'css' which is declared here on type 'NuxtConfiguration'
nuxt.config.ts:36:9 - error TS2532: Object is possibly 'undefined'.

36         config.module.rules.push({
           ~~~~~~~~~~~~~
nuxt.config.ts:42:9 - error TS2532: Object is possibly 'undefined'.

42         config.plugins.push(
           ~~~~~~~~~~~~~~


  nuxt.config.ts:20:3 - error TS2322: Type '{ src: string; lang: string; }[]' is not assignable to type 'string[]'.
  Type '{ src: string; lang: string; }' is not assignable to type 'string'.

  20   css: [{ src: '~/assets/stylesheets/main.scss', lang: 'scss' }],
       ~~~

  node_modules/@nuxt/config/types/index.d.ts:23:3
  23   css?: string[]
       ~~~
  The expected type comes from property 'css' which is declared here on type 'NuxtConfiguration'
  nuxt.config.ts:36:9 - error TS2532: Object is possibly 'undefined'.

  36         config.module.rules.push({
             ~~~~~~~~~~~~~
  nuxt.config.ts:42:9 - error TS2532: Object is possibly 'undefined'.

  42         config.plugins.push(
             ~~~~~~~~~~~~~~

  at createTSError (node_modules/ts-node/src/index.ts:226:12)
  at getOutput (node_modules/ts-node/src/index.ts:335:40)
  at Object.compile (node_modules/ts-node/src/index.ts:368:11)
  at Module.m._compile (node_modules/ts-node/src/index.ts:414:43)
  at Module._extensions..js (internal/modules/cjs/loader.js:712:10)
  at Object.require.extensions.(anonymous function) [as .ts] (node_modules/ts-node/src/index.ts:417:12)
  at Module.load (internal/modules/cjs/loader.js:600:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
  at Function.Module._load (internal/modules/cjs/loader.js:531:3)
  at Module.require (internal/modules/cjs/loader.js:637:17)


   ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                                                       │
   │   ✖ Nuxt Fatal Error                                                                                                  │
   │                                                                                                                       │
   │   TSError: ⨯ Unable to compile TypeScript:                                                                            │
   │   nuxt.config.ts:20:3 - error TS2322: Type '{ src: string; lang: string; }[]' is not assignable to type 'string[]'.   │
   │   Type '{ src: string; lang: string; }' is not assignable to type 'string'.                                           │
   │                                                                                                                       │
   │   20   css: [{ src: '~/assets/stylesheets/main.scss', lang: 'scss' }],                                                │
   │   ~~~                                                                                                                 │
   │                                                                                                                       │
   │   node_modules/@nuxt/config/types/index.d.ts:23:3                                                                     │
   │   23   css?: string[]                                                                                                 │
   │   ~~~                                                                                                                 │
   │   The expected type comes from property 'css' which is declared here on type 'NuxtConfiguration'                      │
   │   nuxt.config.ts:36:9 - error TS2532: Object is possibly 'undefined'.                                                 │
   │                                                                                                                       │
   │   36         config.module.rules.push({                                                                               │
   │   ~~~~~~~~~~~~~                                                                                                       │
   │   nuxt.config.ts:42:9 - error TS2532: Object is possibly 'undefined'.                                                 │
   │                                                                                                                       │
   │   42         config.plugins.push(                                                                                     │
   │   ~~~~~~~~~~~~~~                                                                                                      │
   │                                                                                                                       │
   │                                                                                                                       │
   ╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[inouetakuya]

レビューありがとうございました！マージします！:muscle: