[Typescript] Core Types

두두·2022년 3월 14일
0

Typescript

목록 보기
1/1

Core Types

  1. 자바스크립트의 핵심 타입
  2. 어떤 타입이 지원되는지
  3. 자바스크립트 핵심 타입과 해당 타입을 사용하는 타입스크립트의 차이점

자바스크립트의 핵심 타입

number(숫자형)

자바스크립트, 타입스크립트 모두 number 타입은 단 하나입니다.
대신 이 값들은 모두 숫자형(number type)입니다.
다른 프로그래밍 언어들에는 정수형, 실수형 또는 이중형이 있지만 자바스크립트, 타입스크립트에서의 숫자형에는 정수, 실수, 음수 모두 포함됩니다.

ex) 1, 5.3, -10

string(문자열 데이터 타입)

작은따옴표, 큰따옴표, 백틱(`)의 방법중 하나로 정의합니다.
특히, 백틱을 사용한 표기법은 최신 자바스크립트, 타입스크립트에서도 제공되는 특수구문이며, 이를 사용하여 일부 데이터를 동적으로 주입할 수 있는 일반 문자열, 즉 템플릿 리터럴을 작성할 수 있습니다.
자바스크립트는 문자열 값 타입을 알고 있습니다.

ex) 'Hi', "Hi", Hi

boolean(불리언 데이터 타입)

특히 if문에서 작업할 때 아주 중요한 타입입니다.
true, false 두 값은 자바스크립트에서 참 같은 값(truthy), 거짓 같은 값(falsy)의 id를 알 수 있기 때문에 중요한데,
예를들어, if조건문에서 숫자 0을 사용하면 이는 거짓으로 처리되어 거짓값이 되기 때문입니다.
자바스크립트, 타입스크립트 모두 불리언 데이터 타입은 참, 거짓 두 값만 알고있습니다.
(참같은값, 거짓같은값의 개념은 자바스크립트가 if조건문에서 특정 값을 확인할 때, 런타임에서 백그라운드 작동되는 데이터타입과는 관련이 없습니다.)

function add(n1: number. n2: number) {
	console.log(typeof(number1);	//number	
	return n1 + n2;
}

const number1 = 5;
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);	//7.8

자바스크립트 vs 타입스크립트

if( typeof n1 !== 'number' || typeof n2 !== 'number' ) {
	throw new Error('Incorrect input!');
}

작업을 수행하고 같지 않다면 에러를 발생(throw)시키고 혹은 반대로 n1이나 n2가 같지 않은지 확인할 수 있습니다. 그리고 둘 중 하나가 숫자형이 아니라면 'Incorrect input'이라는 새로운 에러를 발생시킬 수 있습니다.
이는 문자열로 이 함수를 호출할 수 없도록 하는 타입스크립트적이지 않은 방식입니다.
이를 수행하고 다시 컴파일하면 타입스크립트 에러가 발생하지만, 당장은 무시하고 진행해보겠습니다.
이를 다시 실행하면 지정한 'Incorrect input'이 나타납니다. 그래서 자바스크립트에서는 이 함수를 강화했습니다.
런타임에는 실패하지만 차라리 여기서 실패하는 것이 이전의 잘못된 출력이 표시되는 것보다 나을 수도 있습니다. 따라서 이는 자바스크립트에만 해당하는 입력을 확인하는 방법이 되겠습니다.

이것은 일반적인 자바스크립트 코드지만 이 접근방식에는 단점이 있습니다. 가끔은 제대로 된 작업이 될 수도 있습니다. 경우에 따라 런타임에서 특정 입력만 유효성을 검증할 수 있지만
여기서 단점은 우리가 타입스크립트를 사용하여 개발하는 동안 피할 수 있는 것을 확인하고 있다는 것 입니다. 에러를 발생시킨다는 것을 확인할 수 있습니다.
그리고 애플리케이션에는 실행중인 애플리케이션을 저장하기 위해 다른 동작으로 되돌아갈 수 있는 측정기능이 내장되어 있을지도 모릅니다. 그런데 여전히 우리는 애초에 발생시킬 필요가 없는 에러를 발생시키고 있습니다.

여기서 타입과 관련해 자바스크립트와 타입스크립트의 차이점을 확인할 수 있습니다.
자바스크립트는 동적타입입니다. 즉, 나중에 문자열을 할당할 때 처음 숫자형을 잡아둘 수 있는 변수가 있더라도 문제가 전혀 없다는 것입니다. 그래서 특정 타입에 의존하는 코드가 있는경우, 런타임에서 무언가 현재의 타입을 확인할 수 있게 해주는 typeof 연산자를 사용하는 것 입니다.
반면 타입스크립트는 정적타입입니다. 개발 도중에 끝나는 변수와 매개변수의 타입을 정의한다는 것이며, 런타임 중에 갑자기 변경되지는 않습니다.
물론 타입스크립트는 자바스크립트로 컴파일되기 때문에 이론적으로는 가능하나, 타입스크립트를 사용하여 갑자기 새로운 유형의 데이터를
예를들어 숫자형이어야한다고 설정했던 변수에 할당하는 코드를 작성하고 문자열을 할당하면 개발 도중에 에러가 발생하므로 어떤 타입을 보유할 수 있는지 여부를 명확히 해야합니다. 이게 차이점입니다.
타입스크립트를 사용해 이런 문제를 방지할 수 있다면 이런 구현이나 솔루션을 사용하지 않아야겠죠. 그래도 자바스크립트가 타입의 개념을 아는 것이 중요합니다. 자바스크립트는 숫자형, 문자열, 불리언과 같은 타입들을 알고있지만 이를 사용한다는 것은 개발자로서 더 나은단계인 개발 도중이 아니라 런타임중에 실패할 수 있음을 의미합니다.
그리고 자바스크립트는 몇가지 타입만 알고 있고, 타입스크립트는 훨씬 많은 타입을 알고 있습니다. 따라서 런타임 검사는 타입스크립트로 수행할 수 있는 것 만큼 유연하거나 강력하진 않습니다.
이런 이유들을 종합해, 이 접근방식은 우리가 여기서 사용하고자 하는 접근방식이 아닙니다. 가끔 런타임에서 타입을 가져오는게 유용할 수도 있겠으나 타입스크립트 기능과 검사기능이 자바스크립트 엔진에는 내장되어있지 않기때문에 타입스크립트를 사용하면 개발 도중에만 지원을 받을 수 있다는 것 입니다. 그래서 이 로직은 브라우저에서 실행할 수 없습니다. 단지 개발 도중 코드를 컴파일할 때만 실행할 수 있습니다.

정리 뿅

타입스크립트에서는 항상 string 또는 number와 같은 타입을 다룹니다.
string, number 등이 아니라 String, Number 등 입니다.
타입스크립트의 주요 원시타입은 모두 소문자입니다.

외국 강의를 정리하다보니 문법적으로 조금씩 안맞는 부분이 있을 수 있습니다ㅠㅠ
제가 한국어도 못하고 영어도 잘 못해서 그런가봐요ㅠㅅㅠ

profile
일단 갈기고보는 주니어개발자 두두입니다 :)

0개의 댓글