「プログラミングTypeScript」の感想・備忘録

点数

70点

感想

全体的にわかりづらかった。
フロントエンド開発でJavaScriptに静的型付けを追加したいだけであれば、本書の知識はそこまで必要はないと思う。
TypeScriptを使って本格的な開発をする場合は必要になってくると思う。

環境構築

手順

  1. mkdir sample
  2. cd sample
  3. npm init
  4. npm install --save-dev typescript tslint @types/node
  5. touch tsconfig.json
  6. npx tslint --init

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2015"],
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "es2015"
  },
  "include": [
    "src"
  ]
}

tslint.json

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "semikolon": false,
        "trailing-comma": false
    },
    "rulesDirectory": []
}

Hello World

手順

  • mkdir src
  • touch src/index.ts
  • npx tsc
  • node ./dist/index.js
    コンパイルするとdistディレクトリにjsファイルが生成されるのでnodeコマンドで実行する。
    なお、ts-nodeライブラリをインストールするとコンパイルと実行を1つのコマンドで行うことができる。
console.log("Hello World")

型について

  • できる限り型推論を使い、必要な場合だけアノテーションでの型指定を行うようにするべき。
  • 関数は引数のみアノテートし、戻り値は型推論を使うべき。
  • tsconfigでnoImplicitAny: trueにすると型推論でanyとなるものはエラーとなる。
    noImplicitAnyはstrictに含まれるので、strictをtrueにするとnoImplicitAnyもtrueになる。

フロントエンド

フロントエンドでTypeScriptを使う場合は、tsconfig.jsonにdomを追加する。
これにより、型チェックの際にlib.dom.d.tsの型宣言が含まれるようになる。

"compilerOptions": {
  "lib": ["es2015", "dom"],
  // 以下省略

例えば、以下にようなコードで型推論が行われる。
const url = window.location.href // string
const input = document.createElement("input") // HTMLInputElement

nodeコマンドで実行してもDOM APIは存在しないためエラーとなる。
./dist/index.jsを読み込む./dist/index.htmlを用意してブラウザで表示すると確認することができる。

コメント

タイトルとURLをコピーしました