hiroblue’s LIFE LOG

 // コンパイル時に型エラーを検出
interface User {
id: number;
name: string;
email: string;
}

function getUser(id: number): User {
// 戻り値の型が保証される
return users.find(user => user.id === id);
}
 

 # 追加のビルドステップが必要
tsc --project tsconfig.json
 

 {
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
// ... 数十の設定項目
}
}
 

 // 有効なJavaScriptは全て有効なTypeScript
const message = "Hello, World!";
console.log(message);
 

 // 1. JSDocで始める
/** @type {number} */
let count = 0;

// 2. 部分的に型注釈を追加
function add(a: number, b: number): number {
return a + b;
}

// 3. 完全なTypeScriptへ移行
 

 // TypeScriptは常に最新のJavaScript機能を追従
// オプショナルチェイニング (?.)
const name = user?.profile?.name;

// ヌル合体演算子 (??)
const value = input ?? defaultValue;
 

 小規模・短期プロジェクト → Pure JavaScript
中規模・チーム開発     → TypeScriptの段階的導入
大規模・長期プロジェクト → フルTypeScript採用
 

TypeScriptは 静的型付けを持つプログラミング言語です。

 // これはTypeScriptというプログラミング言語のコード
interface Person {
name: string;
age: number;
}

const greet = (person: Person): string => {
return `Hello, ${person.name}!`;
};
 

 TypeScript ⊃ JavaScript
（TypeScriptはJavaScriptのスーパーセット）
 

全ての有効なJavaScriptコードは、有効なTypeScriptコードです

 // これは有効なJavaScript、同時に有効なTypeScript
const x = 10;
console.log(x);
 

 # コンパイラ
tsc

# 言語サーバー
typescript-language-server

# 開発ツール
ESLint + TypeScript
Prettier + TypeScript
 

 // DefinitelyTyped - コミュニティ維持の型定義リポジトリ
