Web Design Leaves

class MyClass {
  // コンストラクタの定義
  constructor() {
    console.log('MyClass instance is created.');
  }
}

const myClass = new MyClass();  // MyClass instance is created と出力される

class MyClass {
  // 引数には型注釈を書きます
  constructor(name: string) {
    console.log('Hello ' + name);
  }
};

//コンストラクタの引数に対応した引数を渡す必要があります。
const myClass = new MyClass('foo');  // Hello foo と出力される
const myClass2 = new MyClass(2);  // 引数の型が異なるのでコンパイルエラー

class クラス {
  プロパティ名: 型 = プロパティの初期値;
}

class User {
  // プロパティ名: 型 = 初期値（式）;
  name: string = '';
  age: number = 0;
}

const user = new User();
console.log(user.name);  // ''
console.log(user.age);  // 0

user.name = 'foo';
user.age = 33;

console.log(user.name);  // 'foo'
console.log(user.age);  // 33

class User {
  // 初期化子でプロパティの初期値を設定
  name= '';  // string 型と推論される→型注釈を省略可能
  age = 0;  // number 型と推論される→型注釈を省略可能
}

class クラス {
  メソッド(引数: 型): 戻り値の型 {
    // 処理
  }
}

class Counter {
  count: number = 0;

  increment() {
    this.count++;
  }

  add(num: number) {
    this.count += num;
  }

  isCountOver10(): boolean {
    return this.count > 10;
  }
}

const counter = new Counter();
console.log(counter.count); // 0
counter.increment();
console.log(counter.count); // 1
console.log(counter.isCountOver10()); // false
counter.add(10);
console.log(counter.count); // 11
console.log(counter.isCountOver10()); // true

class User {
  name: string;
  // クラスの内部からのみアクセス可能
  private age: number;

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

  isOver18(): boolean {
    return this.age > 18;
  }
}

const foo = new User('foo', 33);
console.log(foo.isOver18()); // true
console.log(foo.age); // コンパイルエラー（private を付けているので外部からアクセス不可）
// Property 'age' is private and only accessible within class 'User'.

class User {
  name: string;
  private age: number;

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

class User {
  constructor(public name: string, private age: number) {
    console.log(this.name, this.age);
  }
}

class User {
  name: string;
  #age: number;

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

