[Vue.js] Vue 3 + TypeScript #4 - 타입 기초(Type Fundamentals)

타입스크립트의 기본 개념 중 하나인 개발을 향상하는 데 사용하는 정적 타입 정의하는 방법을 살펴보자.

이번 포스팅에서는 타입스크립트에서 유용하고 자주 사용하는 일부 타입들을 살펴본다.

2021.03.09 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript)

[Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript)

기본 타입들

String

Number

Boolean

Array

Function

Object

 

자바스크립트에서 사용되는 기본 타입들이다.

프로그래밍 세계에서는 더 많은 타입들이 존재한다.

더 많고 깊은 타입들에 대해 알아보려면 아래 링크를 참고

developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

JavaScript data types and data structures - JavaScript | MDN

타입스크립트에서 보는 새로운 타입들(New Types from TypeScript)

자바스크립트에서도 많은 네이티브 타입들이 있지만, 타입스크립트에서 다른 프로그래밍 언어에서 제공되는 타입들을 추가로 제공한다.

 

- any : 변수에 어떠한 타입도 할당받을 수 있다. 기본적으로 타입 체킹을 하지 않는 것과 같다.

- tuple : 타입이 명시 되어 있는 고정된 수의 요소를 포함한 타입 배열을 정의한다.

- enum : numberic 값들을 익숙한 네임으로 정의할 수 있다.

 

이 포스팅에서는 타입에 대한 모든 걸 다루지 않는다. 필요하면 아래 링크를 통해 참고하자.

Handbook - Basic Types

 

[TypeScript] 타입스크립트 시작하기

변수에 타입을 적용하는 방법(How to Apply a Type to a Variable)

이제 타입에 대해 조금 친숙해졌으니 사용하는 방법을 알아보자.

String, Number and Booleans

타입스크립트에서는 :(세미콜론)을 이용해 타입을 정의할 수 있다.

let stageName: string = 'A Beautiful Vue'
let roomSize: number = 100
let isComplete: boolean = false

 

Arrays

타입스크립트에서 배열을 정의하는 건 간단하지 않다.

let shoppingList: array = ['apple', 'bananas', 'cherries']

타입스크립트에서는 배열에 예상되는 타입들에 대해 명시적으로 알려야 한다.

일반적인 배열 정의하는 방법이랑 약간 다르다.

위에 shoppingList 예를 들면 Array 리스트에 무조건 string만 포함해야 된다는 걸 알 수 있다.

그 결과, 아래와 같이 배열을 정의한다.

let shoppingList: string[] = ['apple', 'bananas', 'cherries']

Function

함수에 타입을 추가할 때, 몇 가지 방법이 있다. 여기서는 필요한 핵심 부분만 알아보자.

- Parameters

- Return

 

함수에 타입을 추가하는 방법을 알아보기 위해, ES6 arrow function을 사용한 geterateFullName 메서드를 살펴보자.

아래 코드는 타입스크립트를 이용한 타입을 추가하기 전 상태이다.

let generateFullName = (firstName, lastName) => {
	return firstName + ' ' + lastName
}

위에 코드는 String이 firstName, lastName에 들어오길 원하지만 어떠한 타입이든 들어올 수 있는 상태이다.

당연히 return값도 String이길 원한다.

그러기 위해서는 우선 parameter에 type을 정의하고 그리고 return type도 정의한다.

parameter는 각 parameter 뒤에 :(세미콜론) 사용 후 type을 지정하면 된다.

return type은 전체 parameter 감싼 괄호 뒤에 :(세모 콜론) 사용 후 type을 지정하면 된다.

let generateFullName = (firstName: string, lastName: string): string => {
  return firstName + ' ' + lastName
}

Object

객체 값에 대해서는 타입을 어떻게 지정하는지, person 객체로 살펴보자.

let person = {
  name: 'Peter Parker',
  age: 20,
  activeAvenger: true,
  powers: ['wall-crawl', 'spider-sense']
}

person 객체에 각각 key-value에 타입을 지정하려면 아래와 같이 작성한다.

객체를 2번 선언한 것과 같은 느낌이 들지만 타입을 선언하는 방식은 객체 선언방식과는 다르다.

:(세미콜론) 뒤에 객체를 만들고 key값에다 타입을 지정해주면 된다.

let person: {
  name: string;
  age: number;
  activeAvenger: boolean;
  powers: string[];
} = {
  name: 'Peter Parker',
  age: 20,
  activeAvenger: true,
  powers: ['wall-crawl', 'spider-sense']
}

타입의 제한(Limitations of Predefined Types)

자바스크립트, 타입스크립트가 제공하는 미리 정의된 타입들로 많은 것을 만들 수 있다.

하지만, 직접 사용하다 보면 기술적인(descriptive) 타입들에 대한 아쉬움이 있다.

예를 들면, 개발자들이 미리 정의된 버튼 스타일 타입(e.g., primary, seconday, error, disabled)을 변수에 할당해야 되는 경우이다.

현재까지 배운 내용으로 보면 아래와 같이 string 타입을 선언해주면 된다.

let buttonStyles: string = 'primary'

위와 같이 적으면 작동은 되나 개발자들이 잘못된 타입들을 할당하는 것을 막진 못한다.

이런 custom types을 정의하고 더 좋고 유용한 지식이 필요하다.

결론

타입스크립트에 꼭 필요한 타입을 살펴보았다. 정말 기초 중에 기초만 살펴본 건데 명시적, 정적 타입을 사용하면 정말 코드의 오류, 디버깅, 리팩터링 등 엄청난 효과가 있을 것 같다.

 

2021.03.11 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #4 - 타입 기초(Type Fundamentals)

[Vue.js] Vue 3 + TypeScript #4 - 타입 기초(Type Fundamentals)