[Nuxt.js] TypeScript 타입과 TypeScript를 활용하여 Nuxt.js 컴포넌트 작성하기

최근 웹 개발에서 TypeScript의 인기가 높아지고 있습니다. 

TypeScript는 JavaScript의 상위 집합으로, 정적 타입을 지원하여 코드의 안정성을 높여줍니다.

이번 글에서는 Nuxt.js와 TypeScript를 함께 사용하는 방법에 대해 알아보겠습니다.

 

 

TypeScript 란? 

TypeScript는 Microsoft에서 개발한 프로그래밍 언어로, JavaScript에 타입 시스템을 추가한 것입니다. 

TypeScript를 사용하면 변수, 함수, 객체 등에 타입을 명시할 수 있어, 코드 작성 시 오류를 사전에 방지할 수 있습니다.

또한, IDE에서 제공하는 자동 완성 기능과 타입 체크를 통해 개발 생산성을 높일 수 있습니다.

- Nuxt.js에서 TypeScript를 사용하는 이유

• 코드 안정성: TypeScript의 정적 타입 시스템을 통해 런타임 오류를 줄일 수 있습니다.
• 개발 생산성 향상: IDE의 타입 정보 제공으로 코드 작성이 더 쉬워집니다.
• 유지보수 용이: 명확한 타입 정의로 코드의 가독성이 높아져, 팀원 간의 협업이 원활해집니다.

 

- TypeScript의 주요 타입

기본 타입

• number: 숫자 타입 (예: 1, 3.14)
• string: 문자열 타입 (예: "Hello, World!")
• boolean: 불리언 타입 (예: true, false)

배열 타입

• 배열의 타입을 정의할 수 있습니다. 예를 들어, 숫자 배열은 number[]로 정의할 수 있습니다.

let numbers: number[] = [1, 2, 3];

 

튜플 타입

• 고정된 수의 요소를 가지며, 각 요소의 타입이 다를 수 있는 배열입니다.

let tuple: [string, number] = ["Alice", 30];

 

객체 타입

• 객체의 구조를 정의할 수 있습니다. 예를 들어, 사용자 정보를 담는 객체는 다음과 같이 정의할 수 있습니다.

interface User {
  id: number;
  name: string;
}

 

열거형 (Enum)

• 특정 값의 집합을 정의할 수 있는 타입입니다. 예를 들어, 상태를 정의할 때 유용합니다.

enum Status {
  Active,
  Inactive,
  Pending,
}

 

유니온 타입

• 여러 타입 중 하나를 가질 수 있는 타입입니다. 
  예를 들어, 문자열 또는 숫자를 받을 수 있는 변수를 정의할 수 있습니다.

let id: string | number;

 

제네릭

다양한 타입을 처리할 수 있는 함수나 클래스를 정의할 수 있습니다. 
예를 들어, 배열의 요소 타입을 동적으로 지정할 수 있습니다.

function identity<T>(arg: T): T {
  return arg;
}

 

 

- Nuxt.js 프로젝트에 TypeScript 설정하기

Nuxt.js 프로젝트에 TypeScript를 설정하는 과정은 간단합니다.

#1 Nuxt.js 프로젝트 생성

: 먼저, Nuxt.js 프로젝트를 생성합니다. 터미널에서 다음 명령어를 입력합니다.

npx create-nuxt-app my-nuxt-app

 

이 과정에서 TypeScript를 사용할 것인지 묻는 질문이 나오면 'Yes'를 선택합니다.

 

#2 TypeScript 관련 패키지 설치

: Nuxt.js 프로젝트가 생성되면, TypeScript 관련 패키지가 자동으로 설치됩니다.

추가적으로 필요한 패키지가 있다면 다음 명령어로 설치할 수 있습니다.

npm install --save-dev @nuxt/types @nuxt/typescript-build

 

#3 tsconfig.json 설정

: 프로젝트 루트에 tsconfig.json 파일이 생성됩니다. 이 파일에서 TypeScript의 설정을 조정할 수 있습니다.

기본 설정을 유지하되, 필요에 따라 추가적인 설정을 할 수 있습니다.

 

- TypeScript로 Nuxt.js 컴포넌트 생성

#1 컴포넌트 생성

: components 폴더에 Counter.vue 파일을 생성합니다.

<template>
  <div>
    <h1>카운터: {{ count }}</h1>
    <button @click="increment">증가</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
});
</script>

<style scoped>
/* 스타일 추가 */
</style>

 

 

#2 타입 정의

: TypeScript의 장점을 활용하기 위해, 데이터와 메서드에 타입을 정의할 수 있습니다.

예를 들어, count의 타입을 명시할 수 있습니다.

data() {
  return {
    count: 0 as number,
  };
},