はじめに
44と申します。大阪の専門学校でプログラミングを勉強しており、よくVue.jsでつまらないツールを作っています。
この間初めてTypeScriptを触りVue.jsで使いたいと思い調べて見ました。
準備
webpackのインストール
webpackは１系をいれてください、vue-ts-loaderがまだ２系に対応していないみたいです。
npm install webpack --save-dev
Vue.jsのインストール
npm install vue --save
vue-loaderのインストール
npm install vue-loader css-loader vue-template-compiler --save-dev
vue-ts-loaderのインストール
npm install vue-ts-loader --save-dev
設定
webpackとtsconfigの設定をしていきます。
webpackの設定
webpack.config.js
module.exports = {
entry: { app: './app.ts', },
output: { filename: 'app.js' },
// resolve TypeScript and Vue file
resolve: {
extensions: ['', '.ts', '.vue', '.js']
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.ts$/, loader: 'vue-ts' }
],
},
vue: {
loaders: { js: 'vue-ts-loader', },
esModule: true
}
}
loaders: { js: 'vue-ts-loader', }とすることで.vueの<script>部分でlang属性をしなくてもいいようです。
tsconfigの設定
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"experimentalDecorators": true,
"lib": ["es5", "es2015.promise", "dom"]
}
}
これで設定は完了したのでHellow Worldを書いて行きたいと思います、
Hello World
app.ts
declare var require: any
import Vue = require('vue')
var App = require('./src/App.vue').default
new Vue({
el: '#app',
components: { App },
render: h => h('app')
})
app.tsでVueのルートコンポーネントを生成します。
src/App.vue
<template>
<h1 @click="hello">hello world</h1>
</template>
<script>
export default {
methods: {
hello(): void {
alert('hello world')
}
}
}
</script>
index.htmlではapp.tsを読み込むのではなくコンパイルしてできたapp.jsを読み込みます。
index.html
<html>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
これでHello Worldの準備は完了です！
ここまでのソースコードを置いておきます。
実行！
準備ができたのであとはwebpackコマンドを実行しindex.htmlをブラウザで開くだけです。
最後に
普段、Visual Studio Codeを使って開発しているのですがお互いマイクロソフト製ということもあってすごい開発しやすいです。
JavaScriptを1年半ぐらい触っていて型がないのつらいと思っていた時にTypeScriptに出会い「やっぱり型っていいな」と思いました。