[패캠] 타입스크립트 문법 - 타입 종류, 문자부터 함수까지 (2/20)

Fastcampus 프론트엔드 개발 강의

 

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

 

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

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

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

 

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

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

 

02. 타입 종류 알아보기 - 문자부터 함수까지

---

타입의 종류 - part 1

null과 undefined는 우리가 사용할 수 있는 문자나 숫자, union과 intersection까지 모든 타입에 대한 하위 타입이다. 그렇기 때문에 타입을 지정하더라도 초기화 되지 않은 let 변수와 같이 undefined가 들어가 있을 수 있다.

기본적으로 변수의 타입을 지정하는 방법은 변수 선언 키워드와 이름을 쓰고, 할당 연산자를 통해서 데이터를 할당하기 전에 colon 기호와 함께 우리가 사용할 수 있는 타입을 넣는다. 즉, 변수와 할당 연산자 사이 부분에서 타입을 지정한다. 사용할 수 있는 타입의 종류는 문자, 숫자, 불린, Null, Undefined, 배열, 객체, 함수, Any, Unknown, Tuple, Void, Never, Union, Intersection이 있다.

let red: string = "Red"
let num: number = 6
let isDone: boolean = false
let nul: null = null
let und: undefined
const fruits: string[] = ['Apple', 'Banana', 'Cherry']
const union: (string|number)[] = ['Apple', 1, 2, 'Banana', 3]
const obj: object = {}
const arr: object = []
const func: object = function () {}
const userA: {
	name: string
	age: number
	isValid: boolean
} = {
	name: 'Heropy',
	age: 86,
	isValid: true
}
interface User {
    name: string
    age: number
    isValid: boolean
}
const userA: User = {
    name: 'Heropy',
    age: 85,
    isValid: true
}
const add: (x: number, y: number) => number = function (x,y) {
    return x + y
}
const a: number = add(1,2)

const hello = function (): void {
    console.log('Hello world ~')
}
const h: void = hello()

Null / Undefined 타입

null은 명시적으로 우리가 아무것도 아닌 값으로 지정하는 데이터이다. undefined 같은 경우에는 직접 사용하기 보다는 자동으로 들어가서 명시적의 반대인 암시적으로 데이터가 만들어진다. null 타입의 변수는 null 만 할당할 수 있는 구조이며 다른 타입의 데이터가 할당되면 에러가 발생한다. 이 두 타입은 null이나 undefined를 직접적으로 명시해야 하기 때문에 굉장히 유용하지 않다.

let 키워드로 선언된 변수에 초기화를 해주지 않은 경우 undefined가 할당되는데, 명시한 타입으로 초기화 하지 않고 사용할 경우 에러가 발생한다.

배열 타입

배열 타입은 항상 배열을 의미하는 대괄호와 그 안에 들어갈 아이템의 타입을 같이 작성해서 완성한다.

Union 타입

Vertical bar (|) 기호를 사용하여 사용할 여러 개의 타입을 명시할 수 있는 형태를 union 타입이라고 부른다. Union 타입의 경우 문법적으로 소괄호로 묶어줘야 하나의 덩어리라는 것을 알 수 있다. 그렇지 않은 경우 아래의 코드는 union_x 변수는 string 타입이거나 혹은 number 타입의 요소만 가지는 배열 데이터라고 읽힐 수 있다.

const union_o: (string|number)[] = ['Apple', 1, 2, 'Banana', 3] // string[] or number[]
const union_x: string|number[] = ['Apple', 1, 2, 'Banana', 3] // string or number[]

객체 타입

객체 타입은 object 타입을 사용한다. 그런데 object 타입의 문제는 JavaScript의 typeof 키워드를 통해서 확인했을 때, ‘object’ 문자가 나오는 모든 타입은 전부 object라는 타입으로 명시가 된다. 그렇기 때문에 객체({}), 배열([]), 함수(function () {})도 object 타입을 통해서 명시할 수 있다.

이렇게 object 타입은 엄격하지 않기 때문에 거의 사용하지 않고, 각 데이터 속성에 타입이 명시된 객체 형태 또는 Interface를 사용한다.

const userA: {
    name: string
    age: number
    isValid: boolean
} = {
    name: 'Heropy',
    age: 85,
    isValid: true
}

인터페이스

새로운 객체를 만들 때마다 다시 객체의 타입 정의를 작성해야 되는 문제가 있다. 이때 이름을 지정한 인터페이스 개념으로 별도의 객체 타입을 재사용 함으로써 문제를 쉽게 해결할 수 있다.

userA나 userB 같은 경우는 user 라는 인터페이스로 만들어진 하나의 타입이 존재하기 때문에 기존 속성을 제외하고 다른 속성은 추가할 수 없다. 다른 속성을 추가하면 에러가 발생한다. 이는 타입스크립트의 정적 타입 언어로서의 큰 장점으로 작용할 수 있다. 지정한 type과 다른 잘못된 속성을 작성했을 때 바로바로 문제를 확인할 수 있다. 예시로 ‘isValid’ 속성을 ‘isValib’로 작성하여 오타가 났을 경우 에러를 통해서 잘못되었다는 것을 알려준다.

타입스크립트에서 인터페이스를 작성할 때, JavaScript의 클래스와 같이 pascalcase의 대문자로 작성하는 이유는 일반적인 변수들과 구분을 하기 위해서다.

interface User {
    name: string
    age: number
    isValid: boolean
}

const userA: User = {
    name: 'Heropy',
    age: 85,
    isValid: true
}

const userB: User = {
    name: 'Neo',
    age: 22,
    isValid: false
}

함수

함수를 만들 때는 어떤 데이터 타입을 인수로 넣어야 하고, 함수가 실행되고 나서는 어떤 데이터 타입이 반환 되는지 명시한다. 타입 자체가 우리가 알고 있는 하나의 화살표 함수처럼 생겼다. 소괄호 부분의 내용은 매개 변수의 타입이 지정되는 부분이고, 화살표 기호 뒤쪽에는 함수가 반환하는 데이터의 타입을 지정한다.

함수에서 매개변수를 받지 않는 경우 빈 소괄호(())로 표시할 수 있으며, undefined가 반환되는 별도의 return 키워드가 없는 함수의 경우 void 타입을 붙여준다. 즉, 함수를 실행하고 나서 반환되는 데이터를 변수에 할당하는 것은 별 의미가 없다는 것을 명시적으로 나타내는 타입이라고 볼 수 있다.

const add: (x: number, y: number) => number = function (x,y) {
    return x + y
}
const a: number = add(1,2)

const hello: () => void = function () {
    console.log('Hello world ~')
}
const h: void = hello()

함수 타입의 경우 조금 특이하게 중간에 타입을 명시하는 것이 없더라도, 함수 자체에서 매개변수와 반환하는 데이터의 타입을 명시할 수 있다.

const add2 = function (x: number,y: number): number {
    return x + y
}

const hello2 = function (): void {
    console.log('Hello world ~')
}

함수 타입을 지정할 수 있는 방법은 위와 같이 두 가지 방식과 함께 인터페이스 호출 시그니처(Call Signature) 타입을 지정하는 총 3가지 방식이 있다.

 

 

Reference

---

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

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

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

 

김영웅 강사님 유튜브 채널

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

HEROPY