타입스크립트 - 선언 & 종류

오늘은 타입스크립트를 사용할 때 타입 선언 방법과 종류들에 대해서 적어보려고 한다.

변수 타입 선언

const age: number = 24;

변수를 생성할 때 원하는 변수명 옆에 :(콜론)을 붙여 원하는 타입을 설정한다.

함수 타입 선언

function getAge(name: string): number {
 ...
 return age;
}
const get = (name?: string): number => {
 ...
 return age;
}

함수를 생성할 때 매개변수 옆에 :(콜론)을 붙여 원하는 타입 설정한다.
매개변수에 타입을 선언할 경우 필수 값으로 정의되어 값이 없으면 오류가 발생하는데,
필수값으로 처리하지 않을 매개변수 옆에 ?를 붙일 경우 null, undefined 값도 처리할 수 있도록 한다.
또한 함수의 리턴 값이 있을 경우 () 옆에 원하는 타입을 설정해주면 된다.

타입 종류

- String

const name: string = '김용민';

값이 문자열인 경우 사용한다.

- Number

const age: number = '24';

값이 숫자인 경우 사용한다.

- Boolean

const isLoading: boolean = false;

값이 true/false 같은 진위 값인 경우 사용한다.

- Object

const kym: object = {
	name: '김용민',
    age: 24
};

객체인 경우 사용한다.
Object 타입은 밑에 나오는 any와 같이 모든 타입을 허용한다.

interface UserType = {
	name: string;
    age: number;
}
type UserType = {
	name: string;
    age: number;
}

const kym: UserType = {name: '김용민', age: 24};

그렇기에 객체는 interface와 type이라는 키워드를 통하여 타입을 정의한다.

type과 interface의 간단한 차이점

1. interface는 캐싱처리가 가능하다.

// interface 캐싱 예시
interface userType {
	name: string;
    age: number;
}
interface userType {
	gender: string;
}

const user:userType = {
	name: '김용민',
    age: 24,
    gender: '남자'
}

// type 캐싱 예시
type userType {
	name: string;
    age: number;
}
// 동일한 이름의 type을 재선언하면 오류가 발생하게됨.
type userType {
	gender: string;
}

2. 타입 확장 방법이 다르다.
   interface는 extends 키워드를 사용하여 확장 시킬 수 있다.

interface car {
	brand: string; 
}

interface sportsCar extends car {
	speed: number;
}

type은 '&' 및 '|' 등의 연산자를 사용하여 유니온이나 인터섹션을 통해 타입을 결합 할 수 있다.

type car {
	brand: string;
}

type sportsCar = car & {
	speed: number;
}

- Array

const list: string[] = ['김용민', '박용민', '이용민'];
const list: Array<string> = ['김뱀민', '김소민', '김닭민'];
const list: Array<string | number> = ['김용박', '김용진', 11, 22];

정해져있지 않은 배열인 경우 사용한다.
배열 안에 요소 타입이 한가지로 정해지지 않고 여러가지로 들어가는 경우 "|"를 통해서
유니온 타입을 선언할 수 있다.

- Tuple

const list: [string, number] = ['김용민', 24];

배열 길이가 고정이며 요소의 타입이 지정된 경우에 사용한다.

- Enum

enum week {
	sunday, // 0
    monday, // 1
    tuesday, // 2
    wedneday, // 3
    thursday, // 4
    friday, // 5
    saturday // 6
}

여러 값들의 번호를 매기는 경우에 사용한다.

- any

const name: any = '김용민';
const age: any = '24';
const isLoading: any = false;

모든 타입에 대해서 허용하는 경우에 사용한다.

- void

const voidTest = (): void => {
	console.log('void 테스트입니다.');
}

리턴 값이 없는 함수일 경우에 사용한다.

- Never

const voidTest = (): never => {
	while(true) {
    	...
    }
}

절대로 함수 끝까지 실행되지 않을 경우에 사용한다.