Djangoroidの奮闘記

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

Angularのための、TypeScript入門その1

Typescript for Angular

参考サイト

https://www.codingforentrepreneurs.com/projects/getting-started-typescript/ https://www.codingforentrepreneurs.com/blog/typescript-setup-guide/

install node.js

公式ホームページからinstallする
npmをアップグレードしておく。

$ sudo npm install -g npm

Configure Typescript

Typescriptに必要なパッケージをnpmでinstallする。

$ npm install -g typescript
$ npm install -g webpack
$ npm install -g ts-loader
$ npm install -g jquery
$ npm install -g http-server

main.tsファイルを作成する。

class SweetSweetClass { //
    constructor() {
        console.log("Even sweeter")
    }
}
let basil = new SweetSweetClass()

tsconfig.jsonを作成する。

{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist/",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true
  },
  "include": [
    "*"
  ],
  "exclude": [
      "node_modules",
      "**/*.spec.ts"
  ]
}

tsconfig.jsonを作成する。

{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist/",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true
  },
  "include": [
    "*"
  ],
  "exclude": [
      "node_modules",
      "**/*.spec.ts"
  ]
}

$tsc　をshellで実行して、tsファイル>jsファイルにtrans compileする! > dist/main.js　が作成されたすごい！
index.html を作成する。scriptで、tsファイルではなく、jsファイルを指定しているところが重要なポイントか。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script src='/dist/main.js'></script>
</body>
</html>

$tsc --watchを実行すると、tsファイルを変更したときに即時jsファイルにtsc してくれる。なので、これからはこれを起動中にしておくことが多いかも知んないな。
$ http-server -c-1を実行する。-c-1は、Using the flag -c-1 makes the browser never cache the files. とのこと。

感想

justinやっぱ教えるのうまいな〜。英語だけどめっちゃわかりやすい。