はじめに

おはようございます。こんにちは。こんばんは。
Watatakuです。
今回はVue.jsからはじめるTypescriptと言うことでVue.jsにTypeScriptを導入して同時にTypeScriptにも触れていこうじゃないかと思います。

この記事はの対象者はVueを勉強しているけど「TypeScriptベースでアプリを構築したい！」という方へ向けて書いております。

TypeScriptとは

まずはTypeScriptはなんぞや？と言う話です。

TypeScriptは、JavaScriptの代替となるべくマイクロソフトによって開発されたオープンソースのプログラミング言語です。
その特徴は、大規模なアプリケーションの開発に耐えるように、(C++やJavaなどの)クラスベースのオブジェクト指向プログラムの機能や、変数への静的な型の指定などを取り込んで、設計されています。それはJavaScriptの標準仕様であるECMAScript2015以降の新機能を先取りした形にもなっています。

「型定義できるJavaScript」。

インストール

※Node.js,vue-cliはインストール済みとして進めていきます。

$ vue create プロジェクト名

ここからぽちぽちしていきます。

まずは、インストール方法を「デフォルト」か「手動」か選択するよう確認されます。

Vue CLI v3.4.0
? Please pick a preset:
  default (babel, eslint)
> Manually select features

ここでは「マニュアル」を選択します。
Manually select featuresを選んで Enter を押します。
※デフォルトを選択するとデフォルトなプロジェクトができます。←いやそのままw

次にプロジェクトに必要な機能を選択します。
下記の*がついた機能をインストールします。スペースキーでトグルしてください。

? Check the features needed for your project:
>(*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 ( ) E2E Testing

選択したら Enter キーを押します。

? Use class-style component syntax? (Y/n)

クラススタイルでの記述によってコンポーネントを作成するので、「Use class-style component syntax?」はYesを選択します。

router のヒストリーモード

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

ヒストリーモードを使用するので Y キーを入力して Enter を押します。

CSS プリプロセッサ

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
> Stylus

Stylusを選択した状態で Enter を押します。

ESLint

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

エラー防止のみのESLint with error prevention onlyを選択して Enter を押します。

Lint 実行タイミング

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

保存時に Lint を実行するためLint on saveのみチェックを入れて Enter を押します。

単体テスト

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  Jest

ユニットテストはMocha + Chaiを選択して Enter を押します。

設定ファイル

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

設定ファイルは個別に管理するのでIn dedicated config filesを選択して Enter を押します。

プリセットの保存

? Save this as a preset for future projects? (y/N)

次回のインストールのためにこの設定を保存しておきます。y キーを入力して Enter キーを押します。

? Save preset as: example

ここではプリセット名をexampleと入力します。
Enter でインストールを開始します。
※インストール選択画面で今回選択しなかったのもを選択するとここでは出てこなかった質問も出ますが全てEnterで問題ないと思います。

インストールが完了すれば起動してみましょう。

起動

> cd プロジェクト名
> npm run serve

localhost:8080にアクセスし、このwelcomeページが出てきたら成功です。お疲れ様でした。

以上。

最後に

解説が浅いところとか、間違い等があると思いますのでその時はアドバイス等お願いします。
次回以降にTypescriptの書き方であったりVueファイルの中でのTypescriptの使い方をやっていきましょう。

最後まで読んでいただきありがとうございました。
Twitterやってます。良ければチェックして見てください。

Vue.jsでTypeScriptを始めよう(はじめかた)