JavaScript는 웹 페이지에 삽입될 단 몇 줄의 짧은 코드 조각을 작성하기 위해 고안되었습니다. JavaScript가 지금만큼 대중화되거나 수천 줄의 코드로 애플리케이션을 작성하는 데 사용될 것이라고는 누구도 예측할 수 없습니다.
JavaScript가 성장하여 현재 애플리케이션 구축에 널리 사용되고 있지만 완벽한 언어는 아닙니다. 겸손한 시작과 초기 의도된 사용은 JavaScript에 대규모 애플리케이션 구축을 악몽으로 만들 수 있는 몇 가지 단점이 있음을 의미합니다.
예를 들어 JavaScript는 개체에 존재하지 않는 요소를 참조하거나 null에 숫자 값을 곱할 때 오류를 발생시키지 않습니다.
JavaScript에서는 빈 문자열(“”)을 같음 연산자(==)를 사용하여 비교할 때 0(영)과 같습니다. 더 나쁜 것은 JavaScript가 개발 중인 코드에서 이러한 오류를 표시하지 않는다는 것입니다. 프로그램을 실행한 후에만 오류가 표시됩니다.
타입스크립트는 JavaScript를 기반으로 구축되어 JavaScript로 애플리케이션을 구축할 때 발생하는 문제를 완화하기 위해 개발되었습니다. 이를 달성하기 위해 TypeScript는 코드를 작성할 때 정적 유형 검사를 수행합니다.
정적 검사는 코드를 실행하지 않고도 코드의 오류를 감지하는 것을 의미합니다. 따라서 정적 유형 검사는 코드에서 작동되는 값 유형을 기반으로 개발 중에 오류를 검사합니다.
TypeScript는 JavaScript의 형식화된 상위 집합입니다. JavaScript의 상위 집합이라는 것은 유효한 JavaScript 코드가 유효한 TypeScript이기도 함을 의미합니다. 유형을 지정한다는 것은 TypeScript가 다양한 데이터 유형을 사용할 수 있는 방법에 대한 규칙을 추가한다는 것을 의미합니다. TypeScript는 또한 강력한 형식이므로 형식 시스템에 의해 적용되는 제한 사항을 해결할 수 없습니다.
TypeScript는 웹 개발에 있어 큰 이정표이자 중요한 발전입니다. TypeScript를 사용하면 유지 관리가 쉽고 읽기 쉬운 코드를 작성할 수 있습니다. 또한 좋은 코딩 관행을 시행하고 개발자가 코드를 작성할 때 오류를 포착하고 방지하는 데 도움이 됩니다.
TypeScript는 더 안정적이고 리팩토링하기 쉽기 때문에 JavaScript에 비해 대규모 애플리케이션을 구축하는 데 이상적입니다. TypeScript가 강력하게 유형화되면 유형 변환, 그 중요성, TypeScript가 유형 변환을 처리하는 방법을 살펴보겠습니다.
목차
TypeScript의 유형 변환과 그 중요성
유형 변환은 문자열 값을 숫자로 변환하는 것과 같이 값을 한 데이터 유형에서 다른 데이터 유형으로 변환하는 프로세스입니다. 유형 변환은 암시적으로 수행될 수 있으며, 컴파일러는 합병증 중에 호환되는 데이터 유형을 자동으로 변환합니다.
유형 변환은 명시적일 수도 있습니다. 여기서 유형 변환은 소스 코드에서 명시적으로 필요합니다. 이를 흔히 타입캐스팅이라고 합니다.
유형 변환은 개발자가 TypeScript에서 예상되는 데이터 유형을 준수하면서 다양한 데이터 형식으로 작업할 수 있도록 하기 때문에 중요합니다. 또한 소스 코드에서 예측 가능한 결과를 보장하는 데도 도움이 됩니다.
개발자로서 유형을 직접 캐스팅하면 코드가 여전히 TypeScript의 유형 요구 사항을 충족하는지 확인하는 데 도움이 됩니다. 코드를 더 읽기 쉽고 이해하기 쉽게 만들고 유형 관련 오류를 방지하는 데 도움이 됩니다.
유형 변환은 또한 데이터 유효성 검사를 지원하는 데 도움이 되며, TypeScript는 특정 유형과 관련된 자동 완성과 같은 모든 내장 도구를 제공하여 개발에 도움이 됩니다.
유형 변환의 일반적인 사용 사례는 문자열과 숫자입니다. TypeScript에서 문자열을 숫자로 변환할 때 코드 오류를 방지하기 위해 숫자 문자열을 숫자로만 변환합니다. 즉, “1”, “235”, “5234.5” 등과 같은 문자열을 변환할 수 있습니다. 그러나 “hello”와 같은 문자열을 숫자로 변환하지 마십시오.
TypeScript에서 문자열을 숫자로 변환하는 다양한 방법을 살펴보겠습니다.
‘as’를 사용하여 유형 어설션
TypeScript 코드에서 다양한 데이터 유형으로 작업할 때 때때로 TypeScript가 알 수 없는 값 유형에 대한 추가 정보를 얻게 됩니다. 이러한 경우 TypeScript에 변수의 유형을 알려주고 컴파일러가 유형을 유추하지 못하게 합니다. 이를 유형 어설션이라고 합니다.
유형 어설션은 as 키워드를 사용하여 수행됩니다. 유형 어설션을 사용하여 문자열을 숫자로 변환하려면 먼저 문자열 유형을 알 수 없음으로 설정하십시오. 이는 기본적으로 TypeScript가 문자열 유형을 숫자로 변환하는 모든 것을 잠재적인 실수로 간주하기 때문입니다. 문자열도 숫자도 서로 충분히 겹치지 않기 때문입니다. 아래와 같이 진행하여 문자열을 숫자로 변환하려면 다음을 수행하십시오.
/** * set the type of numString to be unkown, otherwise, * Typescript will infer numString to be a string value */ let numString: unknown = "23452"; // Type conversion using as - numString is converted to a number // and assigned to the variable score let score = numString as number; console.log(score); console.log(score * 35);
산출:
23452 820820
출력에서 변수 numString이 숫자로 변환되어 점수에 할당되었음을 확인합니다. 그러면 점수의 값이 숫자이기 때문에 점수로 곱셈과 같은 수치 계산을 수행할 수 있습니다.
<>를 사용한 유형 어설션
<>를 사용한 유형 어설션은 문자열을 숫자로 변환하는 데에도 사용할 수 있습니다. 이는 as 키워드를 사용하는 것과 정확히 동일하게 작동합니다. 구현의 유일한 차이점은 아래와 같은 구문입니다.
let numString: unknown = "23452"; // Type assertion using <> to convert a string to a number let score = <number>numString; console.log(score); console.log(score * 35);
산출:
23452 820820
출력은 as 키워드를 사용하는 것과 동일합니다. 다시 말하지만, 숫자 값이 없는 문자열을 변환하기 위해 유형 어설션을 사용하지 마십시오.
숫자 생성자 사용
Number 생성자를 사용하여 문자열을 숫자로 변환하려면 아래 코드 조각에 표시된 대로 Number 생성자로 변환하려는 문자열을 전달하세요.
let numString = "23452"; // type inferred to string let lives: string = "20"; // type annotated to string // pass in string to Number constructor to convert to number let score = Number(numString) console.log(score / 17) // pass in string to Number constructor to convert to number let remainingLives = Number(lives); console.log(remainingLives - 4)
산출:
1379.5294117647059 16
Number 생성자를 사용할 때 문자열 유형을 알 수 없음으로 설정할 필요가 없습니다. 주석이 달렸거나 문자열로 추론된 문자열 값으로 작동합니다. 그러나 “514”와 같은 숫자 문자열을 전달하는 것을 잊지 마십시오. 숫자로 변환할 수 없는 문자열을 전달하면 NaN(Not-a-Number)이 반환됩니다.
단항 더하기(+) 연산자 사용
단일 피연산자 앞에 있는 단항 더하기(+) 연산자는 앞에 있는 피연산자로 평가됩니다. 예를 들어, +2는 숫자 2로 평가되고, +542는 숫자 542로 평가됩니다. 그러나 피연산자가 숫자가 아닌 경우 단항 더하기(+) 연산자는 피연산자를 숫자로 변환하려고 시도합니다.
예를 들어, +”98″은 98로 평가되고 +”0″은 숫자 0으로 평가됩니다. 따라서 단항 더하기(+) 연산자를 사용하여 문자열을 숫자로 변환할 수 있습니다. 숫자로 변환할 수 없는 문자열을 전달하면 아래와 같이 NaN이 반환됩니다.
let numString1 = "23452";
let numString2 = "973.82"
let word = "hello"
// Using the Unary plus (+) to convert strings to numbers
let num1 = +numString1;
let num2 = +numString2;
let notNumber = +word;
console.log(`${num1} is a ${typeof num1}`);
console.log(`${num2} is a ${typeof num2}`);
console.log(notNumber);
산출:
23452 is a number 973.82 is a number NaN
단항 더하기(+) 연산자를 사용하면 속도가 빠르고 피연산자에 대해 추가 연산을 수행하지 않으므로 문자열을 숫자로 변환하는 좋은 방법입니다.
ParseInt() 및 ParseFloat() 사용
JavaScript와 마찬가지로 Typescript는 정수와 부동 소수점 숫자라고도 알려진 십진수를 구분하지 않습니다. 모두 유형 번호로 간주됩니다. 즉,parseInt()와parseFloat()의 동작은 약간 다릅니다.
parseInt()는 문자열 인수를 가져와 구문 분석하고 지정된 기수에 따라 해당하는 정수를 반환합니다. parseFloat()는 문자열을 가져와 구문 분석하여 부동 소수점 숫자를 반환합니다.
예를 들어, “897”을 parseInt()와parseFloat()에 모두 전달하면 숫자 897을 반환하게 됩니다. 그러나 897.75를parseInt()와parseFloat()에 전달하면,parseInt()는 897을 반환하고,parsefloat()는 897.75를 반환합니다.
따라서 소수점 이하 자리가 없는 숫자 문자열을 변환할 때는 parsInt()를 사용하고, 숫자 문자열에 소수 자리가 있는 경우에는 아래 코드와 같이 parseFloat()를 사용한다.
let numString1 = "897.75";
let numString2 = "724";
let word = "hello";
console.log("Parsing numerical strings with decimal numbers")
console.log(`Using parseInt -> ${parseInt(numString1)}`);
console.log(`Using parseFloat -> ${parseFloat(numString1)}`);
console.log("Parsing numerical strings with whole numbers")
console.log(`Using parseInt -> ${parseInt(numString2)}`);
console.log(`Using parseFloat -> ${parseFloat(numString2)}`);
console.log("Parsing strings that can't convert to number")
console.log(parseInt(word));
console.log(parseFloat(word));
산출:
Parsing numerical strings with decimal numbers Using parseInt -> 897 Using parseFloat -> 897.75 Parsing numerical strings with whole numbers Using parseInt -> 724 Using parseFloat -> 724 Parsing strings that can't convert to number NaN NaN
결론
API 호출 결과와 같은 문자열 값으로 작업할 때 숫자 계산을 수행할 수 있도록 문자열 값을 숫자로 변환할 수 있습니다. 그러한 필요가 발생할 경우 문자열을 숫자로 변환하는 방법에 대해 기사에서 강조된 방법을 고려하십시오.
그러나 문자열을 숫자로 변환할 때마다 문자열을 숫자로 변환하려고 하면 NaN이 발생할 수 있으므로 주의하세요.
이러한 오류를 방지하려면 숫자로 변환하려는 모든 문자열이 숫자 문자열인지 확인하세요. 코드 오류를 방지하기 위해 if 문을 사용하여 NaN을 확인할 수도 있습니다.
개발자로서 알기 위해 최고의 TypeScript 라이브러리와 런타임을 탐색할 수도 있습니다.