この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
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風の書き心地でコードが書けます
デコレータも登場します
Marble.js
RxJSををベースとした functional reactive Node.js framework
です
TypeScriptの相性もあり 注目しています
まとめ
interface
を共有することで 型安全な開発ができます
Front側, Server側ともに TypeScriptで開発する場合は
このような設計を検討してみてください