[패캠] 타입스크립트 문법 - 타입 종류, Any부터 Intersection까지 (3/20)

 

Fastcampus 프론트엔드 개발 강의

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

03. 타입 종류 알아보기 - Any부터 Intersection까지

---

타입 종류 - part 2

타입스크립트에 사용할 수 있는 타입은 문자, 숫자, 불린, 배열, 객체, 함수, Any, Unknown, Tuple, Void, Never, Union, Intersection이 있다. 이번 포스팅에서는 Any 이후의 추가 타입에 대해서 알아본다.

Any

Any 타입은 anything, 즉 아무거나 할당해도 전혀 문제가 발생하지 않는다. 그렇다 보니 사실상 자바스크립트에서 사용하는 것과 완벽하게 동일한 방식으로 Any 타입을 쓸 수 있다. 이는 정적 언어인 타입스크립트를 사용하는 이유가 없어진다. 그래서 일반적인 타입스크립트의 코드에서는 Any 타입을 되도록 사용하지 않는 것이 좋다. 타입스크립트는 엄격하게 타입 관리하고, 그렇게 엄격하게 타입 관리가 될수록 코드에서 에러가 발생할 확률이 줄어든다.

let hello: any = 'Hello world'
hello = 123
hello = false
hello = null
hello = {}
hello = []
hello = function () {}

Unkown

Any의 경우 어떤 데이터든 할당해도 상관없다는 의미를 가지며, Unknown은 코드를 작성할 때 정확하게 어떤 데이터가 할당될지 알 수 없으니 일단은 알 수 없음으로 표시하겠다는 의미를 가지고 있다.

Any 타입의 데이터는 반대로 다른 타입의 변수에 할당되어도 전혀 문제가 발생하지 않는다. 결국에 타입스크립트를 사용할 필요가 없어지는 상황이 발생한다. 그렇기 때문에 이런 타입이 존재하지만 타입스크립트를 사용하는 이유 안에서는 당연히 쓰면 안되는 타입으로 이해하면 된다.

const anything: any = 123
const u: unknown = 123

const any: any = anything
const bool: boolean = anything
const num: number = anything
const arr: string[] = anything
const obj: {x: string, y: number} = anything

반면, unkown 타입의 데이터는 다른 타입의 변수에 할당할 시에 에러가 발생한다.

const anything: any = 123
const u: unknown = 123

const any: any = u
const bool: boolean = u // error
const num: number = u // error
const arr: string[] = u // error
const obj: {x: string, y: number} = u // error

타입스크립트 코드를 작성할 때 데이터의 타입을 정확하게 무엇으로 지정해야 될지 아직 모르는 상황에서는 가장 쉽게 사용할 수 있는 any 타입의 유혹을 많이 받게 된다. 그때 any 타입을 사용하는 대신 알 수가 없는 상태라는 의미의 unknown 타입으로 지정을 해두면 any 타입보다 훨씬 더 엄격하게 그 조건을 따져 코드 상에서 문제를 알려줄 수 가 있다. 결론적으로 any 타입은 사용하지 말고 정확하게 데이터의 타입을 알 수 없는 상황에서는 unkown 을 사용하도록 하자.

Tuple

튜플 타입의 경우에는 실제 배열을 사용하는 개념이긴 하지만 배열의 정확한 아이템 개수까지 명시를 하는 타입에 해당한다. 그렇기 때문에 배열 데이터의 개수나 타입의 순서가 달라질 수 있는 구조에서는 적합하지 않은 타입이다.

튜플을 유용하게 사용하는 예시로, users 변수는 각각의 아이템이 튜플 타입인 배열 데이터 타입이라고 명시할 수 있다. 배열 안에 아이템의 개수는 총 3개만 있어야 하며 아이템의 순서도 중요한 개념이 된다. 사용자의 정보를 튜플 타입과 배열 타입을 섞어서 만들 수 있는 것이다.

const tuple: [string, number, boolean] = ['a', 1, false]
// const tuple: [string, number, boolean] = ['a', 1, false, 2] // error
const users: [number, string, boolean] [] = [[1, 'Neo', true], [2, 'Evan', false], [3, 'Lewis', true]]

튜플이 일반적인 프론트엔드 개발에서 많이 사용된다고 보기는 힘들지만, 배열 데이터 부분에 명확한 아이템의 순서가 존재할 때 간혹 유용하게 쓰일 수 있다.

Void

타입스크립트에서는 함수에 return 키워드를 작성하지 않아 아무것도 반환하지 않는 구조에서는 반환 타입이 undefined가 아니고 void라고 작성한다. 혹시라도 함수의 반환 값을 undefined 타입으로 명시한 경우에는 return 키워드로 정확하게 undefined 데이터를 반환해줘야 한다.

정리하면, void 타입은 return 키워드를 작성하지 않은 함수 안에서 반환되는 데이터의 타입이라고 할 수 있다. 함수에서 return 키워드를 사용하지 않으면 실제 데이터 자체는 undefined가 반환되기는 하지만 명시적으로 void 타입을 작성해줘야 타입스크립트 입장에서는 return 키워드가 없는 함수라고 이해할 수 있다.

hi라는 변수는 데이터 타입이 void이기 때문에 사실상 쓸모가 없는 상태라는 것을 충분하게 코드상에서 인지할 수가 있다.

function hello3(msg: string): void {
    console.log(`hello ${msg}`)
}
const hi: void = hello3('world')

Never

never 타입은 절대 발생하지 않을 값이라는 의미를 가지고 있다. 배열에서는 대괄호([]) 앞에 아이템의 타입을 명시하는데, 타입을 명시하지 않는 대괄호의 경우 아무런 데이터도 넣을 수 없다. 타입스크립트 입장에서는 이렇게 빈 배열의 타입에는 절대 발생할 수 없는 값이라는 never라는 타입을 자동으로 지정하게 된다. 이렇게 지정한 타입의 대괄호 사이에 눈에 보이진 않지만 never라는 이름의 타입이 명시됐다고 볼 수 있다. (never[ ])

아마도 never 타입을 직접 사용하는 일은 없을 것이다. 만약 에러 메시지에서 이 never 타입을 만나게 되면 혹시라도 타입 지정이 잘못된 것은 아닌지 다시 한번 검토를 해볼 만한 타입이라고 보면 된다.

const nev: [] = []
// nev.push(3) // error

Union

Union 타입은 버티컬 바를 사용하여 동시에 여러 개의 타입을 지정하고 싶을 때 유용하게 쓸 수 있다. 두 개 이상의 타입을 또는(or) 방식으로 연결해서 사용한다. 배열 데이터의 아이템이 동시에 여러 개의 타입을 지정해야 하는 경우 union 타입을 소괄호로 묶어서 명시할 수 있다.

사용하는 기호(|)와 함께 Union 타입은 자바스크립트의 또는(or) 연산자와 유사하다.

let union1: string | number | boolean
union1 = 'Hello type!'
union1 = 123
union1 = false

Intersection

사용하는 ampersand 기호(&)와 함께 Intersection 타입은 자바스크립트의 그리고(and) 연산자와 유사하다. heropy라는 변수는 user라는 인터페이스의 타입과 validation이라는 인터페이스의 타입이 동시에 지정이 되어져 있는 구조가 된다. 다시 말해, 두 개 이상의 객체 타입의 속성의 내용들이 전부 다 합쳐진 새로운 타입을 만들 때 타입스크립트의 Intersection 타입을 사용한다.

interface User {
    name: string,
    age: number
}

interface Validation {
    isValid: boolean
}

const heropy: User & Validation = {
    name: 'Neo',
    age: 85,
    isValid: true
}

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY