Zenn
Open2

【TypeScript】備忘録

JavaScript
Node.js
TypeScript
heyhey1028heyhey1028

typescriptから遠ざかったり、また近づいたりでよく記法を忘れるので、改めて。

class定義

class クラス名 {
  // プロパティ宣言
  プロパティ名1: プロパティの型;
  プロパティ名2: プロパティの型;
  …

  // コンストラクタ
  constructor(引数1: 引数の型, 引数2: 引数の型, …) {
    // コンストラクタの本体
    this.プロパティ名1 = 引数1;
    this.プロパティ名2 = 引数2;
    …
  }

  // メソッド1
  メソッド名1(引数1: 引数の型, 引数2: 引数の型, …): 戻り値の型 {
    // メソッド1の本体
  }

  // メソッド2
  メソッド名2(引数1: 引数の型, 引数2: 引数の型, …): 戻り値の型 {
    // メソッド2の本体
  }

  …
}

interface定義

  • javascriptにはない概念
  • オブジェクトが実装すべきプロパティやメソッドを定義するもの
  • インターフェースは、オブジェクトを生成することはできない
  • 代わりに、別のクラスやオブジェクトがインターフェースを実装(implement)することで、そのインターフェースを満たすことができる
interface Shape {
  area(): number;
}

class Rectangle implements Shape {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  area(): number {
    return this.width * this.height;
  }
}

const rectangle = new Rectangle(3, 4);
console.log(rectangle.area()); // 12

type型

  • 型を定義することができる
  • type型は、型を定義するためのものであり、実際には、型を持つ値を生成することはできない
  • type型を使用すると、既存の型を拡張したり、複数の型を組み合わせたりすることができる
type NumberOrString = number | string;

const value: NumberOrString = 100;
console.log(value); // 100

const value: NumberOrString = "hello";
console.log(value); // "hello"

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

type Admin = User & {
  isAdmin: boolean;
};

const user: Admin = {
  name: "Alice",
  age: 20,
  isAdmin: true
};

参考

https://qiita.com/yukiji/items/3db06601ece7f080b0d0

heyhey1028heyhey1028

記法TIPS

オブジェク内のフィールドをそれぞれ変数に展開する

interface Data{
  userID: string
  orderID: string
}

functions myFunc(data: Data ){
   const { userID, orderID } = data
   const user = getUser(userID)
}

for..inとfor..ofの違い

for..inループとfor..ofループの違いは、回すオブジェクトの種類

for..inループは、オブジェクト内のプロパティを回すのに使用（オブジェクト、配列、文字列など）

Copy
Insert
New
let myObj = { a: 1, b: 2, c: 3 };

for (let key in myObj) {
  console.log(myObj[key]);
}

一方、for..ofループは、イテラブルなオブジェクト（配列など）を回すのに使用

Copy
Insert
New
let myArray = [1, 2, 3, 4];

for (let element of myArray) {
  console.log(element);
}