Typescript 공부 3일차

김가연·2023년 6월 22일
0

TypeScript

목록 보기
4/8

타입스크립트 강의를 보며 개인적으로 기록하는 글입니다.
이번 글에서는 타입스크립트의 타입 추론 및 Object, Array, Tuple 타입에 대해 다룹니다.

타입 추론

타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미한다.

타입 추론이 된다면 명시적으로 타입을 정의하는 건 불필요한 코드이고, 권장되는 방법이 아니다. 초기 값이 숫자이니 자동으로 number 타입으로 추론하기 때문이다.

그렇다면 명시적인 타입 구문을 작성하면 좋은 상황은 언제일까?

변수를 할당 없이 선언만 했을 때, 이 변수는 어떤 값이 저장될 거라고 알려주면 좋다.

명시적으로 타입을 작성하지 않을 경우, number1에 문자열 '5'를 할당해도 오류가 발생하지 않는다. 타입스크립트에게 이 변수에 저장될 타입을 알려주지 않았으니까 말이다. 그러므로 number1은 어떤 유형도 할당이 가능한 any 타입이 된다.

그래서 이런 상황에선 타입스크립트에게 해당 변수는 어떤 타입이 저장될 것인지 알려주는 게 좋다. 그렇게 해야 오류를 사전에 방지할 수 있으니까 말이다.


이어서 타입스크립트의 다른 타입들도 다뤄보려 한다.

객체(Object) 타입

person이라는 객체를 만들고 닉네임이라는 키 값을 가져오려 한다. 이 역시 타입스크립트가 오류를 잡아준다.

또한 IDE에서도 속성들을 추천해준다.

배열(Array) 타입

이번엔 취미를 추가해보겠다. 이 사람은 취미가 여러 개라 배열로 추가를 했다.

배열에 커서를 올리면 string 배열인 것을 확인할 수 있다.

또한 favoriteActivites는 문자열 배열이라고 타입스크립트에게 알려주고 문자열을 할당해도, 배열에 숫자를 넣어도 타입스크립트는 오류를 뱉는다.

그리고 타입스크립트는 hobbies 배열이 문자열 배열인 것을 알고 있기에 그 안의 값들이 문자열이라는 것도 안다. 이렇게 타입스크립트의 타입 추론이 얼마나 빛을 발하는지 알 수 있다.

튜플(Tuple) 타입

예를 들어, role이라는 키 값에 length가 2이고 앞은 숫자 아이디, 뒤는 역할을 나타내는 문자열을 넣고 싶다고 하자. 근데 아래 코드에서 role 배열에 push를 하고 있다. role에는 두 가지 요소만 들어가야 하는데 타입스크립트에선 알지 못하고 있는 상황이다.


그리고 두 번째 값을 숫자로 바꾸어도 막지 않는다. 왜냐하면 타입스크립트는 role이 숫자 혹은 문자열 배열로 알고 있기 때문이다.

위와 같이 배열 안에 타입들을 정의해서 튜플 타입으로 정의하니 role의 두 번째 값을 숫자로 바꾸려 하니 오류가 난다. 두 번째는 문자열로 정의되어 있기 때문이다.

빈 배열 혹은 길이가 다른 배열도 오류를 보여준다.

주의사항

튜플에 push를 사용하면 기존의 튜플 타입을 따른다고 선언함에도 불구하고 배열의 길이가 별다른 오류 없이 늘어나게 된다.

profile
프론트엔드 개발자

0개의 댓글