TypeScriptの基本文法

変数宣言

TypeScriptでは、let、const、およびvarを使用して変数を宣言します。constは再代入不可、letは再代入可能、varはスコープが関数スコープです。

typescript

let mutableVariable: number = 10;
const immutableVariable: string = "Hello";
var functionScopedVariable: boolean = true;

配列

配列の型は、要素の型の後に [] を付けるか、Array<型> を使用します。

typescript

const numbers: number[] = [1, 2, 3];
const strings: Array<string> = ["a", "b", "c"];

タプル

タプルは固定長の配列で、各要素に異なる型を持たせることができます。

typescript

const tuple: [string, number] = ["Alice", 30];

オブジェクト

オブジェクトの型は、プロパティ名とその型を指定します。

typescript

const person: { name: string; age: number } = {
    name: "Alice",
    age: 30,
};

関数宣言

関数の宣言方法には、関数宣言、関数式、アロー関数があります。

typescript

// 関数宣言
function add(a: number, b: number): number {
    return a + b;
}
// 関数式
const subtract = function(a: number, b: number): number {
    return a - b;
};
// アロー関数
const multiply = (a: number, b: number): number => a b;

デフォルトパラメータ

関数の引数にデフォルト値を設定できます。

typescript

function greet(name: string = "Guest"): string {
    return Hello, ${name};
}

オプショナルパラメータ

関数の引数をオプショナルにすることができます。

typescript

function log(message: string, userId?: string): void {
    console.log(message, userId || "Not signed in");
}

スプレッド構文とレストパラメータ

スプレッド構文は配列やオブジェクトを展開するために使用され、レストパラメータは可変長引数を受け取るために使用されます。

typescript

// スプレッド構文
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
// レストパラメータ
function sum(...numbers: number[]): number {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

クラス

TypeScriptでは、クラスを使用してオブジェクト指向プログラミングを行います。

typescript

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): string {
    return `Hello, my name is ${this.name}`;
  }
}

const person = new Person("Alice", 30);

継承

クラスは他のクラスを継承することができます。

typescript

class Employee extends Person {
  employeeId: number;

  constructor(name: string, age: number, employeeId: number) {
    super(name, age);
    this.employeeId = employeeId;
  }

  getDetails(): string {
    return `${this.name}, ${this.age} years old, Employee ID: ${this.employeeId}`;
  }
}

const employee = new Employee("Bob", 25, 12345);

非同期処理

TypeScriptでは、async/awaitを使用して非同期処理を行います。

typescript

async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

モジュール

TypeScriptでは、importとexportを使用してモジュールを管理します。

typescript

// モジュールのエクスポート
export const pi = 3.14;
export function calculateCircumference(diameter: number): number {
  return diameter pi;
}
// モジュールのインポート
import { pi, calculateCircumference } from './math';
console.log(calculateCircumference(10));

名前付きエクスポートとデフォルトエクスポート

モジュールは名前付きエクスポートとデフォルトエクスポートの両方をサポートします。

typescript

// 名前付きエクスポート
export const name = "Alice";
export function greet(): void {
console.log("Hello");
}
// デフォルトエクスポート
const defaultExport = "Default Export";
export default defaultExport;
// インポート
import defaultExport, { name, greet } from './module';

型アサーション

型アサーションは、ある型を別の型として扱うことを示します。

typescript

let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

非nullアサーション演算子

非nullアサーション演算子（!）は、値がnullまたはundefinedでないことを示します。

typescript

let someValue: string | null = "Hello";
console.log(someValue!.length); // someValueがnullでないことを保証

オプショナルチェイニング

オプショナルチェイニング（?）は、プロパティが存在しない場合にundefinedを返します。

typescript

let user: { name?: string } = {};
console.log(user.name?.toUpperCase()); // undefined

null合体演算子

null合体演算子（??）は、nullまたはundefinedの場合にデフォルト値を返します。

typescript

let input: string | null = null;
let defaultValue = input ?? "default";
console.log(defaultValue); // "default"