Typescriptを知って環境構築
Typescriptは、Javascriptに型を付けることで、型付けを行う開発を可能にした言語です。Javascriptを拡張したものであるため完全な上位互換であり、動的型付けの柔軟さと静的型付けの厳密さを同時に享受できます。
Typescriptとは
Typescriptは、Javascriptを拡張し、型とオブジェクト指向を追加した言語です。開発中のlintや入力補完、型の違いによる問題の検知などを行えるため、安全なコードをスムーズに書くことができます。
他にもinterfaceを用いたクラス設計など、オブジェクト指向にも最適化されています。
また、TypescriptはJavascriptの拡張であるため、Javascriptと全く同じコードを書くことができます。そのため、Typescriptをメインに開発していたとしても、Javascriptでしか書かれていないライブラリを活用できます。
メリット
Typescriptを用いるメリットはいくつもあります。
型付けができる
上でも紹介したとおり、TypescriptではCやJavaのように、型を付けることができます。
型チェックは開発時やビルド時のみであり、実行時の型チェックは行われないため、厳密にはCやJavaのような静的型付けとは言えません。
また、型を付けることで、入力補完が効くようになります。
画像は組み込み型ですが、自作のクラスやinterface、外部のライブラリなどでも (対応している場合) 補完が効きます。
JavascriptもJSDocと合わせれば不可能ではないですが、面倒です。また、コメントとして書くため、改修時に型を書き換え忘れるなどの危険性もあります。
オブジェクト指向が強化されている
普通のJavascriptでクラスの定義はできますが、interfaceの作成は不可能で、privateなメンバの作成には苦労します。
Typescriptでは複数のinterfaceから継承ができ、privateなメンバも簡単に作成できます。
interface Swimmable {
swim(): boolean;
}
interface Walkable {
walk(): boolean;
}
class Human implements Swimmable, Walkable {
swim() {
// ...
return true;
}
// もちろん、interfaceの実装を忘れるとエラーが出るため、気がつくことができる
walk() {
// ...
return true;
}
}
環境構築
Typescriptのままでは動かすことができません。Javascriptにコンパイルする必要があります。
最小限の構築
もしTypescriptの学習などでちょっと動かしたい、というだけの場合はtypescriptパッケージを導入するだけです。
npm i -D typescript
導入したら、適当にtypescriptのコードを書いてコンパイルします。
# app.tsはコンパイルしたいファイル名 npx tsc app.ts
npxは、パッケージをグローバルインストールしなかった場合に、パッケージのコマンドを動作させるのに必要です。
グローバルインストールした場合は、単にtsc app.tsでコンパイルできます。
./app.tsではエラーでコンパイルできない場合があります。app.tsとする必要があります。
実行して、app.jsのようなJavascriptのファイルができていれば成功です。適当にapp.jsを実行し、うまく動作しているか確認して完了です。
webpackで構築
もしアプリケーションの開発を行うために導入する場合は、モジュールバンドラーなどで使えるようにする必要があります。
ここではwebpackを用いた方法を紹介します。
まずはwebpackとloaderを導入しましょう。
npm install -D typescript ts-loader webpack webpack-cli
導入したら、package.jsonのコマンド設定とwebpackに加え、tsconfig.jsonの設定を書きます。
{
// ...
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch": "webpack --mode development --watch --color --progress",
},
// ...
}
const mode = process.env.NODE_ENV !== "development" ? "production" : "development";
const src = "/src/";
const dst = "/dist/assets/";
module.exports = {
mode,
entry: {
main: src + "app.ts"
},
output: {
filename: "[name].js",
path: __dirname + dst,
},
resolve: {
alias: {
// エイリアス名。プロジェクトの根本からの相対パスで指定できるように書いておくべきです
"@": __dirname + src,
},
extensions: [
".ts", ".js",
],
},
module: {
rules: [
{
test: /\.ts?$/,
use: "ts-loader"
},
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
},
]
},
target: ["web", "es5"],
devtool: "eval-source-map",
}
webpackについては、下のページにまとめています。
{
"compilerOptions": {
"sourceMap": true,
// TSはECMAScript 5に変換
"target": "ES5",
// TSのモジュールはES Modulesとして出力
"module": "ES2015",
"moduleResolution": "node",
"lib": [
"ES2020",
"DOM"
],
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
// webpack.config.jsonのaliasと合わせる
"paths": {
"@/*": ["src/*"],
}
},
"include": ["src/**/*"],
"exclude": []
}
app ├ src │ └ app.ts ├ package.json ├ tsconfig.json └ webpack.config.json
tsconfig.jsonにはコメントを書くことができます。 (jsonc形式)
あとは、typescriptのコードを./src/app.tsに入れたら、npm run devでビルドします。
./dist/app.jsが生成され、それの実行結果が正しければ成功です。
まとめ
Typescriptの特徴は、interfaceの存在と型の指定です。Javascriptでは不完全だったクラスベースオブジェクト指向での開発や、型チェックを用いたスムーズな開発が可能になります。
まずはTypescript特有の型の指定方法などに慣れていきましょう。
