타입스크립트 내장 함수
이 글은 타입스크립트의 내장 함수에 대해 설명합니다.
YouTube Video
타입스크립트 내장 함수
타입스크립트의 내장 함수는 일상적인 작업을 간결하게 수행할 수 있도록 제공되는 편리한 함수입니다. 이는 표준 JavaScript 함수에 타입 안정성이 추가된 것으로, TypeScript로 코딩할 때 특히 유용합니다. 여기에서 중요한 내장 함수들과 그 사용 방법 및 타입 정의에 대해 자세히 설명하겠습니다.
내장 함수란 무엇인가?
타입스크립트의 내장 함수는 표준 JavaScript 함수에 기반을 두고 있습니다. 타입스크립트의 타입 시스템을 적용하면 타입 검사와 자동 완성이 향상됩니다. 주요 함수는 다음을 포함합니다:.
parseInt()parseFloat()isNaN()isFinite()Number()String()Array()Array.isArray()eval()encodeURI()decodeURI()setTimeout()setInterval()
이 함수들은 간결한 데이터 변환 및 평가를 위해 타입스크립트 프로젝트에서 널리 사용됩니다.
parseInt()
parseInt()는 문자열을 정수로 변환하는 데 사용되는 함수입니다. 두 번째 인수로 진수(예: 2진수, 10진수)를 지정할 수 있습니다. 타입스크립트에서 타입을 다음과 같이 지정할 수 있습니다:.
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(숫자가 아님)인지 확인하는 함수입니다. 타입스크립트에서의 사용 예는 다음과 같습니다:.
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을 사용하여 인수가 문자열 또는 불리언 값임을 명시합니다.
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타입의 유니온을 받아 결과를 문자열로 변환하는 함수를 생성합니다.
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초 간격으로 메시지를 표시하며, 세 번 실행된 후에 중지됩니다.
결론
TypeScript의 내장 함수는 표준 JavaScript 함수에 타입 안전성을 추가하여 더 안전하고 효율적인 코딩을 가능하게 합니다. 이러한 함수는 일상적인 프로그래밍 작업을 단순화하고 코드의 가독성과 유지 보수성을 향상시킵니다. 각 함수는 목적에 맞게 올바르게 사용되며, 타입을 지정함으로써 오류를 사전에 감지할 수 있어 개발 과정의 신뢰성을 높이는 데 중요한 역할을 합니다.
TypeScript를 사용함으로써 정적 타입의 이점을 활용하면서 JavaScript의 유연성을 지원하는 개발이 가능합니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.