タイプスクリプトの機能を入力する決定的なガイド

執筆Oloruntobi Awoderu ✏️
JavaScriptは、世界で最も人気のあるプログラミング言語の一つであり、ウェブの言語です.しかし、それが強くタイプされないので、誤って我々のコードにバグを導入する可能性があります.ここはどこですTypeScript 入る.
TypeScriptはJavaScriptの厳密な型のサブセットです.そして、それは我々のアプリケーションのためのタイプガードを作成するために必要なツールを提供します.関数はJavaScriptとTypesScriptの両方の主なパラダイムの1つであり、どのアプリケーションのビルディングブロックでもある.したがって、タイプスクリプトの開発者は、日々の作業において厳密に型付けされた関数をどのように構築し、使用するかを理解することが不可欠です.
この記事は、強く型付けされた関数の作成と使用方法に関するガイドです.私たちは多くの機能を使用します.

内容

Prerequisites

Why typed functions are important

Creating functions and type guards

Typed arrow functions

Asynchronous typed functions

Optional parameters

Function overloads

Statically typing constructors

Conclusion

必要条件

このチュートリアルに従うには、次のようになります.

JavaScriptとタイプスクリプトの知識

TypeScriptをローカルマシンにインストールすることで、スクリプトの例を走らせることができますofficial TypeScript playground

なぜタイプされた関数が重要か

アプリケーションを構築するとき、私たちの目的は常にそれらを安定した、信頼性の高い、利用可能な、維持可能で、スケーラブルにすることです.タイプされた機能を持って、使用することは、我々がその最終的なゴールに近づくのを助けます.
タイプされた機能は、我々がタイプガードなしで見逃すかもしれないバグを捕えるのを助けます.Typescriptと拡張型型付き関数によって、多くの企業が製品を出荷するバグを減らすのを助けました.

関数と型ガードの作成

このセクションでは、関数を作成し、それらに型ガードを追加します.
以下はシンプルな関数ですsubtraction :

function subtraction(foo, bar){
  return foo -  bar;
}

このsubtraction 関数は2つのパラメータを取ります:foo and bar , を返します.
私たちのtypescript遊び場の中でこのコードをペーストするとき、私たちは潜在的なタイプのany .

以下に示すように、パラメータを型に追加する必要があります.

function subtraction(foo: number, bar: number){
  return foo -  bar;
}

私たちはnumber 上記のパラメータを入力します.これは、パラメータが数値であることを確認します.この関数に数値ではないパラメータを割り当てるようにしようとすると(以下のように)、エラーが発生します:Argument of type 'string' is not assignable to parameter of type 'number' :

subtraction(10, 'string')

typescriptは、paramsの型から戻り値の型を暗黙的に認識しますが、戻り値に型を追加することもできます.以下に例を示します.

function subtraction(foo: number, bar: number): number{
  return foo -  bar;
}

また、型インターフェイスを使用して関数を宣言することもできます.ここでは、関数に渡すための属性インターフェイスを宣言します.

interface Attribute {
  age: number,
  sentence: string
}

function personality(attribute: Attribute): string{
  return `${attribute.sentence} ${attribute.age}`;
}

const attribute: Attribute = {
  age: 18,
  sentence: "My age is"
}

const getPersonality = personality(attribute);

我々がこのコードを我々のtypescript遊び場にペーストするならば、我々はそれが我々のタイプチェックを通過するのを見ます、そして、エラーは示されません.

型付き矢印関数

今型の矢印関数を、どのようにそれらを作成するにしましょう.矢印関数に型を追加する構文は、通常の関数と非常によく似ています.
最後の関数を矢印関数にリファクタリングし、タイプガードを適用します.

interface Attribute {
  age: number,
  sentence: string
}

const personality = (attribute: Attribute): string => {
  return `${attribute.sentence} ${attribute.age}`;
}

const attribute: Attribute = {
  age: 18,
  sentence: "My age is"
}

const getPersonality = personality(attribute);

通常の関数に適用される規則は、矢印関数にも適用されます.

非同期型関数

正常と矢印の関数の作成方法を学んだので、非同期型の関数を作成する方法を見ていきます.非同期関数と通常の関数との間には違いがあります.Promise<T> ジェネリック.
このジェネリックはpromise を返します.<T> 約束が解決する値の型を表します.以下は型付け非同期関数の例です.

interface Fruit {
  id: number,
  name: string
}

const fruits: Fruit[] = [
  {id: 1, name: "apple"},
  {id: 2, name: "Orange"}
]

async function getFruitById(fruitId: number): Promise<Fruit | null> {
  const findFruit = fruits.find(fruit => fruit.id === fruitId);
  if(!findFruit) return null;
  return findFruit;
}

async function runAsyncFunction() {
  const getFruit = await getFruitById(1);
}

上の例では、fruit paramsの型を扱うインターフェイスです.また、我々はgetFruitById 関数を設定し、return 種類Promise ジェネリックFruit or null 戻り値の型として.最後に、私たちはgetFruitById への呼び出しrunAsyncFunction , ファイルのトップレベルで待機することはできません.