import * as React from 'react'; // @types/react
import * as Express from 'express'; // @types/express
 

 {
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
 

 // 型注釈
let count: number = 5;

// 型推論
const message = "hello"; // string型と推論

// ジェネリクス
function identity<T>(arg: T): T {
return arg;
}
 

 // TypeScript (入力)
function add(a: number, b: number): number {
return a + b;
}

// JavaScript (出力)
function add(a, b) {
return a + b;
}
 

 コード編集 → 型チェック → コンパイル → 実行
↑            ↑           ↑         ↑
VS Code    TypeScript    tsc/babel   Node.js
|            |           |         |
└───────── 開発者体験の統合プラットフォーム ─────┘
 

 // 様々なツールと連携
- エディタ (VS Code, WebStorm)
- バンドラー (Webpack, Vite, Rollup)
- テスト (Jest, Vitest)
- Linter (ESLint)
- Formatter (Prettier)
 

 // JavaScriptの機能はそのまま使える
const array = [1, 2, 3];
const doubled = array.map(x => x * 2);

// TypeScriptの機能を追加できる
const numbers: number[] = [1, 2, 3];
const first: number = numbers[0];
 

 // 開発時（TypeScript）
const user: { name: string } = { name: "John" };
user.age = 30; // エラー: プロパティ 'age' は存在しない

// 実行時（JavaScript）→ 型情報は消える
const user = { name: "John" };
user.age = 30; // 実行可能
 

 TypeScript = プログラミング言語 + 開発プラットフォーム
↑               ↑
文法と型システム   ツールとエコシステム
 

TypeScriptは「JavaScriptに型を追加した言語」という枠組みを超え、現代的なJavaScript開発の基盤となる総合的なプラットフォームに進化しています。

 TypeScriptコード (.ts)
→ コンパイル (tsc/babel)
→ JavaScriptコード (.js)
→ 実行 (ブラウザ/Node.js)
 

 # TypeScriptファイルをコンパイル
tsc app.ts

# 結果: app.js が生成される
 

 // 入力: app.ts (TypeScript)
interface User {
name: string;
age: number;
}

function greet(user: User): string {
return `Hello, ${user.name}!`;
}

const john: User = { name: "John", age: 30 };
console.log(greet(john));
 

 // 出力: app.js (JavaScript)
function greet(user) {
return "Hello, " + user.name + "!";
}
var john = { name: "John", age: 30 };
console.log(greet(john));
 

 // TypeScript (コンパイル前)
const age: number = 25;
const name: string = "Alice";
 

 // JavaScript (コンパイル後) - 型情報は完全に消える
const age = 25;
const name = "Alice";
 

 # BabelでTypeScriptをJavaScriptに変換
babel src --out-dir dist --extensions ".ts,.tsx"
 

 // .babelrc
{
"presets": [
"@babel/preset-typescript",
["@babel/preset-env", { "targets": "> 0.25%" }]
]
}
 

 // コンパイル時に検出されるエラー
let count: number = "hello"; // エラー: 型 'string' を型 'number' に割り当てられない
 

 // TypeScript固有の構文を標準JavaScriptに変換
// 例: インターフェース、型エイリアス、enumなど
 

 // tsconfig.json
{
"compilerOptions": {
"target": "ES2015", // 出力するJavaScriptのバージョン
"module": "commonjs" // モジュールシステム
}
}
 

 // 入力: advanced.ts
class Person {
constructor(public name: string, private age: number) {}

greet() {
return `I'm ${this.name}, ${this.age} years old.`;
}
}

const alice = new Person("Alice", 25);
 

 // 出力: advanced.js (target: ES5)
"use strict";
var Person = /** @class */ (function () {
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function () {
return "I'm " + this.name + ", " + this.age + " years old.";
};
return Person;
}());
var alice = new Person("Alice", 25);
 

 開発時: TypeScript (型安全、開発者体験向上)
↓ コンパイル
実行時: JavaScript (高速、普遍的な互換性)
 

 {
"compilerOptions": {
"target": "ES2020",           // 出力JavaScriptのバージョン
"module": "ESNext",           // モジュールシステム
"outDir": "./dist",           // 出力ディレクトリ
"strict": true,               // 厳格な型チェック
"removeComments": true,       // コメントを削除
"sourceMap": true            // デバッグ用ソースマップ生成
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
 

はい、TypeScriptをネイティブ実行できるランタイムは複数あります。主要な選択肢として、 Node.js（最新版）、 Deno、 Bunの3つがあり、それぞれ異なるアプローチでTypeScriptをサポートしています。

以下の表に、各ランタイムのTypeScriptサポートの特徴をまとめます。

これらのランタイムが行っている「TypeScriptのネイティブ実行」の技術的な意味を理解することが重要です。

TypeScriptを学び始めたり、ちょとしたコードをさっと試したい場合は、ブラウザ上で動作する TypeScript Playground も非常に便利です。

ご自身のプロジェクトの要件（パフォーマンス、エコシステム、チームの習熟度など）に合わせて、最適なランタイムを選んでみてください。

​
プロを目指す人のためのTypeScript入門　安全なコードの書き方から高度な型の使い方まで [ 鈴木 僚太 ] ​​


初めてのTypeScript 型安全なJavaScriptでWeb開発を加速する [ Josh Goldberg ] ​​


ゼロからわかる　TypeScript入門 [ WINGSプロジェクト　齊藤新三 ] ​​


TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 [ 手島 拓也 ] ​​


プログラミングTypeScript スケールするJavaScriptアプリケーション開発 [ Boris Cherny ] ​​


手を動かしながら学ぶ TypeScript [ 渡邊比呂樹 ] ​​


TypeScriptハンズオン [ 掌田津耶乃 ] ​​


実践TypeScript BFFとNext.js&Nuxt.jsの型定義 [ 吉井 健文 ] ​​


JavaScriptプログラマーのためのTypeScript厳選ガイド ～JavaScriptプロジェクトを型安全で堅牢にする書き方を理解する [ 藤 吾郎 ] ​​


TECHNICAL MASTER はじめてのTypeScript エンジニア入門編 [ 西山雄大 ] ​​


TypeScript実践マスター [ 古賀 慎一 ] ​​


型システムのしくみ TypeScriptで実装しながら学ぶ型とプログラミング言語 [ 遠藤侑介 ] ​​


現場で使えるTypeScript 詳解実践ガイド [ 菅原浩之 ] ​​


TypeScript実践プログラミング JavaScriptを使いやすくスケーラブルな言語 （Programmer’s　selection） [ スティーブ・フェントン ] ​​


Effective TypeScript（第2版） 型システムの力を最大限に引き出す83項目 [ Dan Vanderkam ] ​​


OD＞TypeScriptで作るシングルページアプリケーション （E-Book／Print　Book　技術書典SERIES） [ 鈴木潤 ] ​​


図解！　TypeScriptのツボとコツがゼッタイにわかる本　 “超”入門編 [ 中田亨 ] ​​


かんたん　TypeScript [ HIRO ] ​​


図解！　TypeScriptのツボとコツがゼッタイにわかる本　プログラミング実践編 [ 中田亨 ] ​​


はじめてのTypeScript　2 （I／O　books） [ 清水美樹 ] ​​


JavaScript/TypeScript実力強化書ーー関数・非同期処理・型システム完全攻略 [ うひょ（鈴木 僚太） ] ​