이번에는 타입스크립트에서 사용하는 기본 타입들에 대해서 알아보도록 하겠습니다!
참고한 강좌 영상은 아래 첨부합니다 :)
목차
0. 타입 추론
TS는 Type을 명시해 주기 때문에 TypeScript라는 이름을 가졌다는 것을 저번 포스팅에서 배웠습니다!
string으로 지정을 했다면 다른 타입의 데이터가 들어오면 오류가 발생하게 되죠.
물론 타입스크립트는 굳이 명시를 하지 않아도 타입이 확실한 경우에는 타입을 생략하기도 합니다.
아주 똑똑하죠? 이것을 타입 추론이라고 부릅니다.
1. TS의 일반적인 타입들
JavaScript에서 사용했던 변수들을 그대로 TypeScript에서 똑같이 만들어보도록 하겠습니다.
1.0. number/string/array
특별한 것은 없습니다. 타입에 맞게 적기만 한다면 그 형태의 데이터만 변수에 들어갈 수 있습니다.
조금 눈여겨볼 점은 배열의 경우 string[], Array<string> 어떤 것으로 작성해도 똑같이 작동하게 됩니다.
string만 들어가게 만들었는데, number 타입을 넣으려고 한다면 어떻게 될까요?
당연히 아래처럼 오류가 발생하게 됩니다.
1.1. tuple
tuple은 배열과 비슷한 모양인데, 인덱스별로 서로 다른 타입의 데이터를 넣는 경우에 사용할 수 있습니다.
타입의 순서를 미리 결정해 놓기 때문에, 올바르지 않는 순서대로 데이터를 넣으면 오류가 발생합니다.
각 인덱스마다 들어있는 데이터의 타입이 다르기 때문에 사용할 수 있는 메소드 역시 차이가 나게 됩니다.
string타입에만 사용할 수 있는 toLowerCase 메소드의 경우 b[0]에서는 사용할 수 있지만 b[1]에서는 사용할 수가 없죠.
1.2. void/never
void는 함수에서 아무 것도 반환하지 않을 때 주로 사용합니다.
sayHello라는 함수는 console.log()만 사용하고 return이 없기 때문에 void형태를 return하게 됩니다.
이런 경우 함수의 이름 옆에 void를 명시해주면 됩니다.
never는 에러를 반환하거나 영원히 끝나지 않는 함수의 타입으로 사용할 수 있습니다.
1.3. enum
자바스크립트에서는 없는 enum타입입니다.
enum은 비슷한 값들끼리 묶어서 숫자 형태로 쓰고 싶을 때 사용합니다.
enum 뒤에 데이터셋의 이름을 적고, 중괄호 내에 데이터들을 넣습니다.
enum 안의 데이터에 수동으로 값을 주지 않으면 자동으로 0부터 1씩 증가하면서 순서대로 값이 할당됩니다.
아래 사진의 오른쪽 JS 변환값을 보면 그 내용을 확인할 수 있습니다.
그렇다면 만약 수동으로 값을 주면 어떻게 될까요?
값을 주지 않은 부분은 상위 아이템에 준 값에서부터 1씩 증가하면서 값이 할당됩니다.
아래 사진을 보시면 좀 더 이해하기 편하실 것이라 생각합니다.
그런데 사진에서 JS로 변환된 부분을 자세히보면 양방향 매핑이 되어있는 것을 볼 수 있습니다.
이게 무슨말이냐!!
console.log(Os[10]) 을 하게 되면 "Ios"가 나오게 되고,
console.log(OS['Ios']) 을 하게 되면 10이 나온다는 이야기입니다.
또한 enum에는 숫자가 아닌 문자열을 넣을 수도 있습니다.
다만 이 경우에는 양방향 매핑이 아닌 단방향 매핑만 됩니다.
이제 enum타입을 이용해서 enum 안에 있는 데이터를 사용할 수 있도록 변수를 만들어줄 수도 있습니다.
특정 값만 입력할 수 있는 것을 강조하고 싶을 때, 그리고 그 값이 무언가 공통점이 있을 때 enum을 사용할 수 있습니다.
1.4. null/undefined
말 그대로 null과 undefined 타입입니다.
만약 변수 안에 null이나 undefined를 넣어두고 싶다면 아래와 같이 해당하는 타입을 선언해주시면 되겠습니다.
최근댓글