Zenn
🐙

【初学者向け】TypeScript 入門

2024/11/18に公開
tech

はじめに

ここでは，TypeScript の公式ドキュメントに基づいて，理解する上で全くの初学者である筆者が学んだ内容を記録しておくものです[1]．
同じように学ぶ方がいた場合に助けになれば幸いです．

TypeScript Playground

手を動かしながら学ぶのに，TypeScript Playgroundはとても有用です．ブラウザ上で簡単にTypeScriptやJavaScriptのコードを試すことができます．

What is TypeScript?

TypeScriptの特徴を知るのに，以下の公式ドキュメントが参考になります：
TypeScript for the New Programmer
TypeScript Tooling in 5 minutes

これに基づいて進めていきます．

JavaScript (JS) は，webブラウザ上のフロントエンド開発[2]のための言語として発展してきた[3]．

しかし，JS では，型宣言のミスやエラー，変数のスペルミスなどがあっても，その部分に至るまで処理が行われるために，意図しない挙動をしたり，エラーが隠蔽されてしまっていたりする．そこで，TypeScript が開発された．実行前に変数の型宣言やスペルミスなどの問題をチェックできる機能を持つ（静的型付け, static typing）．より大規模な開発になるほど，その機能を強力に発揮する[4]．

TypeScriptは，JS のスーパーセット(superset)[5]なので，JSコードをそのまま移植することが可能である[6]．

Type annotations

TypeScript を利用するメリットとして．TypeScriptでは型の注釈（Type annotations）がある．

以下の例を示しておく．

function greeter(person: string) {
  return "Hello, " + person;
}

person: string のように引数に対して，型の注釈をつけることが可能だ．
これにより，以下の意図しないコードに対してエラーを知らせてくれる：

let user = [0,1,2];

document.body.textContent = greeter(user);

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

この型の注釈は，実装する上での型の混乱を防ぐことにもつながるでしょう．
大規模なプログラムになる程，これがいかに有用か実感することになりそうです．

脚注

  1. サバイバルTypeScriptもかなり参考になるので，ここに記しておきたい． ↩︎

  2. ユーザー，クライアントが操作するユーザーインターフェースに携わる部分の開発のこと． ↩︎

  3. Node.js の登場によって，サーバーサイドのバックエンド開発にも広く利用されることにも注意しておく． ↩︎

  4. JavaScriptは動的型付け言語である．実行時に変数の型が推論されて決まる言語である． ↩︎

  5. 既存言語(JS)のフレームワークやテンプレートエンジンを拡張して作られた，元の言語JSとの互換性を保ちつつ，上位互換であるという意味． ↩︎

  6. TypeScript特有の型定義や機能を追加しなければ完全な恩恵が得られないことがある点にも注意． ↩︎

Discussion