2020.05.06nuxtにtypescriptを入れて使ってみました。目次typescriptをインストールする@nuxt/typescript-buildをインストールtsconfig.jsonの作成@nuxt/typescript-runtimeをインストールpackage.jsonファイルを修正するnuxt-property-decoratorをインストールtodoリストを作ってみるソースコードやっていること動作確認サンプルソースtypescriptをインストールする公式のセットアップ手順によると、@nuxt/typescript-buildと@nuxt/typescript-runtimeが必要そうでした。あと、tsconfig.jsonファイルの作成とpackeage.jsonの編集が必要です。@nuxt/typescript-build上記でインストールします。下記のような感じで作成して、プロジェクト配下に配置しました。@nuxt/typescript-runtime上記でインストールします。package.jsonファイルを修正するpackage.jsonファイルを修正します。}}こんな感じに修正しました。ここまでが、公式ページで載っていた導入手順です。nuxt-property-decoratorをインストールgithubページこれを導入することで、クラス形式でスクリプトがかけるみたいです。これも入れて、クラス形式のみやすい感じで書いてみました。todoリストを作ってみる前回作ったtodoリストをtypescript化してみました。typescriptを導入したことで可読性が上がりました。大規模のプロジェクトでコードを書くときには導入必須かもしれないですねー。}}</script>やっていること1〜18行目のpugのタグは前回のものとほとんど変わりないです。テキスト入力エリア・登録ボタンと、todoリストの表示をするエリアを作成しています。20行目からがscriptになっています。mapActionsを定義しています。クラスのメソッドでは、mountedで初期ロード時にタイトルを設定してstoreのメソッドを使ってaddTodoでTodoの追加、deleteTodoでTodoの削除をしています。動作確認ページタイトルもちゃんと設定されて、登録削除できました✊🏻サンプルソースこちらにサンプルを置いています。//Vue.js記事一覧へJavaScriptNuxt.jsVue.jsプログラミングシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクswiftSwiftの学習におすすめな本3選!【現役エンジニア選定】Swiftの学習におすすめの本を3つ紹介しています。最初にSwiftについて簡単に説明して、その後におすすめの本を紹介しました。最後にSwiftを「どの本で学ぶのが良いか」の考察をまとめています。筆者の観点からレベル別に初級者・中級...C#C#の学習におすすめの本5選!【現役エンジニア選定】C#の学習におすすめの本を5つ紹介しています。最初にC#について簡単に説明して、その後におすすめの本を紹介しました。ゲストさんC#の学習にオススメの本はどれ?C#の本を難易度順に教えて!yasuakiこんな方は是非、確認してみていってくださ...PHPPHPでファイルに書き込む2つの方法!PHPでファイルに書き込む方法について書いています。ファイルに書き込みをする時には、下記の2つの方法があります。・ファイルをfopen関数で開いて書き込む・file_put_contents関数を使うfile_put_contents関数の...JavaScriptJavaScriptのbreakの使い方!(ループを抜ける)JavaScriptのbreakの使い方について書いています。breakの使い方について解説した後に、下記の内容について説明しています。・breakをラベルで使う・while文の繰り返しで使う・breakはforEachで使えるのか?・br...Python【Python入門】コメントを書く方法について!(1行/複数行)Pythonでコメントを書く方法について書いています。コメントはソースコードに説明を付けることができる機能です。ソースコードの中で、コメントした箇所にはプログラム実行時には無視されます。載せているコードについては、Pythonの3.11.0...PHPPHPでファイルを読み込む6つの方法!PHPでファイルを読み込む方法をまとめました。6つの方法でファイルを読み込んでみます。・file関数・readfile関数・file_get_contents関数・SplFileObjectクラス・fread関数・fgets関数fread関...C#C#のリストで要素を削除する4つの方法!C#のリストの要素を削除する方法について書いています。リストの要素を削除する、下記のメソッドについて解説しました。・Removeメソッド・RemoveAtメソッド・RemoveRangeメソッド・Clearメソッド載せているコードについては...PHPPHPのcontinueの使い方!(ループをスキップする)PHPのcontinueの使い方について書いています。最初にcontinueについて解説して、その後に下記の内容について書きました。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。目次typescriptをインストールする@nuxt/typescript-buildをインストールtsconfig.jsonの作成@nuxt/typescript-runtimeをインストールpackage.jsonファイルを修正するnuxt-property-decoratorをインストールtodoリストを作ってみるソースコードやっていること動作確認サンプルソースVue.jsの学習におすすめの本を選定!【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。Vue.jsの学習に本が必要?Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに使われ...codelikes.com2022.10.23JavaScriptの学習におすすめの本を選定!【現役エンジニアが選定】JavaScriptの学習におすすめの本5選JavaScriptの学習におすすめの本を選定してみました。最初にJavaScriptはどんなものかと、学習に本が必要かを考えて書いてみました。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。