■ はじめに

新しくアサインされたプロジェクトで、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

【１】TypeScript

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

１）利点

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

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

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

【２】情報源

１）公式サイト

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

https://www.typescriptlang.org/

２）動画
https://dotinstall.com/lessons/basic_typescript

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

【３】環境構築

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

を参考にした。

１）Node をインストールする
２）コマンドで設定を行う
３）package.json への追記

１）Node をインストールする

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

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

２）コマンドで設定を行う

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

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

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

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

３）package.json への追記

  "scripts": {
    "start": "tsc -p . && node .", <= ★ここを追記★
    "test": "echo \"Error: no test specified\" && exit 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);

２）「npm start」を実行

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

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

【４】TypeScript の実行

hello.ts

console.log('hello world');

コマンド例

# コンパイル（TypeScript => JavaScript）
tsc hello.ts

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

プログラムの超個人的なメモ

Memo for Programming.

【TS】TypeScript ～入門編～

■ はじめに

目次

【１】TypeScript

【２】情報源

【３】環境構築

動作確認

【４】TypeScript の実行

関連記事