日本語

TypeScriptの基本

TypeScriptの基本タイプ

TypeScriptの制御フロー

TypeScript 関数

TypeScript インターフェース

TypeScript クラスとオブジェクト

TypeScript 高级タイプ

TypeScriptのタイプ操作

TypeScript ジェネリック

TypeScriptのその他

TypeScript - 基本的な構文

こんにちは、未来のTypeScriptの魔法使いさんたち！? TypeScriptの素晴らしい世界へのエキサイティングな旅にあなたをお連れします。プログラミングを教えてきた経験豊富な者として言えるのは、TypeScriptはJavaScriptの強化版で、あなたのプログラミング生活をより簡単にしてくれることでしょう。さあ、飛び込もう！

TypeScript - Basic Syntax

最初のTypeScriptのコード

いいですね、新しい言語で初めてのコードを書くのはエキサイティングですよね？まずは、定番の「Hello, World!」プログラムをTypeScriptで書いてみましょう。

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

これを見て、「ちょっと待って、これはJavaScriptと同じだ！」と思うかもしれません。その通りです！TypeScriptはJavaScriptのスーパーセットであり、すべての有効なJavaScriptは有効なTypeScriptでもあります。でも心配しないでください、すぐにTypeScript独自のものに進みます。

もう少しTypeScriptらしさを試してみましょう：

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

ここでは以下のことをしています：

  • messageという変数を宣言しています
  • : stringの部分は、この変数は文字列値のみを保持するべきだとTypeScriptに伝えています
  • 文字列「Hello, TypeScript!」をこの変数に割り当てています
  • 最後に、それをコンソールに表示しています

これはTypeScriptの型システムの一部であり、最も強力な機能の1つです。間違えをあなたがコードを実行する前にキャッチしてくれる親切なロボットアシスタントのようなものです！

TypeScriptプログラムのコンパイルと実行

TypeScriptを書いたので、実際にどうやって実行するのかというと、ブラウザやNode.jsはTypeScriptを直接理解できないため、まずJavaScriptにコンパイルする必要があります。これはTypeScriptをコンピュータがすでに理解している言語に翻訳するのようなものです。

以下の手順でやります：

  1. TypeScriptコードを.ts拡張子のファイルに保存します。例えば「hello.ts」などです
  2. ターミナルまたはコマンドプロンプトを開きます
  3. ファイルがあるディレクトリに移動します
  4. TypeScriptコンパイラを実行します：
tsc hello.ts

これにより、同じディレクトリに「hello.js」という新しいファイルが作成され、それがTypeScriptコードをJavaScriptに翻訳したものです！

それを実行するには、Node.jsを使います：

node hello.js

それで、メッセージがコンソールに表示されるはずです。

コンパイラフラグ

TypeScriptコンパイラは非常に賢いですが、時々特定の指示を与えたいことがあります。そのためにはコンパイラフラグが使えます。これはコンパイラに特定の動作を変更するための特別なコマンドです。

以下は一般的なコンパイラフラグの表です：

フラグ 説明
--outDir 全ての生成ファイルの出力フォルダを指定します
--target ECMAScriptのターゲットバージョンを指定します
--watch 入力ファイルを監視します
--strict すべての厳格な型チェックオプションを有効にします

例えば、古いバージョンのJavaScriptとの互換性のためにTypeScriptをコンパイルしたい場合、以下のようにします：

tsc --target ES5 hello.ts

これはコンパイラにECMAScript 5に対応するJavaScriptを生成するように指示します。

TypeScriptの識別子

プログラミングでは、変数、関数、クラスなどの名前を指定するために識別子を使います。これらはコードの異なる部分をラベルとして扱います。TypeScriptでは、以下の規則があります：

  • 文字、数字、アンダースコア、ドル記号を含むことができます
  • 最初の文字は文字、アンダースコア、またはドル記号で始まらなければなりません
  • 大文字と小文字が区別されます（myVariableとMyVariableは異なります）
  • 予約語として使われていない言葉でなければなりません（次回詳しく説明します）

以下は有効な識別子の例です：