  isOver18(): boolean {
    return this.#age > 18;
  }
}

const foo = new User('foo', 33);
console.log(foo.isOver18()); // true
console.log(foo.#age);  // SyntaxError とコンパイルエラー

class MyClass {
  // static を付けると静的プロパティになる
  static myNumber: number = 123;
}

// クラスのプロパティとして参照
console.log(MyClass.myNumber);  // 123
MyClass.myNumber = 456;
console.log(MyClass.myNumber);  // 456

class MyClass {
  static myNumber: number = 123;
  // 静的メソッド
  static printMyNummber() {
    console.log(this.myNumber); // console.log(MyClass.myNumber); でも同じ
  }
}

MyClass.printMyNummber(); // 123

class MyClass {
  static myNumber: number = 123;

  constructor() {
    // コンストラクタの中では クラス名.静的プロパティ名 で参照
    console.log(`myNumber is ${MyClass.myNumber}`);
  }
}

const myClass = new MyClass(); // myNumber is 123

class MyClass {
  // 静的プロパティとプライベートプロパティ
  static #privateNumber: number = 123456;
  // 静的メソッド
  static printPrivateNummber() {
    // クラス内からは参照できる
    console.log(this.#privateNumber);
  }

  // アクセス修飾子と静的プロパティ
  private static privateString: string = 'secret';
  // 静的メソッド
  static printPrivateString() {
    // クラス内からは参照できる
    console.log(this.privateString);
  }
}

MyClass.printPrivateNummber(); // 123456
MyClass.printPrivateString(); // secret
// クラス外からは参照できない
console.log(#privateNumber); // コンパイルエラー
console.log(privateString); // コンパイルエラーと ReferenceError エラー

class MyClass {
  static myNumber: number = 123;

  // private アクセス修飾子を付けた静的メソッド
  private static getMyNummber() {
    return this.myNumber;
  }

  // 通常の静的メソッド
  static printMyNummber() {
    // クラス内からは private を付けた静的メソッドを参照できる
    console.log(this.getMyNummber());
  }
}

MyClass.printMyNummber(); // 123
// クラス外からは参照できない
const myNumber = MyClass.getMyNummber(); // コンパイルエラー
// Property 'getMyNummber' is private and only accessible within class 'MyClass'.

class MyClass {
  // 読み取り専用の静的プロパティ
  static readonly myNumber: number = 123;
}

console.log(MyClass.myNumber);  // 123
// 読み取り専用なので再代入できない
MyClass.myNumber = 456; // コンパイルエラー

class MyClass {

  static luckyNumber: number;

  static {
    this.luckyNumber = Math.floor(Math.random() * 10);
    if(this.luckyNumber > 5) {
      console.log('You are lucky today!')
    }
  }
}
console.log(MyClass.luckyNumber); // 乱数で生成された値が出力される

class クラス名<型引数> {
  // 定義の中で型引数を参照できます
}

class MyClass<T> {
  value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

// 使用例
const num = new MyClass<number>(34); // number
const str = new MyClass<string>("Hello, TypeScript!");; // string
const bool = new MyClass(true); // boolean（型パラメータを省略）

console.log(num.getValue()); // 34
console.log(str.getValue()); // Hello, TypeScript!
console.log(bool.getValue()); // true

class Queue<T> {
  private items: T[] = [];

  enqueue(item: T): void {
    // 配列（キュー） items の最後に受け取った要素を追加
    this.items.push(item);
  }

  dequeue(): T | undefined {
    // 配列 items の先頭の要素を取り除いて返す
    return this.items.shift();
  }

  getSize(): number {
    // 配列 items の長さを返す
    return this.items.length;
  }
}

// 使用例
const numberQueue = new Queue<number>(); // number 型のキュー
numberQueue.enqueue(1);
numberQueue.enqueue(2);
numberQueue.enqueue(3);

console.log(numberQueue.getSize()); // 3
console.log(numberQueue.dequeue()); // 1
console.log(numberQueue.getSize()); // 2

const stringQueue = new Queue<string>(); // string 型のキュー
stringQueue.enqueue("apple");
stringQueue.enqueue("banana");
stringQueue.enqueue("orange");

console.log(stringQueue.getSize()); // 3
console.log(stringQueue.dequeue()); // apple
console.log(stringQueue.getSize()); // 2

class List<T> {
  private items: T[] = [];

  add(item: T): void {
    this.items.push(item);
  }

  get(index: number): T | undefined{
    return this.items[index];
  }

  getAll(): T[] {
    return this.items;
  }
}

// 使用例
const numberList = new List<number>();
numberList.add(1);
numberList.add(2);
numberList.add(3);

console.log(numberList.get(1));  // 2
console.log(numberList.get(3));  // undefined
console.log(numberList.getAll()); // [1, 2, 3]


const stringList = new List<string>();
stringList.add("apple");
stringList.add("banana");
stringList.add("orange");

console.log(stringList.get(0));  // "apple"
console.log(stringList.getAll()); // ["apple", "banana", "orange"]

class User {
  name: string;
  age: number;

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

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

// User 型のオブジェクト
const bar: User = {
  name: 'bar',
  age: 25,
  greet(): string {
    return `Hello, I am ${this.name}.`;
  }
}

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

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

// Person 型のインスタンスの作成
const person: Person = new Person('Foo');

// Pet 型の変数 pet に Person 型のインスタンスが代入可能
const pet: Pet = person;

console.log(pet.name);  // Foo
console.log(pet);  // Person {name: 'Foo'}
console.log(pet instanceof Person); // true
console.log(pet instanceof Pet); // false

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

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

const person: Person  = new Person('Foo', 32);

const pet: Pet = person;

console.log(pet instanceof Person); // true
console.log(pet instanceof Pet); // false
console.log(person.age);  // 32
console.log(pet.age);  // コンパイルエラー
// Property 'age' does not exist on type 'Pet'.

class Person {
  name: string ;
  private age: number;  // private
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

class Pet  {
  name: string = ''
  private age: number;  // private
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const person: Person  = new Person('Foo', 32);

const pet: Pet = person;  // コンパイルエラー
// Type 'Person' is not assignable to type 'Pet'.
// Property 'age' is private in type 'Person' but not in type 'Pet'.

class Person<T> {
  name: string;
  data: T;
  constructor(name: string, data: T) {
    this.name = name;
    this.data = data;
  }
}
// 型引数を持つ型で型注釈
const foo: Person<string> = new Person('foo', 'some data');
// const foo = new Person('foo', 'some data'); // 型注釈は省略可能

// Person<string> 型のオブジェクト
const bar: Person<string> = {
  name: 'bar',
  data: 'bar data',
}

// Person<number> 型のオブジェクト
const baz: Person<number> = {
  name: 'baz',
  data: 123,
}

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

// 左辺の User は型名、右辺の User は変数名
const foo: User = new User('Foo', 22);

// 以下の User は変数名（JavaScript のクラスは関数オブジェクト）
console.log(typeof User);  // function

type コンストラクタの型 = new (引数リスト) => インスタンスの型;

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

type PersonCtor = new (name:string, age:number) => Person;

// PersonCtor 型の変数に Person クラス（のコンストラクタ）を割り当てられる（代入できる）
const ctor: PersonCtor = Person;
const person = new ctor('John Doe', 30);

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

type PersonCtor = new (name:string, age:number) => Person;

// 第1引数に PersonCtor 型のコンストラクタ関数を受け取る
function createPerson(ctor: PersonCtor, name: string, age: number): Person {
  return new ctor(name, age);
}

// 呼び出し時には第1引数に Person クラス（のコンストラクタ）を渡す
const person = createPerson(Person, 'John Doe', 30);
console.log(person.name, person.age); // John Doe 30

type PersonCtor = {
  new (name:string, age:number) : Person;
}

interface PersonCtor {
  new (name:string, age:number) : Person;
}

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

const foo = new Person('Foo', 22);

console.log(foo instanceof Person);  // true
console.log(foo instanceof Array);  // false
console.log(foo instanceof Object);  // true（全てのクラスは Object を継承）

const bar: Person = {
name: 'Bar',
age: 7
}

console.log(bar instanceof Person);  // false

function isInstanceOfPerson(person: Person): void {
  if(person instanceof Person) {
    console.log('Instance of Person');
  }else{
    console.log('Not instance of Person');
  }
}

isInstanceOfPerson(foo);  // Instance of Person
isInstanceOfPerson(bar);  // Not instance of Person

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}.`;
  }
}

class User extends Person {
  utype: string = 'basic';

  // 同じ名前で定義して上書き
  greet(): string {
    return `Hi, I'm ${this.utype} user.`;
  }
}

const bar = new Person('Bar', 33);
console.log(bar.greet());  // Hello, my name is Bar.

const baz = new User('Baz', 15);
console.log(baz.greet());  // Hi, I'm basic user.

class User extends Person {
  utype: string = 'basic';

  // 戻り値の型が異なるので異なるのでコンパイルエラー
  greet(): void {
    // Property 'greet' in type 'User' is not assignable to the same property in base type 'Person'. Type '() => void' is not assignable to type '() => string'.
    console.log( `Hi, I'm ${this.utype} user.`)
  }
}

class Parent {
  private name: string;  // private アクセス修飾子
  #age: number;  // プライベートプロパティ

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

class Child extends Parent {
  printName(): void {
    console.log(this.name);  // コンパイルエラー
    // Property 'name' is private and only accessible within class 'Parent'.
  }
  printAge(): void {
    console.log(this.#age);  // コンパイルエラーと Uncaught SyntaxError
    // Property '#age' is not accessible outside class 'Parent' because it has a private identifier.
  }
}

class Parent {
  protected name: string;
  protected age: number;

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

class Child extends Parent {
  printName(): void {
    console.log(this.name);
  }
  printAge(): void {
    console.log(this.age);
  }
}

const foo = new Child('foo',23);
foo.printName();  // foo
foo.printAge();  // 23
console.log(foo.name); // クラス外からアクセスするとコンパイルエラー
console.log(foo.age); // クラス外からアクセスするとコンパイルエラー

class Parent {
  protected name = 'foo';
  protected hello(): void {
    console.log("Hello!" + this.name);
  }
}

class Child extends Parent {
  public name = 'bar';  // public に変更（OK）
  public hello(): void {  // public に変更（OK）
    console.log("Hello!" + this.name);
  }
}

class クラス名 implements 型 {
  ...
}

// 実装する型（型エイリアスを使用したプロパティの指定）
type PersonType = {
  name: string;
  age: number;
};

// Person クラスが PersonType 型のプロパティを実装する
class Person implements PersonType {
  name: string;
  age: number;

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

// Person クラスのインスタンスを PersonType 型の変数に代入
const person: PersonType = new Person('Foo', 25);

console.log(person.name); // Foo
console.log(person.age);  // 25

type PersonType = {
  name: string;
  age: number;
};

class Person implements PersonType { // コンパイルエラー
  // Class 'Person' incorrectly implements interface 'PersonType'.
  // Property 'age' is missing in type 'Person' but required in type 'PersonType'.
  name: string;

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

// インターフェースの定義（実装する型）
interface PersonType {
  name: string;
  age: number;
}

// Person クラスが PersonType インターフェースを実装する
class Person implements PersonType {
  name: string;
  age: number;

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

// Person クラスのインスタンスを PersonType 型の変数に代入
const person: PersonType = new Person('Foo', 25);

// 実装する型（型エイリアスを使用したメソッドの指定）
type Shape = {
  getArea(): number;  // メソッドシグネチャ
};

/* //インターフェースで Shape を定義する場合
interface Shape {
  getArea(): number;
}; */

// Circle クラスが Shape 型を実装する
class Circle implements Shape {
  radius: number;
  constructor(radius: number) {
    this.radius = radius;
  }
  getArea(): number {
    return Math.PI * this.radius ** 2; // **（べき乗演算子）
  }
}

// Square クラスが Shape 型を実装する
class Square implements Shape {
  sideLength: number;
  constructor(sideLength: number) {
    this.sideLength = sideLength;
  }
  getArea(): number {
    return this.sideLength ** 2;
  }
}

// Rectangle クラスは Shape 型を実装しない
class Rectangle {
  width: number;
  height: number;
  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }
}

// 型エイリアスを実装したクラスのインスタンスを作成
const circle = new Circle(5);  // const circle: Shape = new Circle(5);
const square = new Square(4);  // const square: Shape = new Square(4);

// Rectangle クラスのインスタンスを作成
const rectangle = new Rectangle(3, 6);

// Shape 型の引数を受け取る関数
function logArea(shape: Shape) {
  console.log(`Area: ${shape.getArea()}`);
}

logArea(circle);   // OK
logArea(square);   // OK
logArea(rectangle); // エラー（Rectangle は Shape を実装していないため以下のエラー）
// Argument of type 'Rectangle' is not assignable to parameter of type 'Shape'.
// Property 'getArea' is missing in type 'Rectangle' but required in type 'Shape'.
// Uncaught TypeError: shape.getArea is not a function（JavaScript のエラー）