타입스크립트 7일차 - 고급타입

유니언 타입

유니언 타입은 2개 이상의 타입을 받게 할 수 있는 타입입니다. 간단하게 | 연산자로 정의하시면 됩니다.
예를 들면 string | number 이런 식으로 가능하겠죠.

이 유니언 타입은 함수 파라미터나 변수뿐만 아니라 함수의 리턴값에도 사용 가능한 타입입니다.

그런데 유니언타입으로 받지만 특정 변수타입의 함수를 사용해야 될 경우가 있습니다. indexOf라는 함수가 대표적이겠네요. 내가 찾아야할 문자가 어디에 위치하는지 찾는 함수입니다.
이럴 경우에 typeof연산자를 활용하여 먼저 체크해주신다면 충분히 해당 함수를 안전하게 사용할 수 있습니다.
변수일 경우는 문제가 그렇게 되지 않습니다만 함수의 파라미터로 받을 경우 문제가 생기게 됩니다. 뭐가 들어올지 모르기 때문이죠.

typeof가 없는 함수

typeof가 있는 함수

위의 같이 typeof로 타입의 안전성을 확보해줘야 하니 주의하시면 되겠습니다.

문자열 리터럴 타입

변수를 대입할 때 문자열로 지정하시면 해당 문자열만 받도록 설정할 수 있습니다.

let event: "key" 라고 선언된다면 event 변수에는 반드시 “key”라는 문자열만 들어갈 수 있습니다.

non-nullable

보통 변수값이 현재 지정되지 않았다거나 할당되지 않았다는 것을 표현하기위해 null/undefined를 사용합니다.

하지만 이런 경우 타입의 안전성을 해칠 가능성이 있으므로 엄격하게 Null 검사를 진행할 수 있습니다.

tsconfig.json에 strictNullChecks: true 옵션을 추가하는 것인데요.

이렇게 되면 직접적으로 null이나 undefined를 특정 변수에 받겠다고 선언하지 않은 변수에 대해 검사를 통해 null/undefined를 걸러냅니다.

타입 에일리어스

타입스크립트는 타입에 대해 별칭을 짓는 기능을 가지고 있습니다.

type 식별자 = 타입으로 만들 수 있고 식별자와 타입은 동일한 기능을 수행합니다.

즉, type stringAS = string이라고 선언한다면 stringAS를 쓰든 string을 쓰든 둘 다 string으로만 받는다는 뜻이 됩니다.

이렇게 편리한 기능이지만 간단한 타입으로는 만들어 봐야 괜히 복잡하기만 해지니 복잡한 타입을 정리할 때 사용하면 좋을 것 같습니다.

타입 추론

타입스크립트에서는 값을 할당할 때 타입을 명시하지 않으면 타입 추론을 통해 타입을 결정합니다.

즉, 자바스크립트에서 사용되는 것과 같이 자동으로 컴파일러가 문자냐 숫자냐 오브젝트냐 판단한다는 의미입니다.

배열의 경우에는 처음에 추론될 때 각 값에 대해 타입이 다르면 object 타입으로 정해져서 이것저것 넣는 것에 대해 문제가 없으나 변수의 경우는 처음 값이 할당되면 해당 타입으로 할당되기 때문에 다른 타입의 값을 할당할 수 없으니 조심하셔야 합니다.

타입 캐스팅

타입 캐스팅은 명시적으로 선언한 캐스팅 코드로 인하여 변경되는 것을 의미합니다.

null, undefined를 제외한 기본 래퍼 객체를 이용해 캐스팅이 가능하며 string, number, boolean, symbol 종류로 캐스팅이 가능합니다.

문자 -> 숫자로 변경하고자 한다면 parseInt, Number등 여러가지 캐스팅 함수가 있지만 제대로 캐스팅되지 않을 경우를 대비해 NaN등의 체크를 해주는 것도 잊지 말아야 하겠습니다.

해당 캐스팅함수는 자바스크립트의 기능을 이용하기 때문에 컴파일 후에도 코드가 그대로 유지됩니다.

타입 어설션

타입 어설션은 타입스크립트 컴파일러가 타입스크립트 문법에서 주어진 정보를 이용해 컴파일을 수행하며 타입을 변경하는 방법입니다.

선언방식은 크게 <>, as 방식이 있으며 캐스팅 후 JS코드에는 남지 않게 됩니다.

간단하게 코드를 작성해보면 다음과 같습니다

1
2
3
let myNum: any;
let num1: number = <number>myNum;
let num2: number = myNum as number;

둘 다 허용되지만 <> 방식은 리액트의 JSX 문법과 유사해 충돌할 수 있으니 as방식을 추천한다고 책에서 말하고 있습니다.

제가 리액트를 안해봐서…

마무리

이상으로 타입과 관련된 day7을 마치겠습니다.

다음시간은 제네릭입니다.