DEV Community

nabbisen
nabbisen

Posted on • Originally published at scqr.net

1 1 1 2

TypeScript で型安全

型安全な開発

JavaScript (JS) は非常に柔軟な言語ですが、その柔軟性ゆえに、特に大規模なアプリ開発では予期せぬエラーやバグ発生のリスクが高くなります。そこで登場するのが、TypeScript (TS、タイプスクリプト) です。

TypeScriptは JavaScript に「型」の概念を加えたスーパーセットです。

TypeScript 導入のメリット

TypeScript を使うと、記述したコードの型が正しいかどうかを、アプリ実行前にチェックしてくれます。これにより、以下のようなメリットがあります。

メリット 説明
開発効率の向上 型定義により実装者の意図が明確になる。コード補完が強化される。
バグの早期発見 アプリ実行前に、型の不一致としてエラーを検出でき、修正コストを削減できる。
コードの可読性・メンテナンス性 型情報により、コードの意図が明確になり、共同開発や長期運用の助けになる。

詳細

  • 開発効率の向上:
    • コードを書いている最中に、変数や関数の型が明確になるため、どのようなデータを受け取るか、何を返すかを迷うことが少なくなります。
    • エディターの自動補完が強化され、タイプミスや関数名の間違いなどが減ります。
  • バグの早期発見:
    • コンパイル時に型の不一致などのエラーを検出できます。開発の早い段階でバグを見つけることができ、実行時エラーで検出する場合と比べて、修正コストを削減できます。
  • コードの可読性とメンテナンス性の向上:
    • コードに型が明記されているため、他の開発者 (または未来の自分) がコードを読む際に、データ構造や関数の意図を理解しやすくなります。
    • 大規模なプロジェクトや複数人でのチーム開発において、コードの品質を保ちやすくなります。

JS と TS: コード例による比較

JavaScript の場合

// JavaScript

function greet(name) {
  // name が文字列であることを期待している

  // しかし **数値やオブジェクトが渡されてもエラーにならない**
  // その結果、予期せぬ挙動になる可能性がある

  return 'Hello, ' + name
}

console.log(greet('Alice')) // "Hello, Alice"

console.log(greet(123))     // "Hello, 123" (もっと複雑なコードでは意図しない結果になる可能性)
Enter fullscreen mode Exit fullscreen mode

TypeScript の場合

// TypeScript

// name は必ず文字列、戻り値も文字列であることを明示
function greet(name: string): string {
  return 'Hello, ' + name
}

console.log(greet('Alice')) // "Hello, Alice"

// console.log(greet(123))  // エラーまたは警告: Argument of type 'number' is not assignable to parameter of type 'string'.
// 意図と異なる型のデータを渡そうとするとエラーや警告が出るため、
// 関数作成者と使用者それぞれで安全なコード記述ができる
Enter fullscreen mode Exit fullscreen mode

このように、 TypeScript を導入することで、より安全で堅牢なコードを書くことができるようになります。

Google AI Education track image

Work through these 3 parts to earn the exclusive Google AI Studio Builder badge!

This track will guide you through Google AI Studio's new "Build apps with Gemini" feature, where you can turn a simple text prompt into a fully functional, deployed web application in minutes.

Read more →

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Explore this practical breakdown on DEV’s open platform, where developers from every background come together to push boundaries. No matter your experience, your viewpoint enriches the conversation.

Dropping a simple “thank you” or question in the comments goes a long way in supporting authors—your feedback helps ideas evolve.

At DEV, shared discovery drives progress and builds lasting bonds. If this post resonated, a quick nod of appreciation can make all the difference.

Okay