【TypeScript基礎学習2】基本的な文法と型について理解する

JavaScript
2022.05.25

こんにちは、かつコーチです。

今回は、TypeScriptにおける基本的な文法と型について解説します。

JavaScriptの変化版なので、ほとんど同じですが、おさらいしてみようと思います。

TypeScriptの基本的な文法と型については以下の内容が挙げられるかと思います。

  • 文と式の違い
  • 変数宣言
  • プリミティブ型
  • 演算子
  • 基本的な制御構文

それぞれについて解説します。

文と式の違い

まずは、文と式の違いついてです。

文 (Statement)

文は、プログラムの実行単位であり、何らかのアクションを実行します。

文は単体では値を返さず、主にコードの制御や動作を定義するために使われます。

TypeScriptの文の例には、条件分岐やループなどがあります。

let x = 10;  // これは変数宣言の「文」
if (x > 5) {
    console.log("xは5より大きい");  // 条件文
}

上記の例では、if文が条件に基づいてコードを実行するための制御文として機能しています。

式 (Expression)

式は、値を生成します。

計算や関数呼び出しの結果として値を返す要素であり、

式は文の一部として使われることが多いです。

例えば、数値の加算や関数の呼び出しも式です。

let y = x + 5;  // x + 5 は式 (expression)

この場合、x + 5 は式であり、その結果が変数 y に代入されます。

式は常に値を持つので、他の文の中に含まれることが多いです。

文は主に「動作」を表し、式は「値を返すもの」という区別が重要です。

変数の宣言

TypeScriptでは、var、let、constの3つの方法で変数を宣言できます。

現在では、スコープの問題や安全性の理由から、

varを使うべきではなく、letよりもできる限り**constを使用**するのが推奨されています。

const

constは再代入が禁止された変数の宣言に使用します。

再代入できないだけで、オブジェクトや配列の内容を変更することは可能です。

const name = "John";
name = "Alice";  // エラー: `const`で宣言された変数には再代入できない

ただし、オブジェクトや配列自体の内容は変更可能です。

const person = { name: "John" };
person.name = "Alice";  // これは許可される

let

letは再代入可能な変数の宣言に使用されますが、ブロックスコープを持つため、

変数のスコープが宣言されたブロック内に制限されます。

let age = 30;
age = 31;  // これは許可される

var

varはかつて主に使われていた変数宣言方法ですが、関数スコープを持ち、

予期しない挙動を引き起こすことがあるため、使用は推奨されていません。

var score = 100;
score = 200;  // これは許可されるが、スコープに注意

プリミティブ型

TypeScriptの基本的なプリミティブ型は、JavaScriptと同じものが使われます。

この「プリミティブ」という横文字が初学者にはなんともピンと来ないですよね。。。

簡単にいうと、基本的な型のことです。

以下は代表的なプリミティブ型です。

number: 整数や浮動小数点数を含むすべての数値。

let num: number = 42;

string: テキストの値。

let str: string = "Hello, TypeScript!";

boolean: 真 (true) または偽 (false)。

let isDone: boolean = false;

null: 値が存在しないことを示す。

let n: null = null;

undefined: 値が定義されていないことを示す。

let u: undefined = undefined;

symbol: 一意の識別子を作成するための型。

let sym = Symbol("id");

TypeScriptは、これらの基本的なプリミティブ型を使って型安全なコードを書くことができます。

演算子

TypeScriptは、JavaScriptの演算子をすべてサポートしています。

以下は、主要な演算子の一覧です。

算術演算子

数値の計算に使われる基本的な演算子です。

  • + (加算)
  • - (減算)
  • * (乗算)
  • / (除算)
  • % (剰余)
let sum = 10 + 5;  // 15

比較演算子

値を比較するために使われます。

  • == (等しいかどうか)
  • === (型も含めて等しいかどうか)
  • != (等しくないかどうか)
  • !== (型も含めて等しくないかどうか)
  • > (大きい)
  • < (小さい)
  • >= (大きいか等しい)
  • <= (小さいか等しい)
let isEqual = 5 === 5;  // true

論理演算子

論理的な条件を評価するために使われます。

  • && (論理積)
  • || (論理和)
  • ! (論理否定)
let isActive = true && false;  // false

代入演算子

変数に値を代入するために使われます。

  • = (代入)
  • += (加算して代入)
  • -= (減算して代入)
let total = 100;
total += 50;  // 150

基本的な制御構文

TypeScriptでは、JavaScriptと同様の制御構文を使用します。

条件分岐 (if, else if, else)

if文は、条件が真 (true) である場合にブロック内のコードを実行します。

let score = 80;

if (score > 90) {
    console.log("Excellent");
} else if (score > 70) {
    console.log("Good");
} else {
    console.log("Needs Improvement");
}

switch文

複数の条件を効率的に処理するために使用します。

let color = "red";

switch (color) {
    case "red":
        console.log("The color is red");
        break;
    case "blue":
        console.log("The color is blue");
        break;
    default:
        console.log("Unknown color");
}

ループ (for, while)

繰り返し処理を行うために使われます。

forループ

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

whileループ

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

for...of と for...in

for...ofは、配列などのイテラブルオブジェクトをループするために使います。

let arr = [10, 20, 30];
for (let value of arr) {
    console.log(value);
}

for...inは、オブジェクトのプロパティをループするために使います。

let person = { name: "Alice", age: 25 };
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

まとめ

TypeScriptの基本的な構文や特徴を理解することで、

コードの安全性と可読性を向上させることができます。

特に変数宣言や型安全性、制御構文に関する深い理解は、

TypeScriptを効果的に使うための基礎となります。

タイトルとURLをコピーしました