現場TypeScriptでReact開発「連載中③」

前回はJavaScript と共通の型 および特徴を説明しました。

①関数の型定義

関数の型定義を見ていこう。

TypeScriptでは戻り値の型は型推論が有効な場合に省略することもできるけど 、引数の型は必ず指定する必要がある。

function add(n: number, m: number): number { 
    return n + m;
}
console.log(add(2,4)); //6

const add = function(n: number, m: number): number { 
    return n + m;
};
console.log(add(5,7)); //12

const add = (n: number, m: number): number => n + m; 
const hello = (): void => {
    console.log('Hello!'); 
};
console.log(add(8,1)); //9
hello(); // Hello!

同じ関数 add() を上から宣言文、function キーワードによる関数式、アロー関数式で定義したも のですか。

引数も戻り値も、型アノテーションの構文は 3 つともほぼ同じです。

以上が関数における、引数と戻り値の型を別々に定義する記法。

これとは別に、引数と戻り値をまとめて定義する方法もある。
関数を『呼び出し可能オブジェクト』として定義する

interface NumOp {
    (n: number, m: number): number;
}
const add: NumOp = function (n, m) { 
    return n + m;
};
const subtract: NumOp = (n, m) => n - m;
console.log(add(1, 2)); // 3 
console.log(subtract(7,2)); //5

const add: (n: number, m: number) => number = function (n, m) { 
    return n + m;
};
const subtract: (n: number, m: number) => number = (n, m) => n - m;
console.log(add(3, 7)); // 10
console.log(subtract(10, 8)); // 2

前者がインターフェースとして呼び出し可能オブジェクトを定義し、それを関数式に適用したも の。

後者はそれをアロー型アノテーションによってインラインで行ってる

通常の関数ではあまりこの形式での定義は行わないけど、React でコンポーネントを 関数で定義するときは引数と戻り値の型をそれぞれ定義するのではなく、 React.FunctionComponent<P>として提供されている関数の型を適用することが多いです。

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

> const toArray = <T>(arg1: T, arg2: T): T[] => [arg1, arg2]; 
> toArray(8, 3);
[8,3]
> toArray('foo', 'bar'); 
[ 'foo', 'bar' ]
> toArray(5, 'bar');
[eval].ts:4:12 - error TS2345: Argument of type '"bar"' is not assignable to parameter of type

'number'.

これは『型引数(Type Parameter)』だ。