1. 概要

このシリーズでは、TypeScriptの入門教材としてサバイバルTypeScriptで学習し、個人的に重要だと思った箇所を備忘録として記事に記載しています。

今回の記事では、第四章読んで学ぶTypeScriptを題材に、TypeScriptの文、関数を学んでいきます。

2. 文

2.1. 例外処理(exception)

2.1.1. throw構文

throw構文を使うことで任意のタイミングで例外をスローすることが出来ます。一般的にはErrorオブジェクトを投げます。

throw new Error("network error!");

2.1.2. try-catch構文

try-catch構文を使うことで、例外を捉えることが出来ます。例外が投げられる可能性がある部分をtryで囲み、catchブロックで捉えた例外に対する処理を行います。

try {
  throw new Error("something wrong");
} catch (e) {
  console.error(e);
}

3. 関数

3.1. アロー関数

アロー関数を使うと、文を短く書くことが出来ます。例えば、以下のような関数式があった場合、

const increment = function (n) {
  return n + 1;
};

アロー関数を用いて書くと、以下のようになります。

const increment = (n) => {
  return n + 1;
};

また、引数が1つの場合や、関数内のコードが式1つのみの場合は更に省略する事ができます。 ※ ただし、引数なしの場合には()を省略することは出来ません。

const increment = n => n + 1;

アロー関数に型注釈をつける場合は以下のようになります。注意点として、戻り値の型注釈はアロー記号の左辺に付きます。

const increment = (num: number): number => num + 1;

3.2. 関数はオブジェクト

JavaScriptの関数はオブジェクトであるため、プロパティを持たせることが出来ます。

function hello() {
  return "Hello World";
}
 
hello.prop = 123;

3.3. 関数の引数

JavaScriptでは引数の数をチェックしていません。例えば、引数を2つ渡すことが期待されている関数に対して、引数1つで呼び出してもエラーにはなりません。その際、渡されなかった引数の値はundefinedになります。

3.4. 値渡し

JavaScriptでは参照渡しの機能はありません。関数の引数はすべて値渡しになります。

3.5. デフォルト引数(default parameter)

引数の値がundefinedのときに、代わりとなるデフォルト引数を設定することが出来ます。引数の右に=とデフォルト値を記載します。

function foo(x = 1) {
  console.log(x);
}
foo();

また、デフォルト値には式や関数呼び出しを書くことも出来ます。

function foo(x = parseInt("1.5")) {}

4. クラス

4.1. コンストラクタ

クラスがインスタンス化される際に実行される関数です。constructor構文を使って以下のように記載します。型注釈を行う場合には、関数と同様の書き方が出来ます。

class Person {
  constructor(name: string) {
    // ...
  }
}

コンストラクタに引数を渡したい場合は、new演算子の実行時に指定をします。

new Person("Alice");

4.2. フィールド

TypeScriptでは、クラス宣言に書かれていないフィールドへアクセスした場合、コンパイルエラーとなります。そのため、以下のように予めフィールド定義を記載する必要があります。

class Person {
  name: string;
}
const alice = new Person();
alice.name = "Alice";

4.3. メソッド

クラス内メソッドの引数と戻り値に型注釈を行う場合、以下のような書き方になります。

class Greeter {
  greet(name: string): string {
    return `Hello, ${name}!`;
  }
}

4.4. フィールドの初期化子

TypeScriptでは、クラス内のフィールド名の右に=値と記載することで、初期値を指定することが出来ます。この値は、クラスがインスタンス化されるときに自動実行されます。

class Point {
  x: number = 0;
  y: number = 0;
}
const point = new Point();
console.log(point.x, point.y);

4.5. アクセス修飾子

TypeScriptでは、フィールドやメソッドにアクセス修飾子を付けることで、アクセス可能な範囲を限定することが出来ます。

アクセス修飾子	説明
(宣言無し)	publicと同等
public	どこからでもアクセス可能
protected	自身のクラスとサブクラスからアクセス可能
private	自身のクラスのみアクセス可能

以下のように、宣言時にアクセス修飾子を記載します。

class Animal {
  public name: string; 
  public constructor(theName: string) {
    this.name = theName;
  }
}

4.6. readonly修飾子

TypeScriptでは、フィールドにreadonly修飾子を付けることで、読み取り専用にすることが出来ます。読み取り専用フィールドは、コンストラクタもしくは初期化子でのみ値を代入することが出来ます。

class Octopus {
  readonly name: string;
  readonly legs = 8;
 
  constructor() {
    this.name = "たこちゃん";
  }
}

4.7. クラスの継承

extendsキーワードを使うことでクラスを継承することが出来ます。サブクラスにコンストラクタを記載する場合、スーパークラスのコンストラクタは必ず呼び出す必要があります。super()で呼び出すことが出来ます。

class Parent {}
class Child extends Parent {
  constructor() {
    super();
  }
}

5. おわりに

今回の記事では、第四章読んで学ぶTypeScriptを題材に、TypeScriptの文、関数を中心に学びました。

これまで7回に分けて学んできたサバイバルTypeScriptシリーズですが、一通り目を通すことは出来たので、この記事までで一旦終了とし、次回からは別の題材で学んでいこうと思います。

長いことお付き合いいただきありがとうございました。

6. 参考

https://typescriptbook.jp/

けにぶろぐ

サバイバルTypeScript勉強備忘録7（TypeScriptの文、関数、クラス）

目次