TypeScriptの基本文法と書き方（型定義以外）

### <font color="#1e90ff">TypeScriptの基本文法</font>

#### <font color="green">変数宣言</font>
TypeScriptでは、`let`、`const`、および`var`を使用して変数を宣言します。`const`は再代入不可、`let`は再代入可能、`var`はスコープが関数スコープです。

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

#### <font color="green">配列</font>
配列の型は、要素の型の後に `[]` を付けるか、`Array<型>` を使用します。
```typescript:typescript
const numbers: number[] = [1, 2, 3];
const strings: Array<string> = ["a", "b", "c"];
```

#### <font color="green">タプル</font>
タプルは固定長の配列で、各要素に異なる型を持たせることができます。
```typescript:typescript
const tuple: [string, number] = ["Alice", 30];
```

#### <font color="green">オブジェクト</font>
オブジェクトの型は、プロパティ名とその型を指定します。
```typescript:typescript
const person: { name: string; age: number } = {
    name: "Alice",
    age: 30,
};
```


#### <font color="green">関数宣言</font>
関数の宣言方法には、関数宣言、関数式、アロー関数があります。

```typescript: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;
```

#### <font color="green">デフォルトパラメータ</font>
関数の引数にデフォルト値を設定できます。

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

#### <font color="green">オプショナルパラメータ</font>
関数の引数をオプショナルにすることができます。

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

#### <font color="green">スプレッド構文とレストパラメータ</font>
スプレッド構文は配列やオブジェクトを展開するために使用され、レストパラメータは可変長引数を受け取るために使用されます。
```typescript: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);
}
```

#### <font color="green">クラス</font>
TypeScriptでは、クラスを使用してオブジェクト指向プログラミングを行います。
```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);
```

#### <font color="green">継承</font>
クラスは他のクラスを継承することができます。
```typescript: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);
```


#### <font color="green">非同期処理</font>
TypeScriptでは、`async`/`await`を使用して非同期処理を行います。
```typescript:typescript
async function fetchData(url: string): Promise<any> {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}
```

#### <font color="green">モジュール</font>
TypeScriptでは、`import`と`export`を使用してモジュールを管理します。
```typescript:typescript
// モジュールのエクスポート
export const pi = 3.14;
export function calculateCircumference(diameter: number): number {
  return diameter pi;
}
// モジュールのインポート
import { pi, calculateCircumference } from './math';
console.log(calculateCircumference(10));
```

#### <font color="green">名前付きエクスポートとデフォルトエクスポート</font>
モジュールは名前付きエクスポートとデフォルトエクスポートの両方をサポートします。

```typescript: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';
```

#### <font color="green">型アサーション</font>
型アサーションは、ある型を別の型として扱うことを示します。
```typescript:typescript
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;
```

#### <font color="green">非nullアサーション演算子</font>
非nullアサーション演算子（`!`）は、値がnullまたはundefinedでないことを示します。
```typescript:typescript
let someValue: string | null = "Hello";
console.log(someValue!.length); // someValueがnullでないことを保証
```

#### <font color="green">オプショナルチェイニング</font>
オプショナルチェイニング（`?`）は、プロパティが存在しない場合にundefinedを返します。
```typescript:typescript
let user: { name?: string } = {};
console.log(user.name?.toUpperCase()); // undefined
```

#### <font color="green">null合体演算子</font>
null合体演算子（`??`）は、nullまたはundefinedの場合にデフォルト値を返します。
```typescript:typescript
let input: string | null = null;
let defaultValue = input ?? "default";
console.log(defaultValue); // "default"
```