TypeScriptの基本

この記事ではTypeScriptの基本について説明します。

YouTube Video

"Hello World!"の実行

まずVisual Studio Codeを用いて、TypeScriptでお馴染みの"Hello World!"を実行してみます。

npm install -g typescript

npmコマンドより、typescriptをインストールします。

tsconfig.jsonファイルを作成します。

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

.vscode/launch.jsonファイルを作成し、main.tsファイルをVisual Studio Codeで実行できるようにします。

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

"Hello World!"と表示するmain.tsファイルを作成します。F5キーによりVisual Studio Code内で実行できます。

1console.log("Hello World!");

このように設定することで、VSCode内でTypeScriptファイルを実行できます。

TypeScript概要

TypeScript（TS）は、Microsoftによって開発されたJavaScriptのスーパーセット言語です。TypeScriptは、静的型付けをサポートし、より堅牢でメンテナンスしやすいコードを書くことができます。

静的型付け

• TypeScriptは、JavaScriptに型を付け加え、コンパイル時に型のチェックを行います。これにより、型関連のバグを未然に防ぐことができます。

1let message: string = "Hello, TypeScript";
2console.log(message);

コンパイル

• TypeScriptはブラウザで直接実行できないため、JavaScriptにトランスパイル（コンパイル）する必要があります。tsc（TypeScriptコンパイラ）を使用して、TSファイルをJSファイルに変換します。

オプションの型注釈

• TypeScriptは型推論も行いますが、必要に応じて型を明示的に指定できます。これにより、コードの可読性と信頼性が向上します。

1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

インターフェース

• TypeScriptは、オブジェクトの形状を定義するためにinterfaceを提供します。これにより、オブジェクト構造を厳密に管理できます。

1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

クラス

• TypeScriptは、JavaScriptのクラス構文に拡張機能を提供し、継承、アクセス修飾子（public, private, protected）、および抽象クラスをサポートします。

 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

ジェネリクス

• TypeScriptでは、ジェネリクスを使用して再利用可能で型安全なコードを書くことができます。

1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

エコシステム

• TypeScriptはJavaScriptエコシステムと完全に互換性があり、既存のJavaScriptコードをそのまま使用できます。また、人気のあるライブラリ（React, Node.jsなど）とも統合されています。

強力な開発者ツール

• TypeScriptは、VSCodeなどのエディタで高度なオートコンプリート、リファクタリングサポート、エラーチェックなどの機能を提供します。

TypeScriptは、大規模なプロジェクトでの信頼性を高め、開発者の生産性を向上させるために特に有用です。

TypeScriptにおける変数

TypeScriptにおける変数について、基本的な概念と使用方法を説明します。

変数の宣言

TypeScriptでは、let、const、varの3つのキーワードで変数を宣言します。各キーワードには異なる特徴があります。

letの例:

letはブロックスコープ（波括弧 {} 内でのみ有効）を持ちます。値を後から再代入できます。

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

constの例:

constは再代入不可のため、一度代入した値を変更できません。ただし、オブジェクトや配列の内容は変更可能です。

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

varの例:

varは関数スコープを持ち、再代入が可能です。しかし、ブロックスコープを無視し、letやconstに比べて予期しない動作を引き起こす可能性があります。

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

型注釈

TypeScriptでは、変数に型を明示的に注釈できます。型推論もサポートされていますが、複雑な場面では型注釈が有効です。

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

未初期化変数

変数は宣言のみで初期化しない場合、undefinedがデフォルトで割り当てられます。letで宣言した変数は初期化されていない場合には明示的にundefinedを代入するか、もしくはデータ型にundefinedを含める必要があります。

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

変数のスコープ

letとconstはブロックスコープを持つため、同じブロック内でのみ有効です。

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

変数のホイスティング

TypeScriptはJavaScriptのスーパーセットなので、JavaScriptのホイスティング機能を引き継いでいます。ホイスティング（Hoisting）とは、変数や関数の宣言がスコープの先頭に「持ち上げられる」ように扱われる挙動を指します。ただし、宣言だけがホイスティングされ、初期化はそのままの位置に留まります。varで宣言された変数はホイスティングされますが、letやconstは宣言前に使用するとエラーになります。

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• この場合、varで宣言された変数はホイスティングされ、変数の値が出力されます。

