読者です 読者をやめる 読者になる 読者になる

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やっぱ教えるのうまいな〜。英語だけどめっちゃわかりやすい。