【TS】TypeScript ~ 入門編 ~

■ はじめに

新しくアサインされたプロジェクトで、Node.js / Vue.js に加えて
TypeScriptを扱うようなので、勉強してみた。

なお、Node.js / Vue.js については、以下の関連記事を参照のこと。

Node.js ~ 基礎知識 / 環境構築編 ~
https://dk521123.hatenablog.com/entry/2018/06/05/211900
Vue.js ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/04/30/000000

目次

【1】TypeScript 
 1)利点
【2】情報源
 1)公式サイト
 2)動画
 3)サイト
【3】環境構築
【4】TypeScript の実行

【1】TypeScript

* マイクロソフトが開発したオープンソース言語
* ざっくりイメージ的に、型定義できコンパイルするJavaScript
* 拡張子は「***.ts」(TypeScript)

1)利点

* 静的型付けのコンパイルエラーにより、事前にコーディングミスに気付ける
* ES6と完全に互換性があるJSを出力してくれることにより、ブラウザ互換がある

他には、以下のサイトを参照。

https://qiita.com/SoraKumo/items/43fba2ad2d10336a665f

【2】情報源

1)公式サイト

* 「Playground」で、TypeScript⇒JavaScriptに変換してくれ、比較できる

https://www.typescriptlang.org/

2)動画
https://dotinstall.com/lessons/basic_typescript

3)サイト
https://qiita.com/k-penguin-sato/items/72b21d4bfb631665c342
http://www.tohoho-web.com/ex/typescript.html

【3】環境構築

https://qiita.com/koinori/items/ed13ab8bbc6edcc5deb9

を参考にした。

1)Node をインストールする
2)コマンドで設定を行う
3)package.json への追記

1)Node をインストールする

* 以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2018/06/05/211900

2)コマンドで設定を行う

# プロジェクト作成 ( => npm の質問を回答する)
npm init

# TypeScriptをインストールする
npm install typescript -g

# インストール確認
tsc -v

# TypeScript の初期設定 (tsconfig.jsonを生成)
npx tsc --init

3)package.json への追記

  "scripts": {
    "start": "tsc -p . && node .", <= ★ここを追記★
    "test": "echo \"Error: no test specified\" && exit 1"
  },

動作確認

1)TypeScript のファイル「hello.ts」を追加

let user_name: string = 'Mike'
let age: number = 12
let isMale: boolean = true
let note: any = "Any type is OK"

console.log(user_name, age, isMale, note);

2)「npm start」を実行

npm start
~~~~~~~
> hello@1.0.0 start
> tsc -p . && node .

Mike 12 true Any type is OK
~~~~~~~
=> hello.js ができているはず。

【4】TypeScript の実行

hello.ts

console.log('hello world');

コマンド例

# コンパイル(TypeScript => JavaScript)
tsc hello.ts

# 実行
node hello.js
 => 「hello world」が表示

関連記事

TypeScript ~ 基本編 ~
https://dk521123.hatenablog.com/entry/2021/02/15/000000
ループ操作 ~ map etc ~
https://dk521123.hatenablog.com/entry/2021/01/03/000000
配列・リスト操作
https://dk521123.hatenablog.com/entry/2021/02/10/225119
配列・リスト操作 ~ ソート編 ~
https://dk521123.hatenablog.com/entry/2021/02/24/222452
配列・リスト操作 ~ スプレッド構文 / Three-dots ~
https://dk521123.hatenablog.com/entry/2021/03/09/000000
Enum / Union / const assertion
https://dk521123.hatenablog.com/entry/2021/03/17/005906
非同期処理 ~ async/await, Promise ~
https://dk521123.hatenablog.com/entry/2021/01/16/202822
タイマー処理 ~ setTimeout / setInterval etc ~
https://dk521123.hatenablog.com/entry/2021/02/01/000000
処理時間計測 ~ performance.now() ~
https://dk521123.hatenablog.com/entry/2021/02/05/000000
axios ~ 外部API通信ライブラリ ~
https://dk521123.hatenablog.com/entry/2021/01/14/101645
Lodash ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2021/01/23/000000
Lodash ~ 基本編 ~
https://dk521123.hatenablog.com/entry/2021/02/26/170608
Node.js ~ 基礎知識 / 環境構築編 ~
https://dk521123.hatenablog.com/entry/2018/06/05/211900
Vue.js ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vue.js ~ 基本編 ~
https://dk521123.hatenablog.com/entry/2020/12/19/000000