TypeScriptにおける組み込み関数
この記事ではTypeScriptにおける組み込み関数について説明します。
YouTube Video
TypeScriptにおける組み込み関数
TypeScriptの組み込み関数は、日常的に行う操作を簡潔に実行するために提供されている便利な関数です。これらはJavaScriptの標準的な関数に型安全性が追加されたもので、TypeScriptでコーディングする際に特に有用です。ここでは、いくつかの重要な組み込み関数とその使用方法、またその型の指定について詳細に解説します。
組み込み関数とは？
TypeScriptの組み込み関数は、JavaScriptで利用できる標準的な関数に基づいており、これらにTypeScriptの型システムを適用することで、型チェックや補完が強化されています。主な関数には以下のものが含まれます。
parseInt()parseFloat()isNaN()isFinite()Number()String()Array()Array.isArray()eval()encodeURI()decodeURI()setTimeout()setInterval()
これらの関数はTypeScriptプロジェクトで幅広く使われ、データの変換や判定を簡潔に行えます。
parseInt()
parseInt()は、文字列を整数に変換するための関数です。2つ目の引数として基数（2進数、10進数など）を指定できます。TypeScriptでは以下のように型を指定できます。
1function stringToInt(value: string, radix: number = 10): number {
2 const result: number = parseInt(value, radix);
3 if (isNaN(result)) {
4 throw new Error('Invalid number format');
5 }
6 return result;
7}
8
9console.log(stringToInt("42")); // 42
10console.log(stringToInt("101010", 2)); // 42 (converted from binary)
value: stringで入力が文字列であることを指定- 戻り値は
number型として明確に指定されています。
parseFloat()
parseFloat()は、文字列を浮動小数点数に変換するための関数です。
1function stringToFloat(value: string): number {
2 const result: number = parseFloat(value);
3 if (isNaN(result)) {
4 throw new Error('Invalid number format');
5 }
6 return result;
7}
8
9console.log(stringToFloat("3.14")); // 3.14
10console.log(stringToFloat("2.71828")); // 2.71828
parseFloat()は小数点を含む数値も正しく解析します。- 型の指定により、数値以外の入力があれば型チェック時に警告を受けることができます。
isNaN()
isNaN()は、与えられた値が NaN（Not-a-Number）かどうかを判定する関数です。TypeScriptでの使用例は以下の通りです。
1function checkNaN(value: unknown): boolean {
2 return isNaN(Number(value));
3}
4
5console.log(checkNaN("hello")); // true
6console.log(checkNaN(123)); // false
unknown型は、あらゆる型を受け入れる汎用型です。Number()関数で数値に変換し、結果がNaNかどうかを確認します。
isFinite()
isFinite()は、値が有限かどうかを判定します。
1function isValueFinite(value: unknown): boolean {
2 return isFinite(Number(value));
3}
4
5console.log(isValueFinite("100")); // true
6console.log(isValueFinite(Infinity)); // false
- この関数も
Number()を使って、値を数値に変換してから判定しています。
Number()
Number()関数は、文字列やブール値などを数値に変換します。
1function convertToNumber(value: string | boolean): number {
2 return Number(value);
3}
4
5console.log(convertToNumber("42")); // 42
6console.log(convertToNumber(true)); // 1
- この例では、
string | booleanというUnion型を使用し、引数が文字列かブール値であることを指定しています。
String()
String()関数は、数値やブール値を文字列に変換します。
1function convertToString(value: number | boolean): string {
2 return String(value);
3}
4
5console.log(convertToString(123)); // "123"
6console.log(convertToString(false)); // "false"
- この例では、
number | boolean型のUnionを受け入れ、結果を文字列に変換する関数を作成しています。
Array()
Array()関数は、新しい配列を作成するために使用されます。また、既存の配列からサブ配列を作成したり、特定の要素を取り出すための多くの便利なメソッドが提供されています。
1function createArray(): Array<number> {
2 return Array(1, 2, 3, 4, 5); // 新しい配列を作成
3}
4
5function getSubArray(array: Array<number>): Array<number> {
6 return array.slice(1, 4); // サブ配列を作成
7}
8
9const numbers = createArray();
10console.log(numbers); // [1, 2, 3, 4, 5]
11
12const subArray = getSubArray(numbers);
13console.log(subArray); // [2, 3, 4]
- この例では、
Array()関数を使用して新しい配列を作成し、slice()メソッドでサブ配列を作成する方法を示しています。
Array.isArray()
Array.isArray()は、与えられた値が配列かどうかを判定します。
1function checkArray(value: unknown): boolean {
2 return Array.isArray(value);
3}
4
5console.log(checkArray([1, 2, 3])); // true
6console.log(checkArray("Not an array")); // false
unknown型を使用して、任意の型を受け入れつつ、配列かどうかをチェックしています。
eval()
eval()関数は、文字列を式として評価し、その結果を返します。ただし、セキュリティやパフォーマンス上のリスクがあるため、使用は推奨されません。
1function evaluateExpression(expression: string): any {
2 return eval(expression);
3}
4
5console.log(evaluateExpression("2 + 3")); // 5
6console.log(evaluateExpression("'Hello ' + 'World!'")); // "Hello World!"
- この例では、文字列で与えられた式を
evalで評価し、その結果を出力しています。
encodeURI()
encodeURI()関数は、URL全体をエンコードして特定の文字をエスケープします。
1const uri = "https://example.com/page?name=John Doe&age=30";
2const encodedURI = encodeURI(uri);
3
4console.log(encodedURI); // "https://example.com/page?name=John%20Doe&age=30"
- この例では、スペースを
%20にエンコードして安全なURLを生成しています。
decodeURI()
decodeURI()関数は、エンコードされたURLを元の形式にデコードします。
1const encodedURI = "https://example.com/page?name=John%20Doe&age=30";
2const decodedURI = decodeURI(encodedURI);
3
4console.log(decodedURI); // "https://example.com/page?name=John Doe&age=30"
- この例では、エンコードされたURL文字列をデコードして元のURLに戻しています。
setTimeout()
setTimeout()関数は、指定した遅延時間（ミリ秒）後に特定の関数を実行します。
1setTimeout(() => {
2 console.log("Executed after 2 seconds");
3}, 2000);- この例では、2秒後にメッセージを表示しています。
setInterval()
setInterval()関数は、指定した間隔（ミリ秒）で特定の関数を繰り返し実行します。
1let count = 0;
2const intervalId = setInterval(() => {
3 count++;
4 console.log(`Interval executed ${count} time(s)`);
5 if (count === 3) {
6 clearInterval(intervalId); // Stops the interval after 3 executions
7 }
8}, 1000);- この例では、1秒間隔でメッセージを表示し、3回実行後に停止します。
結論
TypeScriptの組み込み関数は、JavaScriptの標準的な関数に型安全性を追加することで、より安全で効率的なコーディングを可能にしています。これらの関数は日常的なプログラミングのタスクをシンプルにし、コードの可読性と保守性を向上させます。各関数は用途に応じて正しく使用され、型指定によって事前にエラーを検知することができ、開発プロセスの信頼性を高める重要な役割を果たします。
TypeScriptを使うことで、静的型付けの恩恵を受けつつ、JavaScriptの柔軟さを活かした開発が可能です。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。