JavaScriptを使うにあたって関数は必要不可欠です。今日はTypeScriptの関数について紹介します。
特に関数の引数のデフォルト値の設定の仕方、使われていないローカル変数の検知、returnで必ずデータが返ってきているか確認できるフラグは今後のコーディングに役に立つはずです。
今までの記事を確認してから今日のレッスンを理解することをお勧めします。
function:関数
ではテキストエディタを開いて.tsファイルに下記の様に関数を作成してみましょう。
function salesTax(price: number) {
}
//function salesTax(price: number): void
ここで関数をカーソルでホバーすると上記のコメントのように:voidという表示が出てきました。voidはこの関数が値を返さないことを意味しています。
では下記の様にreturnを使って値を返してみます。
function salesTax(price: number) {
return price * 0.10
}
//function salesTax(price: number): number
そうするとnumberのデータタイプの値が返ってくることが分かりますね。
さらに関数()：numberとreturnの値のデータタイプを指定することでデータタイプを制限することができます。
function salesTax(price: number):number {
return price * 0.10
}
引数が使われていない場合のエラー表示
では、tsconfig.jsonファイルを見て、下記の行のコメントアウトを外してください。
"noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
このフラグを立てることで、関数の引数が使われていない場合にエラーを表示させることができます。
function salesTax(price: number):number {
return 0.10
}
//(parameter) price: number
//'price' is declared but its value is never read.ts(6133)
return値を必ず返したい場合
次に、if構文なのでnumberデータが返ってくる時と返ってこないときにエラーを表示させたい場合にはどうすればよいでしょうか？
下記の例を見てください。
function salesTax(price: number) {
if (price < 100)
return 0.1;
}
//function salesTax(price: number): 0.1 | undefined
この場合だと、priceが100よりも小さい場合は0.1を返しますがそれ以外の場合はundefinedを返します。
このようなエラーを防ぐには、tsconfig.jsonのnoImplicitReturnsをtrueにしてあげます。
"noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
これでエラーが表示されるようになりました。
function salesTax(price: number) {
if (price < 100)
return 0.1;
}
//function salesTax(price: number): 0.1 | undefined
//Not all code paths return a value.ts(7030)
使われていないローカル変数を検知する
次に関数ないやブロック内で使われていない変数があった場合にエラーを表示させたい場合です。
この場合、tsconfig.jsonのnoUnusedLocalsをtrueに設定します。
これを使用することで、使われていない変数を検知して、無駄な変数の削減をすることができます。
"noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
このようにエラーが出るようになりました。
function salesTax(price: number) {
let x = 0;
//let x: number
//'x' is declared but its value is never read.ts(6133)
return price * 0.1;
}
因数がオプショナルの場合
では下記の関数を見てみましょう。
function totalPrice(price: number, discount: number): number {
let tax = price * 0.1
return price + tax - discount;
}
totalPrice(100, 20, 10)
//Expected 2 arguments, but got 3.ts(2554)
totalPrice(100)
//Expected 2 arguments, but got 1.ts(2554)
//index.ts(1, 36): An argument for 'discount' was not provided.
このようにtotalPrice関数を実行する際に2つの引数（argument）が必要になりますが、足りない場合でも、多い場合でもエラーが出ます。
しかし、ご存じの通り、JavaScriptではこれはあり得ることで、引数がオプショナルの場合はこのように使用することも考えられます。
その場合は下記の様に引数に?を追加して、あった場合は使うという指示をします。
function totalPrice(price: number, discount?: number): number {
let tax = price * 0.1;
return price + tax - (discount || 0);
}
totalPrice(100);
totalPrice(100, 20);
さらに(discount||0)のようにdiscountとorオペレーターで記載しておき、もしdiscountがなかったら0を使うように指示します。
さらに！より良い書き方として、このdiscountにデフォルト値を設定することができます。
このように引数に=でデフォルト値を割り当てます。
function totalPrice(price: number, discount = 0): number {
let tax = price * 0.1;
return price + tax - discount;
}
では今日はTypeScriptの関数の書き方について紹介しました。
お疲れ様です。