1console.log(b); // ReferenceError
2let b = 20;

• letで宣言された変数はホイスティングされないため、エラーになります。

まとめ

let、const、varについて次のように要約できます。

• letは、再代入可能で、ブロックスコープです。
• constは、再代入不可で、ブロックスコープです。
• varは、再代入可能で、関数スコープです。
• いずれも型注釈で変数の型を明示的に指定可能です。

TypeScriptにおけるエスケープ文字

エスケープ文字は、特定の文字を直接入力できない場合や、文字列内で特別な意味を持つ文字を表すために使われます。TypeScriptでは、エスケープ文字を使用して制御文字や特殊な文字を表現します。

たとえば、改行を含むメッセージを出力する場合、\n を使用します。

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

特殊文字のエスケープ

エスケープ文字は、特殊文字を文字列に含める際にも役立ちます。たとえば、文字列内でダブルクォートやシングルクォートをそのまま使いたい場合があります。

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

バックスラッシュ自体をエスケープする

バックスラッシュをそのまま文字列に含めたい場合は、二重にバックスラッシュを書く必要があります。

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Unicodeと16進数エスケープ

TypeScriptでは、Unicodeコードポイントをエスケープシーケンスで表現することができます。

Unicodeエスケープシーケンス

\u の後に4桁の16進数を指定して、Unicode文字を表現できます。

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

16進数エスケープ

\x の後に2桁の16進数で特定の文字を表現します。

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

テンプレートリテラルとエスケープ

テンプレートリテラルは、バッククォートで囲むことで定義され、埋め込み式や複数行の文字列を容易に作成する手段を提供します。テンプレートリテラルでは通常のエスケープ文字がそのまま使えます。

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

特殊なケース

TypeScriptでは、文字列内で不正なエスケープシーケンスを使うと構文エラーが発生することがあります。そのため、エスケープ文字が有効かどうか確認することが重要です。

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

実際の使用例

以下は、エスケープ文字を使って複雑な文字列を構築する例です。

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

この例では、\n を使って改行し、\t を使ってインデントを追加しています。これにより、JSONの構造を見やすくしています。

まとめ

エスケープ文字は、TypeScriptの文字列を扱う上で非常に重要です。文字列に特殊な文字や制御文字を含めたいときは、適切なエスケープシーケンスを使用することで、表現力豊かな文字列を作成できます。エスケープ文字を理解し、正しく使うことで、コードの可読性や保守性も向上します。

TypeScriptのバージョン

ここで、TypeScriptのバージョンについて概観してみましょう。

1. TypeScript 1.0（2014年）

   TypeScriptの最初の安定バージョン。型付け、クラス、モジュールなどの基本的な機能が導入されました。

2. TypeScript 2.0（2016年）

   Non-nullable Types、Control Flow Analysis、Read-only Properties、Never型が導入され、型推論が強化されました。

3. TypeScript 3.0（2018年）

   Project Referencesや、Tuple Typesの拡張、Rest Parametersの改善など、より柔軟な型システムが導入されました。

4. TypeScript 4.0（2020年）

   Variadic Tuple Types、エディターでの改善、型推論の強化、Labelled Tuple Elementsなど、開発体験を向上させる機能が追加されました。

5. TypeScript 4.1（2020年）

   Template Literal Typesが導入され、文字列型の操作がより強力になりました。

6. TypeScript 4.3（2021年）

   Overrideキーワードの追加や、コンストラクタ内でのアクセス修飾子の改善、WeakMapやWeakSetの型サポートが向上しました。

7. TypeScript 4.5（2021年）

   Awaited型や、ModuleSuffixes、ECMAScriptモジュールとの互換性向上などが追加されました。

8. TypeScript 5.0（2023年）

   Decoratorsの標準化や、プロジェクトのビルド速度向上、型システムの強化と最新のECMAScript機能のサポートが行われました。

TypeScriptは常に進化しており、毎年複数のバージョンがリリースされて新機能や改善が行われています。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video