edy hub

プログラミングやライフスタイルについて書き綴っています

トップ > Typescript学習〜『プロを目指す人のためのTypeScript入門』を読んでみて第1章〜

Typescript学習〜『プロを目指す人のためのTypeScript入門』を読んでみて第1章〜

はじめに

普段はバックエンドの開発がメインですが時たまフロントエンドの開発に着手することがあります。 今まではRails内でjQueryによる開発が多かったのですが去年あたりから Next.js × TypeScript の環境に移行し始めたので良い機会と思いTypeScriptを勉強し始めました。

会社の同僚が紹介してくれた入門書を読んでいきがてら備忘録を残しておこうと思います。

メモ

  • TypeScriptには静的型システムが備わっている
  • コンパイルエラーが出たら大喜び
  • 型安全性とドキュメント化のメリットがある
  • TypeScriptは "Javascript + 型" という様相の言語である
  • Node.js は偶数のメジャーバージョン（14, 16, ...）が安定版とされている（←確かに、と思いつつ知らなかった）

作業に移る前の準備

nvmのインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

インストールが終わると .zshrc に以下が追加されます。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

バージョンが表示されれば成功です。

% nvm -v
0.37.2

nodeのインストール

nvmに続けてnodeをインストールします。

% nvm install --lts
Installing latest LTS version.
Downloading and installing node v16.15.1...
Downloading https://nodejs.org/dist/v16.15.1/node-v16.15.1-darwin-arm64.tar.xz...
########################################################################################################################################################### 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v16.15.1 (npm v8.11.0)
Creating default alias: default -> lts/* (-> v16.15.1)

バージョンが表示されれば成功です。

% node -v
v16.15.1

package.jsonを作成

% npm init --yes

※ --yes は対話形式でのコマンド入力をスキップして、すべての質問をデフォルト値で答える。

TypeScriptをインストール

% npm install --save-dev typescript @types/node                                                                                                          

added 2 packages, and audited 3 packages in 2s

found 0 vulnerabilities

tsconfig.jsonの準備

コンパイラオプションとしてコマンドライン引数ではなく tsconfig.json を採用

% npx tsc --init                                                                                                                                         

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

基本的な進め方