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