はじめに
普段サーバーサイドはJacaScript×Expressで書いている私ですが、
ロジックが複雑になってくると、さすがに型なしでは辛いなーと感じてきました。
また、補完などの面からもTypeScriptを導入してみたいとは常々思っていました。
ただ、Expressを使ったアプリを全部TSに移行するとなると、
express-tsとか諸々を入れることになって、
正直めんどくさいし、トラブりそうだなーと思ってました。
そこで、複雑な場所だけをModuleとして切り出して、
そこだけをTSで書いて、それ以外の部分はJSで書いていけば、
気軽にTSを導入しつつ、トラブルも減らせそうだなーと考えました。
それで、部分的にTSを導入する方法を調べたら
意外と簡単に出来そうな雰囲気だったので、
実際にTSを使ってHelloWorldをしてみました！
まずはいつも通りJSで作成
最初にターミナルで諸々を作成
# プロジェクトフォルダを作成
$ mkdir express-ts
$ cd express-ts
# プロジェクトの作成
$ yarn init
> （いろいろ入力）
# Expressをローカルインストール
$ yarn add express
# 必要なファイルを作成
$ touch app.js
$ touch utils/utils-js.js
次にapp.jsにHelloWorldを記述
const express = require('express')
const app = express()
const port = 8000
// 自作モジュールの読み込み
const utilsJs = require('./utils-js')
app.get('/', (req, res) => {
res.send(utilsJs.joinText('HelloWorld!', 'From Module!'))
})
app.listen(port, () => {
console.log("App listening at http://localhost:" + port)
})
あと、使用するモジュールも記述
// 文字を足し算する関数
const joinText = (text1, text2) => text1 + " " + text2
// 関数をモジュールとして出力
module.exports = { joinText }
最後に、起動用のコマンドをpackage.jsonに追記して
{
"scripts": {
"start": "node app.js"
}
}
これでyarn startでアプリを起動し、
localhost:8000にアクセスすると、HelloWorld FromModule! と問題なく表示されました。
TSを導入
いよいよTSを導入してみます。
どうもtypescriptとts-nodeを入れればいいみたいです。
# 必要なものをインストール
$ yarn add -D typescript ts-node
# TSの設定ファイルを作成
$ touch tsconfig.json
# TSでのモジュールを記述するファイルを作成
$ touch utils-ts.ts
そして、いい感じにTSの設定を記述
{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
// jsファイルもコンパイルが通るように設定
"allowJs": true,
// ストリックモードは有効に
"strict": true,
// 入出力先を設定
"rootDir": ".",
"outDir": "./dist",
// デフォルトで書かれているもの
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"app.js"
],
}
次に、さっそくTSでモジュールを記述
// 文字を足し算する関数
const joinText = (text1: string, text2: string): string => {
return text1 + " " + text2
}
// 関数をモジュールとして出力
export { joinText }
そして、TSでのモジュールを組み込むためapp.jsを追加・修正
// 自作モジュールの読み込み
const utilsJs = require('./utilsJs')
const utilsTs = require('./utilsTs') //ここ追記
app.get('/', (req, res) => {
res.send(utilsTs.joinText('HelloWorld!', 'From Module!')) //ここ修正
})
最後にpackage.jsonにある起動用コマンドを修正して
{
"scripts": {
"start": "ts-node app.js",
"build": "tsc"
}
}
これでyarn startしてみると、内部でTSをコンパイルしつつアプリを起動できました。
いつも使用しているnode app.jsと同じように使えていい感じ！
またyarn buildすると、/dist にJSにコンパイルされたファイルが出力できる模様。
実際に稼働させるときは、このファイルをデプロイすればいいみたい。
おわりに
TypeScriptって敷居が高いイメージだったけど、思ってたより簡単に導入できました。
（特にトラブルもなく、逆にあっけなかった気もします・・ｗ
アプリを全部TSにするのは大変でも、部分的なモジュールから導入して、
TSの恩恵（安全性や補完など）を受けれるのはとてもいい感じ。
しかし、安全性という意味では全部TSのアプリにはとてもかなわないというのも事実。
やっぱり、全部TSでアプリを作るってよりは敷居は圧倒的に低いので、
全部TSではなく、メインはJSで部分的にTSってのも選択肢に入る印象！