0Pricing
TypeScript Academy · レッスン

TypeScript が JavaScript に加えるもの

TypeScript が静的型によって JavaScript を拡張する仕組みを学びます。

「TypeScript が JavaScript に加えるもの」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

ようこそ

TypeScriptは静的な型注釈を追加したJavaScriptのスーパーセットです。このレッスンでは、TypeScriptが通常のJavaScriptに何を加えるのかを詳しく学びます。

TypeScriptはスーパーセット

有効なJavaScriptファイルはすべて有効なTypeScriptファイルです。.jsファイルの拡張子を.tsに変更すれば、コンパイルできます。TypeScriptは機能を上乗せするだけで、JavaScriptの構文を削除することはありません。

型注釈

最も分かりやすい追加機能は型注釈です。変数、パラメーター、戻り値の型を、コロンの後に宣言します。
let name: string = 'Alice';
let age: number = 30;
let active: boolean = true;

コンパイル時の型チェック

TypeScriptはコードが実行される前に型をチェックします。間違った型を代入すると、コンパイラーが実行時クラッシュではなくエラーを報告します。
let count: number = 5;
count = 'hello'; // Error: Type 'string' is not assignable to type 'number'

インターフェースと型エイリアス

TypeScriptには、オブジェクトの形状を記述するインターフェースと型エイリアスがあります。これらはコンパイル時にのみ存在し、JavaScriptの出力は生成しません。
interface User {
  name: string;
  age: number;
}

const alice: User = { name: 'Alice', age: 30 };

列挙型

Enumsを使うと、名前付き定数の集合を定義できます。インターフェースとは異なり、EnumsはJavaScriptコードを出力します。
enum Direction { Up, Down, Left, Right }
const move: Direction = Direction.Up;

ジェネリック

Genericsを使うと、型安全性を保ちながら、どのような型でも扱えるコードを作成できます。再利用可能なユーティリティを実現する、TypeScriptの主要機能です。
function identity<T>(value: T): T {
  return value;
}
const n = identity<number>(42);

クラスのアクセス修飾子

TypeScriptでは、クラスにpublic、private、protectedを追加できます。JavaScriptにはprivate用の#構文がありますが、TypeScriptの修飾子はコンパイル時にチェックされます。
class BankAccount {
  private balance: number = 0;
  deposit(amount: number) { this.balance += amount; }
}

null非許容型

strictNullChecksを有効にすると、nullとundefinedはすべての型に自動的に代入できなくなります。これらを許可するには、ユニオン型を使って明示的に指定する必要があります。
let name: string = null; // Error with strictNullChecks
let maybeName: string | null = null; // OK

TypeScriptは実行時に型を消去する

TypeScriptの型注釈はすべてコンパイル時に削除されます。出力されるのは通常のJavaScriptであり、実行時に型情報は存在しません。

IDEツールの向上

型情報があると、IDEは正確な自動補完、インラインドキュメント、安全な名前変更、プロジェクト全体のすべての参照の検索を提供できます。

確認問題

コードをコンパイルすると、TypeScriptの型注釈はどうなりますか？

まとめ

TypeScriptは、型注釈、インターフェース、Enums、Generics、アクセス修飾子によってJavaScriptを拡張します。すべての型情報はコンパイル時に消去されます。その結果、より安全で開発ツールと親和性の高いJavaScriptが生成されます。

よくある質問

「TypeScript が JavaScript に加えるもの」レッスンは無料ですか？

はい。「TypeScript が JavaScript に加えるもの」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「TypeScript が JavaScript に加えるもの」で何を学びますか？

TypeScript が静的型によって JavaScript を拡張する仕組みを学びます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「TypeScript が JavaScript に加えるもの」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. JavaScript の難所: 実行時バグ
  2. TypeScript が JavaScript に加えるもの
  3. TypeScript の JavaScript へのコンパイル
  4. プロジェクトで TypeScript を使うタイミング
← TypeScript Academyに戻る