Using Vue with WebPack

I wanted to transfer my existing script to WebPack bundle.  The application is a simple page that uses  Vue.js.   Note that I only read Introduction part of Vue and started using it.  At that time, I did not even know the concept of Vue component files .  Thus my application was entirely in one JavaScript file. I rewrote it using typescript.   WebPack bundling was necessary to make it work. I had to decipher minor (but important) detail on NPM’s Vue  module that should be used along with WebPack.  If I were to use a Vue package from node_modules/ and bundle it with WebPack, then the default module that will be […]

TypeScript その2

年末の休暇を利用してtypeScriptの演習を続行中。 現在まで理解できたところをとりあえず列挙。 nodejs が導入されている必要あり。 npm install typescript -g これで tscコマンドが使えるようになる。 tsc example.ts そして、これでexample.ts から example.jsがトランスパイルされる。 プロジェクトフォルダー内で tsc init とやると、コンパイラー設定用のtsconfig.jsonが作成され規定値が設定される。例えば、出力のJavaScriptのレベルが <pre>”target”:”es5″</pre> などと記述されている。またコードをトランスパイルしたときのエラーの出力設定などもできる。今のところ全く変更の必要のないレベルでトライアル中。 TypeScript は 基本的には JavaScriptのsuper setなのだが、 ’let’, ‘const’, ‘arrow function ()=>’, ‘ … spread operator’,’Template strings’ などes2015の書式が既にサポートされている。 なのでexample.tsではこれらの言語機能を使ってプログラムを書き、tscでトランスパイルすると、これらの表記をまだサポートしていない現行のブラウザでも動くようなJavaScriptに書き換えてくれる。上のConfig例ではes5レベルのコードに置き換わる。 つまりBabelと同じような使い方ができる、。 type safeなので 異なったタイプの変数へのアサインは論外としてもその可能性が生じそうなコードにはエラー表示が鬼のようにでる。例外処理とか、Interface定義を記述して対処すると満足して何も言わなくなってくれるので、バグの可能性のあるコードを書く可能性が低くなる。

TypeScript 入門

TypeScriptのイントロがDev.office.comにあるので眺めてみた。 tsとして以下の例が載っている。 class Student { fullName: string; constructor( public firstName, public middleInitial, public lastName){ this.fullName = firstName + ” “+ middleInitial + ” ” + lastName; } } interface Person { firstName: string; lastName : string; } function greeter(person: Person){ return “Hello, “+ person.firstName + ” ” + person.lastName; } let user =new Student(“Jane”,”G.”,”Doe”); document.body.innerHTML=greeter(user); これをJSにコンパイルするとこうなる(WebStormはプラグインが動いてダイナミックに自動生成する) var Student = (function () { function Student(firstName, middleInitial, lastName) { this.firstName = firstName; this.middleInitial = middleInitial; this.lastName = lastName; this.fullName = firstName + ” ” + middleInitial + ” ” + lastName; } return Student; }()); function greeter(person) { return “Hello, ” + person.firstName + ” ” + person.lastName; } var user = […]