💡

TypeScript入門【関数・クラス編】

2021/10/24に公開

TypeScript

Web

メモ

tech

今回はTypeScriptにおける、関数の型定義とクラスについて解説していきます。

関数の型定義

まず、TypeScriptでは戻り値の型は型推論が有効な場合には省略もできます。

ただ、引数の型は必ず指定する必要があります。

また、返り値を何も返さない時はvoidという型を指定します。


function add(n: number, m: number): number {
  return n + m;
}
const hello = (name: string): void => {
  console.log({ name } + "Hello!");
};

またこれとは別に、引数と戻り値をまとめて定義する方法もあります。


const add: (n: number, m: number) => number = function (n, m) {
  return n + m;
};
const subtract: (n: number, m: number) => number = (n, m) => n - m;

最後に、関数の型宣言にジェネリクスを用いる記法を説明します。

型引数を用いて表現するデータ構造のことをジェネリクスと呼びます。


// ジェネリクスを使用した型定義
const toArray = <T>(arg1: T, arg2: T): T[] => [arg1, arg2];

console.log(toArray("firstName", "lastName"));
// エラー Argument of type 'number' is not assignable to parameter of type 'string'.
console.log(toArray("a", 1));

引数の一つ目の型がTに代入されます。

つまり、引数の1つ目がstringだった場合は、(arg1: string, arg2: string): string[]になるということです。

型引数の名前に大文字1文字を使うのは、他の言語でも共通してる慣例です。

ひとつめがtypeの頭文字Tで、２つめがアルファベット順にUのこともあれば、意味を持たせてkeyの頭文字でKのように使うこともあります。

クラス

次にTypeScriptにおける、クラスについて説明していきます。

基本的にはJavaScriptと同じですが、いくつか違う点もあります。

まず、ES2015のクラス構文ではコンストラクタ内にその記述があることでメンバー変数が生成されるので、特に変数の定義をする必要はないです。

いっぽうで、TypeScriptではメンバー変数は、クラスの最初でその宣言をしておく必要があります。

クラスの型定義にはimplementsキーワードを使用します。


interface rectangle {
  sideA: number;
  sideB: number;
}

class Rectangle implements rectangle {

  // tsでは最初に宣言する必要がある
  sideA: number;
  sideB: number;

  constructor(sideA: number, sideB: number) {
  this.sideA = sideA;
  this.sideB = sideB;
  }
}

また、宣言時に修飾子を付けることで、そのメンバー変数に個性を与えることができます。

readonly(変更不可)
Public(自クラス、子クラス、インスタンスすべてからアクセス可能)デフォルト
protected(自クラスおよび子クラスからアクセス可能。)
private(自クラスからのみアクセス可能)

ちなみに、abstract修飾子を用いて抽象クラスを定義ことができますが、あまり使っている現場は多くないと思います。

また、他に知っておいて欲しいこととして、TypeScriptでクラスを定義すると実際には2つの宣言が同時に実行されています。

ひとつはそのクラスインスタンスのインターフェース型宣言。

もうひとつはコンストラクタ関数の宣言です。

これを知っていないと混乱することが出てくると思うので、頭の片隅に置いておいてください。

おわりに

今回はTypeScriptの関数とクラスについて説明してきました。

これを理解していないとTypeScriptは使えないので、この機会にしっかりとおさえましょう。
最後に宣伝です。

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。
YouTubeのvideoIDが不正です

インスタの発信も細々とやっています。

興味がある方は、ぜひリンクをクリックして確認してみてください！

おわり

関数の型定義

クラス

おわりに

Discussion