こんにちは！プログラミングの初心者の皆さん、お疲れ様です。今日は、TypeScriptの基礎構文についてお話ししましょう。TypeScriptはJavaScriptのスーパーセットであり、型安全性や開発効率の向上を実現するために開発されました。この記事では、変数や型といった基本的な構文について解説しますので、一緒に学んでいきましょう！

 変数の宣言と初期化

変数は、データを格納するための箱です。TypeScriptでは、変数の宣言方法や初期化における注意点があります。また、変数名の命名規則やスコープについても解説します。

// 変数の宣言と初期化
let message: string = "Hello, TypeScript!";
const pi: number = 3.14;

// 変数の再代入
let count: number = 0;
count = count + 1;

基本的なデータ型

TypeScriptでは、数値や文字列、真偽値などの基本的なデータ型が用意されています。これらのデータ型の使い方や注意点について詳しく解説します。

// 数値
let num: number = 10;

// 文字列
let name: string = "John";

// 真偽値
let isStudent: boolean = true;

型注釈と型推論

TypeScriptでは、変数に対して明示的な型注釈を付けることができますが、同時に型推論機能も備わっています。どちらの方法を使うべきか、また型注釈の書き方や型推論の原則についても説明します。

// 型注釈の例
let age: number; // 型注釈で変数の型を指定

// 型推論の例
let score = 90; // 型推論により、変数の型が自動的に設定される

配列とオブジェクトの型

配列やオブジェクトは、複数の値をまとめて扱う際に便利です。このセクションでは、配列とオブジェクトの型指定方法や操作方法について解説します。

// 配列の型指定
let numbers: number[] = [1, 2, 3, 4, 5];

// オブジェクトの型指定
let person: { name: string, age: number } = { name: "John", age: 25 };

型エイリアスと列挙型

TypeScriptでは、複雑な型を簡潔に表現するために、型エイリアスや列挙型が利用されます。このセクションでは、型エイリアスと列挙型の作成方法と使い方について詳しく解説します。

// 型エイリアスの作成
type Point = {
  x: number;
  y: number;
};

// 列挙型の作成
enum Color {
  Red,
  Green,
  Blue,
}

型ガードと非nullアサーション演算子

TypeScriptでは、安全な型チェックを行うために型ガードや非nullアサーション演算子が利用されます。このセクションでは、これらの機能の使い方と注意点について説明します。

// 型ガードの使用
function printId(id: number | string) {
  if (typeof id === "number") {
    console.log(id.toFixed());
  } else {
    console.log(id.toUpperCase());
  }
}

// 非nullアサーション演算子の使用
let element = document.querySelector(".container")!;

型推論の限界と明示的な型指定

型推論は便利な機能ですが、場合によっては明示的な型指定が必要となることもあります。このセクションでは、型推論の限界と明示的な型指定の必要性について解説します。

// 型推論の限界
let result = calculate(); // 型推論では関数の戻り値の型を特定できない

// 明示的な型指定
let result: number = calculate(); // 関数の戻り値の型を明示的に指定

最後に

この記事では、TypeScriptの基礎構文について解説しました。変数の宣言と初期化、基本的なデータ型、型注釈と型推論、配列とオブジェクトの型、型エイリアスと列挙型、型ガードと非nullアサーション演算子、型推論の限界と明示的な型指定について学びました。

TypeScriptは、JavaScriptの拡張として型安全性と開発効率を向上させる強力なツールです。ぜひ、これらの基礎構文をマスターして、より堅牢でメンテナブルなコードを書くために活用してください。