프론트엔드 개발/Typescript

타입스크립트 01. 기본 타입(tuple, enum 포함)

하이고니 2023. 2. 15. 13:40

string, number


 

타입스크립트에서는 위와 같이 함수의 인자로 들어올 타입을 미리 정할 수 있다.

그리고 함수를 호출할 때 타입이 맞지 않다면 문법 오류로 표시된다.

이는 런타임까지 가지 않고도 개발자가 오류를 확인할 수 있다는, 매우 강력한 장점이다.

 

 

(자바스크립트에서는 위와 같이 if 조건문으로 에러 처리를 해주고, 런타임 에러를 발생시킨다.)

 

자바스크립트의 타입은 동적 타입이다. 숫자를 예상한 자리에 문자열이 입력돼도 전혀 문제가 되지 않는다는 것이다.

그래서 자바스크립트에서는 특정 타입이 필요한 코드의 경우, 런타임에서 체크할 수 있도록 typeof 연산자를 사용한다.

 

반면 타입스크립트의 타입은 정적 타입으로, 이는 개발 도중에 변수와 매개변수의 타입을 정의한다는 것을 의미한다.

런타임 중에 타입이 갑자기 변경되지는 않는다.

 

예를 들어 숫자가 들어갈 자리에 문자열이 들어가면 컴파일에서 에러가 발생하기 때문에, 개발하는 과정에서 어떤 타입을 사용할지에 대해 확실히 해야만 한다.

 

타입스크립트의 주요 원시 타입은 모두 소문자이다!

 

 

 

Q. 위 코드에서 콘솔에는 무엇이 찍힐까요?

A. Result is: 52.8

 

기존의 버그가 다시 발생한다. 두 숫자형과 문자열을 결합했기 때문이다.

이를 해결하기 위해 함수 안에서 숫자형끼리 계산한 것을 하나의 변수에 할당해 놓은 후에 동작시킬 수 있다.

 

 

 

 

타입스크립트는 타입 추론(type inference)이라는 내장 기능을 활용한다.

그래서 타입스크립트는 특정 변수나 상수에 어떤 타입을 사용했는지 아주 잘 이해한다.

 

예를 들어, 타입스크립트는 변수 number1을 항상 숫자형으로 이해한다. 그렇게 선언했기 때문에.

const로 선언한 원시자료형 값은 절대 변할 수 없지만, let은 그렇지 않다.

 

그러므로

let number1: number = 5;

 

이런 식으로 타입 이름을 추가해줄 수 있다.

하지만 함수의 매개변수에 한 작업과 겹치므로 좋은 방법은 아니다.

타입스크립트는 완벽하게 number1의 타입을 추론할 수 있으므로 굳이 변수 선언에서 타입을 지정해줄 필요가 없는 것이다.

 

이런 식이면 문제가 될 수 있다.

 

이런 것도 안 된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

객체


 

객체니까 타입을 object로 명시하면 되지 않을까?

 

자바스크립트에서는 포괄적인 object 타입을 쓰면 안 된다.

타입스크립트는 포괄적인 object 타입을 보면 어떤 정보도 주지 않는 객체로 이해한다.

 

타입스크립트에는 객체에 대한 정보가 없어서 어떤 타입의 속성도 지원하지 않으므로, 보다 구체적인 객체 타입을 지정함으로써 추론된 모든 것을 자동으로 입력하도록 상세히 지정해야 한다.

 

어떻게?

 

 

빈 중괄호 쌍만 타입으로 할당하면 된다.

이는 특정 객체 타입의 표기법으로, 객체의 구조에 대한 정보를 제공하는 '객체 타입'의 역할을 한다.

 

좀 더 구체적으로 명시하려면 중괄호 안에 키-타입 쌍을 입력한다.

 

 

하지만 위는 결국 이렇게 입력한 것과 같고, 중복 작업을 한 것과 마찬가지다.

 

 

 

 

타입스크립트는 위와 같이 작성된 객체의 타입을 정확하게 이해한다.

 

 

 

배열


string[] 문법은 문자열을 요소로 갖는 배열이라는 뜻

 

 

Tuple 튜플


길이와 타입이 고정된 배열

 

길이는 2. 첫 번째 요소는 숫자형, 두 번째 요소는 문자형이어야 하는 배열이 필요하다고 하자.

 

이렇게 타입만 정해져 있는 경우에는,

 

 

이런 동작들이 다 가능하다. 바로 이럴 때 튜플이 적합하다.

튜플은 아주 특별하게 동작한다.

 

 

role의 타입을 위와 같이 명시하면, role에는 딱 두 개의 요소만 있는 특수 배열만을 입력할 수 있다.

 

이제 문자형 자리를 숫자형으로 바꿀 수 없다는 오류가 발생한다.

 

안타깝게도 튜플은 예외적으로 push를 허용하기 때문에 타입스크립트가 해당 에러를 걸러내지는 못하지만,

적어도 잘못된 값을 할당하지는 않는다.

 

 

배열에 정확히 x 개의 값이 필요하고 각 값의 타입을 미리 알고 있는 상황에서는

배열보다 튜플을 사용하는 것이 좋다.

 

 

Enum


 

이것을 컴파일하면 아래와 같은 즉시 실행 함수로 변한다. enum은 원하는 이름에 원하는 숫자형 값을 지정할 수 있는 편리한 기능이다.

 

Role.ADMIN = 0, Role.READ_ONLY = 1, Role.AUTHOR = 2

 

 

이렇게 원하는 숫자부터 시작할 수도 있다.

 

 

각각 지정해줄 거라면 다 지정해줘야 한다.

 

 

 

 

Any


any 타입을 명시한 곳에서는 타입스크립트 컴파일러가 작동하지 않는다.

any 속성 또는 any 변수가 어떤 값도 저장하지 않아서 컴파일러가 검사할 부분이 없다.

 

따라서 어떤 종류의 데이터가 어디에 저장될지 전혀 알 수 없는 경우에 대비하거나

런타임 검사를 수행하는 경우에 any를 사용하면 된다.

그 외의 경우에는 any를 사용하지 않는 것이 좋다.