TypeScriptハンズオン 学習メモ 1.TypeScriptを始めよう

TypeScriptを準備しよう

JavaScriptの限界

• 型のタイプが自由すぎる
• 関数も自由すぎる
  • 引数にどんな値も入れられる
• オブジェクトも自由すぎる
  • あとでいくらでも中身を書き換えることができる

TypeScriptとは？

• 静的型付け言語
  • 型が異なるとトランスコンパイル時にエラーが出る
• クラスベースオブジェクト指向
  • 基本クラス。インタフェースもある。
• 上位互換の文法
  • JavaScriptもそのまま使える
  • JavaScriptの進化系

TypeScriptに必要なもの

• Node.js(npm)
• TypeScript本体
  • npmにより必要なツールをダウンロードする
• Webpack
  • 多数のリソース類を一つにまとめる

Node.jsのインストール

• 公式サイトから

開発ツールについて

• Visual Studio Codeを利用する

TypeScriptによるアプリケーション作成

トランスコンパイルについて

• TypeScriptをグローバル環境にインストールする

npm install typescript -g

# バージョン確認
tsc --V

# トランスコンパイルする
tsc sample.ts

# 作成されたjsファイルを実行する
node sample.js

Node.jsプロジェクトで開発する

# プロジェクトを新規作成
mkdir typescript_app
cd typescript_app
# package.jsonの作成
npm init -y
# プロジェクトにTypeScriptを追加する
npm install typescript @types/node --save-dev
# TypeScriptの設定ファイルの追加
tsc --init
# Webpack本体とTS Loaderのインストール
npm install webpack ts-loader @webpack-cli/generators --save-dev
# Webpack-CLIで初期化（TypeScriptを選択、他はそのままEnter、Overwriteする）
npx webpack-cli init

アプリケーションをビルドする

npm run build

• 作成されたdistフォルダ内のファイルをサーバーにアップロードすれば、Webアプリとして公開できる。

開発サーバで実行する

npm run serve

• http://localhost:8080/ を開く
• これらのコマンドは package.json の scriptsに書いてある

package.json（一部）

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production --node-env=production",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "serve": "webpack serve"
  },

Web上のTypeScript情報

Playground

サバイバルTypeScript