TypeScriptの基本型
TypeScriptの型システムは、7つの基本型から始まります。これらを習得すれば、型注釈の「アルファベット」をマスターしたことになります。
1. 7つの基本的なタイプ
TypeScript は JavaScript から 7 つの基本型を継承しており、各型に対して型注釈の構文を提供しています:
| タイプ | 説明 | 値の例 |
|---|---|---|
string |
文字列 | "hello", 'world', `template` |
number |
数(整数と小数) | 42, 3.14, 0xFF |
boolean |
ブール値 | true, false |
null |
空の値 | null |
undefined |
未定義 | undefined |
symbol |
一意の識別子 | Symbol("id") |
bigint |
大整数 | 100n, BigInt(9007199254740991) |
(1) 文字列
文字列は、一重引用符、二重引用符、またはバッククォート(テンプレート文字列)を使って記述できます:
TYPESCRIPT
let firstName: string = "Charlie";
let lastName: string = 'Wang';
let greeting: string = `Hello, ${firstName} ${lastName}`;
テンプレート文字列(バッククォート)では、変数や式を埋め込むことができます。この構文はES6で導入され、TypeScriptで完全にサポートされています。
(2) 数
JavaScriptと同様、TypeScriptでは整数と浮動小数点数を区別せず、どちらも型 number となります:
TYPESCRIPT
let age: number = 25; // Integer
let price: number = 9.99; // Decimals
let hex: number = 0xFF; // Hexadecimal
let binary: number = 0b1010; // Binary
let octal: number = 0o744; // Octal
💡 ヒント: 計算に
Number.MAX_SAFE_INTEGER (2^53 - 1) を超える非常に大きな整数が含まれる場合は、number の代わりに bigint を使用してください。そうしないと、精度が低下してしまいます。
(3) ブール値
値は true と false の2つだけです。これらは、条件チェックやトグルフラグとしてよく使用されます:
TYPESCRIPT
let isActive: boolean = true;
let hasPermission: boolean = false;
▶ 例:プリミティブ型のアノテーション
TYPESCRIPT
// Defining Different Types of Variables
let title: string = "TypeScript Getting Started";
let version: number = 5.3;
let isPublished: boolean = true;
console.log("Courses:" + title);
console.log("Version:" + version);
console.log("Published:" + isPublished);
出力:
TEXT
Courses:TypeScript Getting Started
Version:5.3
Published:true
2. null と undefined
TypeScript では、null と undefined はどちらも値であり、型でもあります。両者の違いは些細に見えるかもしれませんが、型システムにおいては重要なものです。
(1) 意味の違い
| 種類 | 意味 | 出現するタイミング |
|---|---|---|
undefined |
「まだ割り当てられていません」 | 変数が宣言されているが初期化されていない;関数の戻り値がない |
null |
「意図的に空白のまま」 | 開発者が「ここには値がない」ことを示すために設定 |
(2) 型アノテーション
TYPESCRIPT
let notAssigned: undefined = undefined;
let emptyValue: null = null;
⚠️ 注意: デフォルトでは、
null および undefined は任意の型の変数に代入できます(たとえば、let name: string = null も有効です)。ただし、strictNullChecks を有効にすると、これらは null/undefined 型またはユニオン型の変数にのみ代入できるようになります。厳格なヌルチェックを有効にすることを強く推奨します。
(3) strictNullChecksの影響
TYPESCRIPT
// strictNullChecks: false(Default Relaxed Mode)
let name: string = null; // ✅ No errors,But at runtime name.toUpperCase() It will crash
// strictNullChecks: true(Strict Mode,Recommendations)
let name2: string = null; // ❌ Error:You cannot null Assign to string
let name3: string | null = null; // ✅ Correct:An explicit declaration might be null
📌 重要なポイント:
strict: true には strictNullChecks: true が含まれます。厳格モードでは、null または undefined となり得る値はすべて明示的に宣言する必要があります。これにより、「undefined is not a function」というランタイムエラーの 90% を防ぐことができます。
3. symbol 型
symbol は、ES6 で導入されたプリミティブ型であり、グローバルに一意な識別子を生成するために使用されます。Symbol() を呼び出すたびに、一意の値が生成されます:
TYPESCRIPT
let id1: symbol = Symbol("id");
let id2: symbol = Symbol("id");
console.log(id1 === id2); // false —— Even if the descriptions are the same,Each symbol They are all unique.
▶ 例:シンボルをオブジェクトの一意のキーとして使用する場合
TYPESCRIPT
let uniqueKey: symbol = Symbol("secret");
let user: object = {
name: "Diana",
age: 20
};
// Use symbol as a property key,Does not conflict with other attributes
user[uniqueKey] = "Hide Data";
console.log(user.name); // Normal Access
console.log(user[uniqueKey]); // Visit symbol Key value
出力:
TEXT
Diana
Hide Data
💡 ヒント: シンボルは日常的な開発ではあまり使われず、主に高度なシナリオ(イテレータプロトコル
Symbol.iterator やフレームワークの内部実装など)で登場します。初心者の方は、「Symbol() は呼び出されるたびに一意の値を生成する」ということを理解しておけば十分です。
4. bigint タイプ
bigint は、ES2020 で導入された型であり、number の安全な範囲を超える大きな整数を表します。n が続く数値は bigint です:
TYPESCRIPT
let big1: bigint = 100n; // Literal Notation
let big2: bigint = BigInt(9007199254740991); // Function Syntax
// number Upper Limit for Secure Integers
let maxSafe: number = Number.MAX_SAFE_INTEGER; // 9007199254740991
let overflow: number = 9007199254740992; // Outside the safety range,Loss of Accuracy!
// bigint No loss of precision
let safe: bigint = 9007199254740992n; // Precise representation
🔥 よくある間違い:
bigint と number を計算で併用することはできません。これらを併用すると、100n + 50 としてエラーが発生します。まず、型を Number(100n) + 50 または 100n + BigInt(50) のいずれかに統一する必要があります。
▶ 例:bigint の精度の比較
TYPESCRIPT
// number Accuracy is lost when the safe range is exceeded
let a: number = 9007199254740992;
let b: number = 9007199254740993;
console.log(a === b); // true!Two different numbers are actually equal
// bigint Precise representation
let c: bigint = 9007199254740992n;
let d: bigint = 9007199254740993n;
console.log(c === d); // false —— Distinguish Correctly
出力:
TEXT
true
false
5. 型注釈の省略とベストプラクティス
(1) 型アノテーションを指定する必要があるのはどのような場合か?
| シナリオ | 必須か? | 理由 |
|---|---|---|
| 初期値のない変数 | ✅ 必須 | そうでない場合、TypeScriptは型を推論できません |
| 関数のパラメータ | ✅ 必須 | 推論におけるこのパラメータの初期値は設定されていません |
| 関数の戻り値 | ⚠️ 推奨 | TypeScript ではこれを推論できますが、明示的に注釈を付けることでより明確になります |
| 変数に初期値がある | ❌ オプション | TypeScript は初期値に基づいて型を推論する |
(2) ベストプラクティス
TYPESCRIPT
// ✅ Recommendations:Omit the type annotation when a variable has an initial value(Type inference is sufficient)
let name = "Charlie";
let age = 20;
// ✅ Recommendations:Explicitly Labeling Function Parameters and Return Values
function greet(name: string): string {
return "Hello, " + name;
}
// ✅ Recommendations:Explicitly label when there is no initial value
let userId: number;
let isActive: boolean;
// ❌ Not recommended:Why include annotations when there are initial values?(Redundancy)
let name2: string = "Charlie"; // Superfluous——TypeScript It has already been deduced.
❓ よくある質問
Q TypeScript には float 型や double 型はありますか?
A いいえ。JavaScript と同様に、TypeScript には数値型が 1 つしかなく、それが整数と浮動小数点数の両方を網羅しています。JavaScript の数値はすべて 64 ビットの倍精度浮動小数点数(IEEE 754)であるため、1 と 1.0 は型としてはまったく同じです。
Q
null と undefined の実用上の違いは何ですか?それぞれをいつ使用すべきですか?A
undefined は「まだ割り当てられていない」(システムによって自動的に生成される状態)ことを示し、null は「意図的に空にしている」(開発者が明示的に設定した値)ことを示します。実際の開発では、「値なし」を示すために null を使用することを推奨します。これは、undefined は値の割り当てを忘れた結果となる可能性があるのに対し、null は意図的な選択を表すためです。Q
bigint 型は一般的に使われていますか?A あまり使われていません。ほとんどの場合、
number 型で十分です(安全な整数範囲は 2^53-1 ≈ 900兆まで)。bigintは主に、暗号アルゴリズムや大数計算、データベースにおけるbigintフィールドなどの場面で使用されます。初心者は、その存在を知っておくだけで十分です。実際に使用する必要が生じた際に、さらに深く掘り下げて理解すればよいでしょう。Q 型アノテーションを使いすぎるとパフォーマンスに影響しますか?
A まったく影響しません。型アノテーションはコンパイル時のみに存在し、コンパイルされた JavaScript コードからはすべての型情報が削除されるため、実行時のオーバーヘッドはゼロです。コメントがプログラムの動作を遅くしないのと同じです。
📖 まとめ
- TypeScript には、string、number、boolean、null、undefined、symbol、bigint の 7 つの基本型があります。
number型は整数と小数を区別しません。bigintは非常に大きな整数に使用され、numberとの混合演算には使用できません。- 厳格モードでは、
nullやundefinedを他の型に任意に割り当てることはできません。ユニオン型 (string | null) を使用する必要があります。 - symbol: グローバルに一意な識別子を生成します。主に高度なシナリオで使用されます。
- 変数に初期値がある場合は、型注釈を省略できます(型推論)。一方、関数の引数や初期値のない変数には、型注釈を付ける必要があります。
📝 練習問題
- 基本問題(難易度 ⭐):5つの一般的な型(文字列、数値、ブール値、null、undefined)に対応する5つの変数を宣言し、それぞれに適切な値を代入して、
console.logを使ってそれらを1つずつ出力してください。 - 上級問題(難易度 ⭐⭐):数値の価格を通貨記号付きの文字列に変換する関数
formatPrice(price: number, currency: string): stringを作成してください。例えば、formatPrice(99.5, "¥")を渡すと"¥99.5"が返されます。 - チャレンジ問題(難易度 ⭐⭐⭐):
numberの精度を確認してください。具体的には、0.1 + 0.2と0.3が等しいかどうかを比較するコードを記述し、その結果について説明してください。次に、bigintを使用して、Number.MAX_SAFE_INTEGERを超える 2 つの大きな整数の和を計算し、bigintで精度が失われていないことを確認してください。



