ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
概要
TypeScript(タイプスクリプト、TS) は、Microsoft が 2012 年 10 月に公開したプログラミング言語で、JavaScript に 静的型システム を追加した「上位互換言語(superset)」です。設計者は C#、Delphi、Turbo Pascal の生みの親としても知られる Anders Hejlsberg(アンダース・ヘルスバーグ) で、Microsoft でのリーダーシップのもと開発が進められています。プロジェクトは Apache License 2.0 で GitHub に公開され、最も Star の多い言語実装の 1 つです。
TS の最大の特徴は 「JavaScript の構文をそのまま受け入れる」 ことです。.js ファイルの拡張子を .ts に変えるだけで TypeScript として扱え、徐々に型を追加していく 段階的型付け(gradual typing) が可能です。型情報は実行時には存在せず、tsc(TypeScript Compiler)が型チェック後に 型を消去した純粋な JavaScript を出力します。これを type erasure と呼びます。
型推論は非常に強力で、const x = [1, 2, 3]; と書けば number[] が自動で推論されます。さらに ジェネリクス(Array<string>)、ユニオン型(string | number)、インターセクション型(A & B)、条件型(T extends U ? X : Y)、マップ型、テンプレートリテラル型 などの高度な型機能を備え、ライブラリ作者は驚くほど精密な API を表現できます。型システムだけで簡易な計算(SQL パーサや JSON 検証)まで書ける表現力があります。
ファイル種類とビルド成果物
| 拡張子 | 役割 | 備考 |
|---|---|---|
.ts | TypeScript ソース | JSX を含まない通常のロジック |
.tsx | JSX を含む TypeScript | React コンポーネントなど |
.d.ts | 型定義ファイル(宣言ファイル) | JS ライブラリに型を後付けするためのスタブ。DefinitelyTyped / @types/* |
.mts / .cts | ESM / CJS 強制版 | それぞれ .mjs/.cjs へコンパイル |
tsconfig.json | プロジェクト設定 | target, module, strict, paths 等を定義 |
.js + .d.ts | tsc の出力 | 型情報を別ファイルに分離して配布 |
「Hello, World」
// hello.ts — 型注釈付き
function greet(name: string): string {
return `Hello, ${name}!`;
}
// ジェネリクス例
function first<T>(arr: Array<T>): T | undefined {
return arr[0];
}
const users: Array<{ id: number; name: string }> = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
];
console.log(greet("World"));
console.log(first<string>(["a", "b"]));
コンパイル: tsc hello.ts → hello.js が生成され、node hello.js で実行できます。ts-node / tsx / Bun を使えば直接実行も可能です。
パッケージ管理・ビルドツール
- npm / yarn / pnpm:基本は JavaScript と同じ。
npm i -D typescriptでローカルインストール - tsc:公式コンパイラ。型チェック+トランスパイル両方
- ts-node / tsx:
.tsを直接実行する開発用ランナー - esbuild / swc:型チェックを行わず高速トランスパイルだけ。バンドラと組み合わせる
- tsconfig パス解決:
baseUrl+pathsでモノレポのエイリアスを定義 - Project References:大規模リポジトリで
tsc --buildによる増分ビルド - 型定義の取得:
npm i -D @types/node @types/react
関連言語との比較
| 項目 | TypeScript | JavaScript | Flow(Meta) | JSDoc 型注釈 |
|---|---|---|---|---|
| 静的型 | 強力 | なし | あり(衰退) | 限定的 |
| コンパイル | 必要 | 不要 | 必要 | 不要 |
| ジェネリクス | 充実 | なし | あり | 限定 |
| エディタ支援 | 最高(VS Code 由来) | 普通 | 普通 | VS Code 経由で良好 |
| 採用状況 | 事実上の標準 | 圧倒的 | 縮小傾向 | 軽量プロジェクト向け |
注意点・落とし穴
anyの罠:anyを使うと型チェックを完全に無効化する。unknown+ 型ガード(typeof、instanceof)で安全に扱う- 型情報は実行時に存在しない:
typeof x === "MyInterface"はできない。実行時バリデーションには zod や valibot を併用 - 構造的型付け(structural typing):名前ではなく形(プロパティ集合)で型を判定する。C# / Java のような名前ベースとは違う
- Type-Only Imports:
import type { Foo } from "./foo";を使うと、トランスパイル後の JS から完全に消える - 列挙型(enum)の地雷:数値 enum はランタイムに残り、双方向マッピングなど混乱を招く。
as constオブジェクト + ユニオン型のほうが推奨 - strict モード:
tsconfig.jsonの"strict": trueは新規プロジェクトでは必須。途中から有効化すると大量のエラーが出る - tsc の出力 と バンドラの設定不整合:
targetとmoduleがランタイムと合っていないと実行時に謎のエラー
関連リンク
- 母言語:JavaScript(.js / .mjs / .cjs)
- 親カテゴリ:プログラミング・スクリプト
- 概論:ファイル拡張子とは
- 外部:typescriptlang.org / tsconfig リファレンス
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript で base URL を取得する方法|window.location.origin
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 7 Spring Frameworkのアノテーション一覧
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- 【django】ログイン 認証機能 2026-09-08 03:22:09
- MySQL ERROR 1063 Incorrect column specifier for column|原因と直し方 2026-09-08 03:11:09
- 【PHPエラー】Object of class stdClass could not be converted to string 2026-09-07 07:46:04
- Julia Genie ローカル開発サーバ起動完全ガイド 2026-09-07 07:46:04
- Wi-Fi とは|規格と世代(Wi-Fi 4〜7)・周波数帯・CSMA/CA・WPA3 NEW 2026-09-07 07:45:13
- set コマンドでシェルオプションと位置パラメータを操作 | bash 2026-09-07 07:45:13
- JPEG(.jpg/.jpeg)画像形式の完全ガイド — 仕様・マジックナンバー・他形式との比較・EXIF 2026-09-07 07:45:13
- UE5 Get Overlapping Actorsで特定クラスだけ処理|Class Filter・Cast To 2026-09-07 07:45:13
- Linuxで特定拡張子のファイルを再帰削除|find -deleteの安全手順 2026-09-07 07:45:13
- Django CBVでテンプレートに値を渡す|get_context_data・extra_context 2026-09-07 07:45:13
- Linuxで複数ファイルの文字列を一括置換|find・sed・xargsの安全手順 2026-09-07 07:45:13
- Laravelルートグループ|prefix・middleware・nameで一括管理 2026-09-07 07:45:13
- Linux whichコマンドの使い方|絶対パス取得とtype・command -vの違い 2026-09-07 07:45:13
- Linux catコマンドの使い方|行番号表示・複数ファイル連結 2026-09-07 07:45:13
- unable to execute 'gcc': No such file or directory 2026-09-07 07:45:13
コメントを削除してもよろしいでしょうか?