ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子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 と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?