TypeScriptを勉強する

まず最初に...

この記事は手助けというより、個人的な記録の為に記事を書いています。
ご了承ください。。

TypeScriptとは

TypeScriptとは、Microsftによって開発されているプログラミング言語。

ブラウザに動きをつけたり、現在ではサーバーサイドなどでも使われるJavaScriptと同様の用途が可能。

似ている事が多いが、異なる点が静的型システム(static typesystem)
TypeScriptにはコンパイラ(tsc)があり、それによってプログラムに対する型チェックを行える。型関連の誤りはコンパイルエラーとして検出される。

型とは？

Railsのデータベースにmigratinファイルを作成の際の、カラム名に持たせるデータ型と同義なんだと思います。
nameカラムはstring...みたいな。ただ、結構違うっぽいのでその時のデータ型名は一旦忘れます笑

静的型付けのメリット

■ 型安全性

関数や変数に対して型宣言をし、宣言した通りにプログラムを記述するのがTypeScriptの基本。宣言通りでない場合は型エラーが出るのでより堅牢なプログラムが書ける。
コンパイルエラーはTypeScript開発で頼もしい味方...初学者の自分にとっては、エラーはまだ怖いです笑
でも、エラーは病気を事前に教えてくれているみたいに考えたらめちゃくちゃありがたいですね。そう思えるようにこれからも勉強します。。

■ ドキュメント化と入力補完

適切な関数名やコメントと組み合わせることによって、プログラムの読解の際に関数の中身まで読む必要がなくなる。型による補完のデータは絶大で、プログラムのデータの流れが可視化できる。
また、入力の際にも、補完をしてくれるので途中まで打てば予測変換で限定的なものに変換ができる。良いですね。

TypeScriptコンパイラの役割

■ 型チェック

型チェックとはプログラム上の矛盾を自動的に検出して、コーダーに教えてくれる。その判断材料として用いられるのが、型情報。その情報をファイル上に記述することで実際にプログラムを実行しなくても目視的にチェックが行える。

■ コンパイル

TypeScriptからJavaScriptへ２工程かけて変換する。

型を取り除く
新しい構文を古い構文に変換(古いバージョンの、ブラウザやNode.jsに合わせて変換)

TypeScriptの開発環境

■ Node.jsのインストール
https://nodejs.org/ja/ ~pkgファイルを実行する

$ node -v

テキストエディタはVS Codeを使う。

■ TypeScriptインストール

ディレクトリを作成して移動(cd)
まずpackege.jsonを生成

$ npm init --yes

jsonに追記する。

{
  "name": "tsp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module", ←追記
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

TypeScriptインストール

$ npm install --save-dev typescript@4.6.2 @types/node@14.14.10

最新版をインストールする場合は@4.6.2と@14.14.10を記述しなくて良い。

■ tscongig.jsonの準備
TypeScriptコンパイラの設定を記述したファイル

tsconfig.json生成

$ npx tsc --init

何箇所か書き換えます
コメントアウト解除し記述

{
  "compilerOptions": {
  :
  "target": "es2020", 
  :
  "module": "esnext", 
  :
  "moduleResolution": "node",
  :
  "outDir": "./dist",
  : 
  },
 "include": ["./src/**/*.ts"]
}

■ 出力してみよう

それが終わったら、作成済みのディレクトリ内にsrcフォルダを作成し、index.tsファイルを作成する。

index.ts

const message: string = "Hello World";
console.log(message);

$ npx tsc

これで、実際にtsファイルがjsファイルに変換された形でdistフォルダ内に生成される。

最後に

$ node dist/index.js

これでターミナル上に

$ Hello World

と出力されれば成功です。

プログラミングの第一歩....

まとめ

最後の方口数が少なくなりましたが、あとで追記すると思います。明日は基本的な文法をやろうと思います！

TypeScript勉強