Vue.js + TypeScript の開発環境構築

参考サイト

• https://kuroeveryday.blogspot.com/2017/10/vue-2-5-with-typescript.html
• https://kuroeveryday.blogspot.com/2017/09/how-to-use-vuejs-with-typescript.html
• https://qiita.com/Sapphirus/items/46b3a4c68fefd3ddd658

プロジェクト作成

$ vue init webpack sample

? Project name sample
? Project description sample
? Author yasx 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

$ cd sample
$ npm run dev

Typescript 対応

$ npm i -D typescript ts-loader
$ ./node_modules/typescript/bin/tsc --init

TypeScript用にtsconfig.jsonを編集

./tsconfig.json

{
  "compilerOptions": {
    "target": "es5", 
    "module": "es2015",
    "sourceMap": true,

    "strict": true,
    "noImplicitThis": true,

    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true

  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

型定義ファイルを設置

Typescriptで*.vueファイルを読めるようにするためsfc.d.ts作成。

./src/sfc.d.ts

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

webpack.base.conf.jsを編集

./build/webpack.base.conf.js

・・・
module.exports = {
・・・
  entry: {
    // エントリポイントの拡張子を.js→.tsに変更
    app: './src/main.ts'
  },
・・・
  resolve: {
    // extensionsに'.ts'を追加
    extensions: ['.js', '.vue', '.json', '.ts'],
・・・
  module: {
・・・
      // ↓追加
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        include: [resolve('src'), resolve('test')],
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      // ↑追加
・・・

ファイル拡張子を変更

.js → .ts に変更。
拡張子の変更に応じてファイル内を変更。

• ./src/main.js → ./src/main.ts
• ./src/router/index.js → ./src/router/index.ts

./src/main.ts

import App from './App'
↓
import App from './App.vue'

./src/router/index.ts

import HelloWorld from '@/components/HelloWorld'
↓
import HelloWorld from '@/components/HelloWorld.vue'

./src/App.vue

<script lang="ts">  ← lang="ts" を追加

./src/components/HelloWorld.vue

<script lang="ts">  ← lang="ts" を追加

起動

$ npm run dev

ただ、自分の環境だと2018/06/20時点だとエラーとなるので、ライブラリを動作してたころのバージョンに合わせてみる。

./package.json

・・・
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "ts-loader": "^3.5.0",  ←これ
    "typescript": "^2.9.2",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

$ npm install
$ npm run dev

ひとまず上記のバージョンだと起動が確認できた。