TypeScript のメリット – Front と Server の架け橋

TypeScript のメリット - Front と Server の架け橋

webページに対しての要求が高度になり、JavaScript, HTML, CSS
のコード量も増えてきました
それに伴い 開発のしやすさ、保守のしやすさなどから
Single Page Application (以下SPA)や TypeScript に人気が集まっています

用語

SPA

React, Vue, Angular 等の ライブラリ, フレームワーク

TypeScript

AltJSの一種でJavaScriptにトランスパイル可能な言語
型があり安全な開発ができる

Front と Server の架け橋

架け橋とは、APIを示しています
それを、TypeScriptのinterfaceで強化する手法を説明していきます
例として ユーザ情報を取得する流れにしています

全体像

Server側

DBからuser情報取得する処理です
ポイントは返却値のinterfaceを定義する事です
これを、Front側で使用します

// repository/user.ts
export {
  User
}

interface User {
  id: number
  name: string
  age: number
  // etc...
}

function findUser(id: number): Promise<User> {
  // DBから一致するuser情報取得
  return db.find(id)
}

Front側

Server側の処理を、API経由で実行する処理です
ポイントは返却値のinterfaceをimportします

// Server側のファイルをimport
import { User } from "repository/user"

function fetchUser(id: number): Promise<User> {
  return axios.get(`http://api.com/user/${id}`)
}


// メインの処理
const userId = 1
const user = await fetchUser(userId)
// user.id, user.name, user.age など補完が効く
// user.nicknameのような User interface に存在しないものはTypeScriptのエラーになる

Server側のTypeScriptフレームワークやライブラリなど

NestJS

Angular風の書き心地でコードが書けます
デコレータも登場します

NestJS

Marble.js

RxJSををベースとした functional reactive Node.js framework です
TypeScriptの相性もあり 注目しています

Marble.js

まとめ

interfaceを共有することで 型安全な開発ができます
Front側, Server側ともに TypeScriptで開発する場合は
このような設計を検討してみてください