TypeScript : TypeScript의 타입 지정

Vue를 시작하면서 TypeScript까지 함께 공부하게 되면서 타입 지정이라는 것을 알게 되었다.

현재는 어느 정도 익숙해져 있어 이번에 기억을 토대로 내용을 정리해보려고 한다.

아래 글을 Vue3와 Typescript를 사용할 때 쓰는 방식을 기준으로 한다.

 

 

 

TypeScript란?

자바스크립트에 타입을 부여한 언어로 자바스크립트에서 확장된 언어라고 할 수 있다.

브라우저는 실행하려면 한 번 변환하는 과정인 컴파일(Compile)을 거쳐야 한다.

 

 

왜 TypeScript를 사용하는가?

1) 에러의 사전 방지

2) 코드 가이드 및 자동완성(개발  생산성이 향상된다.)

 

 

TypeScript의 타입 정리

1) String

import { ref } from "vue";

const color: string = "blue";
const model5 = ref<string>("니오");

여기서 콜론( : )은 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotatio)라고 한다.

 

2) Number

import { ref } from "vue";

const count: number = 0;
const range3 = ref<number[]>([-5, 5]);
const count = ref<number>(9);

 

3) Boolean

import { ref } from "vue";

const isDone: boolean = false;
const reveal = ref<boolean>(false);`

 

4) Object

 

5) Array

import { reactive } from 'vue';

// Number
const list: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const list = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

// String
const aligns: Array<string> = ["start", "center", "end"];

 

6) Tupie

배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.

let arr: [string, number] = ['hi', 10];

 

7) Enum

C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 서로 연결된 특정 값(상수)들의 집합을 의미한다.

enum Avengers { Capt, IronMan, Thor };

let hero: Avengers = Avengers.Capt;
// OR
let hero: Avengers = Avengers[0]; // Capt

원한다면 이넘의 인덱스를 사용자 편의로 변경하여 사용할 수도 있다. 변경 시 이후의 숫자는 그 뒤 숫자로 부를 수 있다.

enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

 

8) Any

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

 

9) Void

let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

 

10) Null

 

11) Undefined

 

12) Never

이 코드는 절대 함수의 끝까지 실행되지 않는다는 의미를 포함하고 있다.

function neverEnd(): never {
  while (true) {

  }
}

 

 

 

다양한 타입이 있지만, 아직 다 정리를 하진 못하였다.

이 글은 어디까지나 필자가 이해한 내용을 바탕으로 작성을 원칙으로 한다.

 

 

 

최초 작성 : 22. 10. 29