TypeScript

【TS導入編】超初心者向けNuxt TypeScript 〜Options API〜

前置き

今回はNuxt TypeScriptについてです。
導入方法と簡単な書き方をご紹介🌟

本格的に使う前に
こういう記事を見ると良いかもです💡
Nuxt(vue) + TypeScriptをはじめるときに知っておきたかった10のこと


フレームワークなしの場合はこちら

共通の書き方も少しずつ出しているので
気になったら見てみてください✨👀

⬇️TypeScriptとは
 TypeScriptの良さ
【Nuxt.js】超初心者向けTypeScript〜環境構築編〜

⬇️自動コンパイルやクラスについて
【TS導入編】超初心者向けTypeScript〜自動コンパイル〜
【TS導入編】超初心者向けTypeScript〜環境構築の補足&クラスなど〜


参考:
そのNuxt、TypeScriptで。
Nuxt.js TypeScript - 実践TypeScript アップデート -
[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた


インストール

まずはインストール

$ npm init nuxt-app
Nuxtプロジェクト作成時に
選択していれば
別途のインストールは必要なし❗️

⬇️プロジェクト作成方法はこちら
【Nuxt.js】Nuxtの環境構築をしよう


3つのパッケージ

3つのパッケージがありますが
必須とオプションに分かれます。
Nuxt TypeScript > イントロダクション


必須パッケージ

$ npm init nuxt-app
TSを選択すると
この2つが入ります。
@nuxt/types
@nuxt/typescript-build

buildはNuxtをTypeScriptでコンパイルするのに必要
Nuxt TypeScript > セットアップ

npm install --save-dev @nuxt/typescript-build @nuxt/types


オプションパッケージ

nuxt-tsを使用したいなら
こちらも入れてね
ということらしいです。
@nuxt/typescript-runtime
Nuxt TypeScript > Runtime(オプション)

nuxt-tsとは何ぞや❓
という感じですが、
$ npm init nuxt-app
custom server frameworkを
選択している場合に必要。
つまりサーバーでTypeScriptを使った
Nuxtを稼働させるために必要❗️

今はその質問がなくなったので、
自分で後入れしている場合は
インストールしましょう💡


動作確認

必須パッケージのみで
とりあえずシンプルな型指定で
エラーもなく動きました。


自動コンパイル

フレームワークなしの時にやった
$ npm run generate
してからlite-serverを使用しても
上手くいきませんでした。

ローカルサーバーと
自動ブラウザリロード系が必要かも…
BrowserSyncとかts-loaderあたり…❓🤔

と思ったのですがNuxtの場合は
ひとまずこれで動きます🌟

$ npm run dev // macターミナル
$ tsc -watch // エディターターミナル

tscコマンドを使うには
TSのグローバルインストールが必要💫

$ npm install typescript --save-dev

ただやっぱり
webpack-dev-server
ts-loader
が必要な感じもします。
設定がチンプンカンプンだったので
ある程度使うようになってから
こちらを参考にやってみます🍀
最新版TypeScript+webpack 5の環境構築まとめ


Vue.extendで書いてみる

書き方がいくつかある中で
1番良いのがVue.extend❤️
Options API と言われています💫

script内がこんな感じで
ここにどんどんTSを
書き込んでいきます✍️


サンプルコード①data

雰囲気を掴むために
dataで使用してみましょう。
VueのAPIを確認すると
こう書かれています✍️
Vue > API > オプション/データ

ということで
Nuxtで書いてみましょう❣️

ほとんどVueと変わりません。
DataTypeの部分は好きな名称でOK⭕️
TSだと分かりやすくするために、
先頭は大文字にする方が良さそうです。

コードはこちらを使わせていただきました。
[Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた


他も同じような書き方です!
型定義をしておいて、
Vue.extend内では
実際の値、式を書いていく…
といった感じですね🌱✨


サンプルコード②props

propsについてはVue APIではなく
Nuxt TypeScriptに明記されています👀
Options API


storeの場合

Vuexを使用したいから
storeに書く…
となるとまた色々かわるので、
そちらも記事にしたいですね🎈🧸
これがすごく参考になりそう…!
Options APIを使用してNuxt.js + TypeScriptでVuexに型指定する方法(nuxt-typed-vuex)


まとめ

TSについて色々やってきましたが、
やっとスタート地点…
の手前くらいは来ました❗😂笑

公式のどのページを確認すれば良いのか
なかなか分からずにググり続け…🔎
ようやく分かってきたのが
大きいかもしれません🎈🧸


あと最近のNuxtホントにイイですね👍💕
ディレクトリシンプルになったし、
質問答えるだけで必要なものだけ入るし、
$ npm install nuxtしなくていいし
コンポーネント自動インポートできるし、
煩わしさがないです✨

-TypeScript
-,

© 2021 aLiz Nuxt