let firstName: string = "John";
let _count: number = 5;
let $price: number = 9.99;
let camelCaseIsCommon: boolean = true;

以下は無効な識別子の例です：

let 123abc: string = "Invalid"; // 数字では始まれない
let my-variable: number = 10; // ハイフンは使用不可
let class: string = "Reserved keyword"; // 予約語は使用不可

TypeScript ─ キーワード

キーワードはTypeScriptで特別な意味を持つ単語です。これらは言語の語彙であり、識別子として使うことはできません。TypeScriptはすでにそれらに特定の役割を与えています。

以下は一般的なTypeScriptのキーワードの表です：

キーワード 説明
let ブロックスコープの変数を宣言します
const ブロックスコープの定数を宣言します
if if文を開始します
for forループを開始します
function 関数を宣言します
class クラスを宣言します
interface インターフェースを宣言します
type 型エイリアスを宣言します

例えば：

let x: number = 5;
const PI: number = 3.14159;

if (x > 0) {
console.log("x is positive");
}

for (let i = 0; i < 5; i++) {
console.log(i);
}

function greet(name: string): void {
console.log(`Hello, ${name}!`);
}

class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}

interface Shape {
area(): number;
}

type Point = {
x: number;
y: number;
};

これらのキーワードは、コードの構造や定義を設定するために特定の目的を持っています。

TypeScriptのコ멘트

コメントはコードの中に自分自身（または他の開発者）に残す小さなメモのようなものです。コンパイラはこれらを無視するため、コードの動作に影響を与えずに、コードが何をしているかを説明するのに使えます。

TypeScriptは以下の3種類のコメントをサポートしています：

  1. 単行コメント：

    // これは単行コメント
let x: number = 5; // また、行の終わりに置くこともできます

  2. 複行コメント：

    /* これは複行コメント
複数の行にまたがることができます
長い説明には便利です */
let y: number = 10;

  3. ドキュメントコメント：

    
/**
  • これはドキュメントコメント
  • 関数やクラスのドキュメントを生成するのに使います
  • @param name 挨拶する名前
  • @returns 挨拶メッセージ */ function greet(name: string): string { return Hello, ${name}!; }

良いコメントは、何をしているかではなく、何故そのようにしているかを説明するものが望ましいです。コード自体は何をしているかを明確に示すべきです。

TypeScriptとオブジェクト指向

TypeScriptの素晴らしい機能の1つはオブジェクト指向プログラミング（OOP）サポートです。プログラミングの初心者の場合、OOPは「オブジェクト」を中心にコードを組織する方法です。

簡単な「Car」クラスを作って見せましょう：

class Car {
// プロパティ
make: string;
model: string;
year: number;

// コンストラクタ
constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

// メソッド
describe(): string {
return `This is a ${this.year} ${this.make} ${this.model}.`;
}
}

// Carのインスタンスを作成
let myCar = new Car("Toyota", "Corolla", 2022);

console.log(myCar.describe()); // 出力: This is a 2022 Toyota Corolla.

これを分解すると：

  • Carクラスを定義し、make、model、yearというプロパティを持たせています
  • constructorは新しいCarが作成される際に呼ばれる特別なメソッドです
  • describeメソッドは車の説明を返します
  • 新しいCarオブジェクトを作成し、そのdescribeメソッドを呼び出します

TypeScriptの型システムはOOPで非常に効果を発揮します。例えば、yearプロパティに文字列を割り当てようとしたり、存在しないメソッドを呼び出そうとした場合にエラーをキャッチできます。

そして、ここまででTypeScriptの初歩を学びました。コードを書くのは旅であり、目的地ではありません。すべてがすぐに理解できるわけではありませんが、練習を続け、実験をし、最も重要的是に楽しみ続けてください！間もなく複雑なTypeScriptアプリケーションを書いて、静的型付けなしではどうにもならないと感じるようになるでしょう。快適なコーディングを！?

Credits: Image by storyset

前のチュートリアル:
TypeScript - 環境設定
次のチュートリアル:
TypeScript vs. JavaScript