Angularのための、TypeScript入門 その3
参考サイト
https://www.codingforentrepreneurs.com/projects/getting-started-typescript/
Declaring Variables - let vs var
- let と varの違い
//letの場合 function f(input: boolean){ let a = 100 if (input) { let b = a + 100012 return b; } return b; //ここでb の定義がされていないというerrorが出る。 } //varの場合 function f(input: boolean){ let a = 100 if (input) { var b = a + 100012 return b; } return b; // varの場合は、よりscope範囲が広いので、errorがでない。 } console.log(f(true)) console.log(f(false))
- 結論的には、let使ったほうが無難というか、python のclassに近い使い方ができるような気がするから、それでいいようなきがする。
Run & Compile with Webpack
Run と Compileにtsc, http-serverの代わりに、webpackを使うという話かな。
$ webpack --watch
をターミナルで打ってみる。。。error!
ERROR in Entry module not found: Error: Can't resolve 'ts-loader' in 'path'
とりあえず、globalではなく、localに、
$ npm install ts-loader
とinstallしたら、解決した!でもたぶん、全部globalでやるのが本当はいいんだろうなとおもいつつもとりあえず、これでやってしまおう。もしかすると、
npm link ts-loader
とかすれば解決したのかなぁ。。まあいいや。今度考えよう。webpack のoutputは、bundle.jsにまとめられるため、
<script src='/dist/bundle.js'></script>
として、index.htmlを修正する。ためしに、
http://127.0.0.1:8080/
にアクセスしてみる。。。予想通りの挙動で成功!!つぎに、src/coffeeフォルダを作成する。そしてその中身を、
getcoffee.ts
を作成する。
// getcoffee.ts class MustHaveCoffee{ constructor(){ //constructorは、newでインスタンスが作成されたときに、実行される console.log("Make it bulletproof") } }
- つぎに、
main.ts
にimportする。
import { MustHaveCoffee } from './src/coffee/getcoffee'; function f(input: boolean){ let a = 100 if (input) { let b = a + 100012 return b; } return a; } console.log(f(true)) console.log(f(false))
- ただ実はこのままだとだめで、
getcoffee.ts
の方に、export
をつけなければいけない。
export class MustHaveCoffee{}
まとめ
webpackは、tsファイルを1つにまとめるので、動作が早いとかファイルがコンパクトになるとかいう効果があるのかな。いま流行ってるぽいし、要チェックだね。
webpack>bundle.jsなどのように、trans compileしたデータを1つにまとめる。
justinの講座わかりやすい!