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

プログラミングTypeScript

posted with ヨメレバ

Boris Cherny/今村謙士/原隆文オライリー・ジャパン 2020年03月16日頃

楽天ブックス

Amazon

Kindle

点数
感想
環境構築
Hello World
1. 手順
型について
フロントエンド

点数

70点

感想

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

環境構築

手順

mkdir sample
cd sample
npm init
npm install --save-dev typescript tslint @types/node
touch tsconfig.json
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を用意してブラウザで表示すると確認することができる。