Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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の講座わかりやすい!