404 Not Found

404 Not Found


nginx

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) ブール値

値は truefalse の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 では、nullundefined はどちらも値であり、型でもあります。両者の違いは些細に見えるかもしれませんが、型システムにおいては重要なものです。

(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
🔥 よくある間違い: bigintnumber を計算で併用することはできません。これらを併用すると、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 nullundefined の実用上の違いは何ですか?それぞれをいつ使用すべきですか?
A undefined は「まだ割り当てられていない」(システムによって自動的に生成される状態)ことを示し、null は「意図的に空にしている」(開発者が明示的に設定した値)ことを示します。実際の開発では、「値なし」を示すために null を使用することを推奨します。これは、undefined は値の割り当てを忘れた結果となる可能性があるのに対し、null は意図的な選択を表すためです。
Q bigint 型は一般的に使われていますか?
A あまり使われていません。ほとんどの場合、number 型で十分です(安全な整数範囲は 2^53-1 ≈ 900兆まで)。bigintは主に、暗号アルゴリズムや大数計算、データベースにおけるbigintフィールドなどの場面で使用されます。初心者は、その存在を知っておくだけで十分です。実際に使用する必要が生じた際に、さらに深く掘り下げて理解すればよいでしょう。
Q 型アノテーションを使いすぎるとパフォーマンスに影響しますか?
A まったく影響しません。型アノテーションはコンパイル時のみに存在し、コンパイルされた JavaScript コードからはすべての型情報が削除されるため、実行時のオーバーヘッドはゼロです。コメントがプログラムの動作を遅くしないのと同じです。

📖 まとめ

📝 練習問題

  1. 基本問題(難易度 ⭐):5つの一般的な型(文字列、数値、ブール値、null、undefined)に対応する5つの変数を宣言し、それぞれに適切な値を代入して、console.log を使ってそれらを1つずつ出力してください。
  2. 上級問題(難易度 ⭐⭐):数値の価格を通貨記号付きの文字列に変換する関数 formatPrice(price: number, currency: string): string を作成してください。例えば、formatPrice(99.5, "¥") を渡すと "¥99.5" が返されます。
  3. チャレンジ問題(難易度 ⭐⭐⭐)number の精度を確認してください。具体的には、0.1 + 0.20.3 が等しいかどうかを比較するコードを記述し、その結果について説明してください。次に、bigint を使用して、Number.MAX_SAFE_INTEGER を超える 2 つの大きな整数の和を計算し、bigint で精度が失われていないことを確認してください。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%