別のasync関数でラップしてこのエラーを修正します.

オプションパラメータ

私たちは、型付けされたパラメータを上記の例から型付けされた関数に渡す方法を見ました、しかし、これらのケースは我々が各々のパラメタの数と正確なタイプについて確信している例をカバーするだけです.私たちが確信していない時代があり、そのような状況にも対処する必要があります.

interface Fruit {
  id: number,
  name: string | null ,
  type?: string
}

上記はインターフェイスを使用して任意のパラメータを宣言する例です.The name paramは型を持つ値を取ることができますstring or null .
我々は? 作るtype paramオプションです.この関数はparamを関数に渡す必要はありません.
以下のように、関数の内部に直接paramsとtypesを宣言することもできます.

function returnUser(firstName: string, lastName?: stringl) {
  return `My name is ${firstName} ${lastName}`;
}

上の例ではfirstName paramが必要ですlastName paramは渡されませんが、渡された場合はstring .
残りのパラメータの型も定義できます.RESTパラメータは多くのパラメータを関数に一つの配列として渡すJavaScriptの機能です.以下の例を示します.

function addition(...args: number[]) {
  let result: number = 0;
  for(let i = 0; i < args.length; i++){
    result += args[i];
  }
  return result;
}

The args paramはnumber 種類これは私たちをチェックするのに役立ちますargs paramsを使用して、型のないparamを渡すことを防ぎますNumber 下記のイメージで見られるように.

渡されたparamの型が数値でない場合、TypeScriptコンパイラはエラーをスローします.

関数のオーバーロード

引数の数と型は、特定のJavaScript関数を呼び出すときに変更できます.例は、ユーザ(1つの引数)または電話番号(1つの引数)またはアドレスと名前(2つの引数)の組合せからユーザを返す関数を書くでしょう.
typescriptのオーバーロード署名は、関数を複数の方法と呼ぶことができます.これはいくつかの関数シグネチャ(通常2つ以上)を書くことによって達成されます.

interface User {
  id: number;
  phoneNumber: string;
  fullName: string;
  address: string;
};

const users: User[] = [
  { id: 1, phoneNumber: "08100000000", fullName: "First User" , address: "Santa fe, florida" },
  { id: 2, phoneNumber: "08111111111", fullName: "Second User", address: "San Fransisco, California" }
];

function getUser(id: number): User | undefined;
function getUser(phoneNumber: string): User | undefined;
function getUser(address: string, fullName: string): User | undefined;

function getUser(idOrPhoneNumber: number | string, address?: string): User | undefined {
  if (typeof idOrPhoneNumber === "string") {
    return users.find(user => user.phoneNumber === idOrPhoneNumber);
  }

  if (typeof address === "string") {
    return users.find(user => user.address === address);
  } else {
    return users.find(user => user.id === idOrPhoneNumber);
  }
}

const userById = getUser(1);
const userByPhoneNumber = getUser("08100000000");
const userByAddress = getUser("San Fransisco, California", "Jon Doe");

上記のコードでは、UI内の関数に渡される入力パラメーターと型を宣言します.さらに、2つのオーバーロードは1つの引数を受け入れます、一方、オーバーロードは2つの引数を受け入れます;これらは過負荷署名と呼ばれます.
次に、互換性のある署名を持つ機能の実装を開発した.各関数は実装シグネチャを持ちますが、このシグネチャを直接呼び出すことはできません.

静的タイピングコンストラクタ

クラスコンストラクターは、異なる型、既定値、およびオーバーロードでパラメーターを追加できるという意味で、関数と非常によく似ています.また、デフォルト値またはオーバーロードで通常の署名を使用してコンストラクターを入力できます.
オーバーロードを持つ通常の署名

    class Example {
      a: number;
      b: number;

      constructor(a = 1, b  = 4) {
        this.a = a;
        this.b = b
      }
    }

オーバーロード:

class Example {
          constructor(a:number, b:string);
     constructor(xs: any, y?: any) {
          }
}

型指定された関数と型指定されたコンストラクタの間には、いくつかの違いがあります.

型付きコンストラクターは、クラスインスタンスが常に返されるものとして、注釈を入力できません

型指定されたコンストラクタは、型クラスを持つことができません

結論

この記事では、型付けされた関数の様々な型を使いました.入力された関数は、セーフガードを作成し、非常に信頼性が高く、デバッグが容易なコードを作成するのに役立ちます.私は、この記事があなたによりタイプされた機能がタイプスクリプト開発者として理解するのに不可欠である理由とより速く、より安全で、より良いタイプスクリプトアプリケーションを構築するのを助けることができる情報のためにあなたにもう少し文脈を与えたことを望みます.

多くのタイプスクリプトを書くこと？より多くの読みやすいコードを書くことについて学ぶために、我々の最近のtypescript meetupの記録を見てください。

タイプスクリプトはJavaScriptにタイプセーフをもたらします.タイプセーフと読みやすいコードの間に緊張がある.TypeScript 4.4のいくつかの新機能に深いダイビングのための記録を見る.