TypeScript：TypeScriptとは・実行環境

出力 == 1000

const price: number = 1000; と書く。変数名のあとにコロンと型。

const price: number = 1000;
console.log(price);

これがTypeScriptの基本形。: number の部分が型注釈で、JavaScriptには無い記法。

解答 == B

TypeScriptの最大の利点は何か。

B

実行する前にエディタが赤線で教えてくれる。JavaScriptなら実行して初めておかしいと気づくが、TypeScriptは書いた瞬間に分かる。

出力 == ノートPC true

string と boolean を使う。console.log(name, inStock) で並べて出力できる。

const productName: string = "ノートPC";
const inStock: boolean = true;

console.log(productName, inStock);

基本の3つの型は number・string・boolean。JavaScriptのデータ型（JS02）に、そのまま名前を付けたもの。

const stock: ____ = 42;

console.log(stock);

出力 == 42

数値を表す型の名前。小文字で6文字。

number

型名はすべて小文字。Number（大文字始まり）とは別物なので注意する。

解答 == B

TypeScriptの略。

B

.tsx はReactのJSXを含む場合に使う。通常のTypeScriptは .ts。
⚠ 変数名の注意：ブラウザ向けの設定では name や status がブラウザ標準の変数と衝突し、Cannot redeclare block-scoped variable というエラーになることがある。productName のように具体的な名前を付けると安全。

出力 == 小計：384,000円

3桁区切りは toLocaleString()。テンプレートリテラル（JS02）が使える。

const price: number = 128000;
const qty: number = 3;
const subtotal: number = price * qty;

console.log(`小計：${subtotal.toLocaleString()}円`);

JavaScriptの書き方はそのまま使える。テンプレートリテラルもtoLocaleStringも同じ。違うのは型注釈が付いていることだけ。

const isMember: ____ = true;

console.log(isMember ? "会員" : "非会員");

出力 == 会員

true / false を表す型。小文字で7文字。

boolean

三項演算子もJavaScriptと同じ（JS04）。TypeScriptは文法を増やすのではなく、型の情報を足しているだけ。

解答 == B

TypeScriptはJavaScriptに何を「足した」ものか。

B

TypeScriptはJavaScriptの上位互換。だから既存のコードを少しずつ型付けしていく、という移行の仕方ができる。いきなり全部書き直す必要はない。

出力 == ノートPC：128,000円（在庫5個）

string と number を組み合わせる。テンプレートリテラルで文字列を組み立てる。

const productName: string = "ノートPC";
const price: number = 128000;
const stock: number = 5;

console.log(`${productName}：${price.toLocaleString()}円（在庫${stock}個）`);

複数の型を使い分けるのがTypeScriptの日常。名前は文字列、価格と在庫は数値——この区別がコードに書かれていること自体が、後から読む人への説明になる。

出力 == 税込49,500円

Math.round で四捨五入する。計算結果にも型注釈を付けられる。

const price: number = 45000;
const taxed: number = Math.round(price * 1.1);

console.log(`税込${taxed.toLocaleString()}円`);

計算結果の変数にも型を書ける。書かなくても推論されるが（TS05で扱う）、明示すると「ここは数値であるべき」という意図が伝わる。

出力2行が完全一致

4つの変数に適切な型を付ける。2行目はセール対象かどうかで表示を変える（三項演算子）。

const productName: string = "ワイヤレスマウス";
const price: number = 3200;
const stock: number = 42;
const onSale: boolean = true;

console.log(`${productName}：${price.toLocaleString()}円`);
console.log(`在庫${stock}個／${onSale ? "セール対象" : "通常価格"}`);

3種類の型を1つの処理の中で使い分けている。実務のデータはこのように型が混在するので、それぞれに正しい型を付ける習慣が重要になる。

出力 == 商品4,800円＋送料600円＝合計5,400円

送料は三項演算子で決める。合計も型注釈付きの変数にする。

const price: number = 4800;
const shipping: number = price >= 5000 ? 0 : 600;
const total: number = price + shipping;

console.log(`商品${price.toLocaleString()}円＋送料${shipping}円＝合計${total.toLocaleString()}円`);

条件によって決まる値にも型を付けられる。shipping は0か600のどちらかだが、どちらも数値なので number でよい。

出力 == 会員価格：18,000円（2,000円お得）

割引後の価格と割引額をそれぞれ変数にする。Math.round で整数にする。

const price: number = 20000;
const isMember: boolean = true;

const finalPrice: number = isMember ? Math.round(price * 0.9) : price;
const discount: number = price - finalPrice;

console.log(`会員価格：${finalPrice.toLocaleString()}円（${discount.toLocaleString()}円お得）`);

boolean で処理を分岐させ、number で計算する——型が違えば役割も違う。この対応関係が明確なほど、コードは読みやすくなる。

出力3行が完全一致

在庫金額は単価×在庫。状態は三項演算子で判定する。

const productName: string = "モニター";
const price: number = 45000;
const stock: number = 7;

const stockValue: number = price * stock;
const stockStatus: string = stock < 10 ? "要補充" : "十分";

console.log(`商品：${productName}`);
console.log(`在庫金額：${stockValue.toLocaleString()}円`);
console.log(`在庫状態：${stockStatus}`);

判定結果を string 型の変数に入れている点に注目。「要補充」か「十分」のどちらかしか入らないはずだが、今の書き方ではどんな文字列でも入れられてしまう。TS06のリテラル型を学ぶと、これをより厳密に表現できる。

出力4行が完全一致

小計→割引→割引後→税→合計の順に計算する。それぞれ型注釈付きの変数にする。

const price: number = 8500;
const qty: number = 3;
const isMember: boolean = true;

const subtotal: number = price * qty;
const discount: number = isMember ? Math.round(subtotal * 0.1) : 0;
const afterDiscount: number = subtotal - discount;
const tax: number = Math.round(afterDiscount * 0.1);
const total: number = afterDiscount + tax;

console.log(`小計：${subtotal.toLocaleString()}円`);
console.log(`会員割引：-${discount.toLocaleString()}円`);
console.log(`消費税：${tax.toLocaleString()}円`);
console.log(`合計：${total.toLocaleString()}円`);

計算の各段階を変数に分けているのが要点。1つの式にまとめることもできるが、段階ごとに名前を付けたほうが検算しやすく、後から読む人にも計算の流れが伝わる。