Typescript勉強ノート#3_More on Functions

はじめに

Typescriptを使いこなせるようになるためにドキュメントを読んで勉強する。
typescript Documentation: https://www.typescriptlang.org/docs/handbook/intro.html
自分用なのであるていど把握できていると思う部分はスキップしていく。

今回は、ドキュメントのMore on Functionsを参考にしてまとめる。
https://www.typescriptlang.org/docs/handbook/2/functions.html

Construct Signatures

オブジェクト型にnew演算子使用して呼び出せる。
型定義ファイルで登場するらしい。（あまりわかってないのでわかってきたら追記）

type SomeConstructor = {
  new (s: string): {};
};
function fn(ctor: SomeConstructor) {
  return new ctor('hello');
}
class Fuga {
  name: string;
  constructor(name) {
    this.name = name;
  }
}
const ctor = Fuga;
console.log(fn(ctor)); // {naem:"hello"}

Generic Functions

処理が同じで型だけ違う場合にany型ではなくちゃんと型付けできるようにする仕組み。
Tという関数が実行されるまで未定の型を使うことを書く。
書く場所は引数の前に<>で囲む。

const firstElement = <T>(arr: T[]): T | undefined => {
  return arr[0];
};
const s = firstElement(["a", "b", "c"]);
const n = firstElement<number>([1, 3]);
// const n = firstElement<string>([1, 3]); これはタイプエラー

配列や文字列の長さを返すようにしたいときに、単にsample1のようにするとTは型が定まっていないため'length' は型 'T'にはないと言われる。そこでextendsを使ってsample2のようにする。このようにすると、lengthのメソッドを持っている型のみを受け入れるようになる。同様にあるメソッドを使いたいときはこのように型を制限することで利用できる。

sample1

const longest = <T>(a: T, b: T) => { 
  if (a.length >= b.length) {
      ・・・

sample2

const longest = <T extends { length: number }>(a: T, b: T) => {
  if (a.length >= b.length) {
    return a;
  } else {
    return b;
  }
};

const longerArray = longest<number[]>([1, 2], [1, 2, 3]);

Function Overloads

一番下には大本となる関数を記述する。その関数の上に異なる引数の関数を書くことで引数の条件を増やすことができる。

function fn(x: string, y: string): string;
function fn(x: number): string;
function fn(x: string | number, y?: string) {
  return "message";
}

fn("hoge", "fuga");
fn("hoge"); // error
fn(1);

Rest Parameters and Arguments

Rest parameters

...を使うと制限なく値を指定することができる。
また、1,2,3,4 で指定したものを[1,2,3,4]に変換してくれる。

const multiply = (n: number, ...m: number[]) => {
  return m.map((x) => n * x);
};
const a = multiply(10, 1, 2, 3, 4); // n->10 , m-> [1,2,3,4]
const b = multiply(10, [1, 2, 3, 4]); // error

Spread syntax

...を使うと、[4,5,6] の配列を分割して4, 5, 6のようにできる。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2); // arr1 -> [1,2,3,4,5,6]

オブジェクトの場合も一緒

interface Profile {
  name: string;
  age?: number;
}

const risa: Profile = {
  name: "risa",
  age: 20,
};

const show = (profile: Profile) => {
  console.log({ ...profile, like: "apple" }); // { name: 'risa', age: 20, like: 'apple' }
  console.log({ profile, like: "apple" }); // { profile: { name: 'risa', age: 20 }, like: 'apple' }
};

show(risa);

おわり

次はObject Typeに進む！！