개발/Javascript & Typescript

[Typescript] 타입스크립트 중요한 타입

devhooney 2024. 2. 4. 10:53
728x90

 

 

 

타입스크립트 기초

 

 

 

728x90

 

 

1. Enum 타입

Enum을 사용하면 이름이 붙은 상수 Set을 정의할 수있다.

JS에는 없는데 유용하다.

// 기존에 이렇게 사용 하던 것을
const aaa = {
	'bbb': '1',
    'ccc' : '2',
}


// 이렇게 사용 할 수 있다.
enum Aaa = {
	BBB,CCC
}

const ddd: Aaa = Aaa.BBB;
console.log(ddd); // 1

 

 

2. 제네릭 타입

제네릭은 클래스와 함수에 대해, 그 안에서 사용하는 타입을 추상화해 외부로부터 구체적인 타입을 지정할 수 있는 기능.

// T는 클래스 안에서 사용하는 임시 타입 이름.
class Aaa<T> {
	private bbb: T[] = [];
    
    push(item: T) {
    	this.bbb.push(item);
    }
    
    pop(): T | undefined {
    	return this.array.shift();
    }
}


const aaa = new Aaa<number>();
aaa.push(111);
aaa.push(222);

aaa.pop();

 

 

3. Union 타입, Intersection 타입

타입스크립트의 타입은 조합해서 사용할 수 있다.

function printId(id: number | string) {
	console.log(id);
}

printId(1);

printId('test');

// 타입앨리어스도 가능하다.
type Id = number | string

function printId2(id: Id) {
	console.log(id);
}

printId2(11);

 

타입 앨리어스 여러 개를 정할 수 있다.

type Identity = {
	id: number | string;
    name: string;
}

type Contact = {
	name: string;
    email: string;
}

type IdentityOrContact = Identity | Contact

const id: IdentityOrContact = {
	id: 1;
    name: 'aaa';
}

const contact: IdntityOrContact = {
	name: 'aaa';
    email: 'bbb@email.com';
}

 

Intersection 예시를 보면

type Employee = Identity & Contact

const employee: Employee = {
	id: 111;
    name: 'aaa';
    email: 'aaa@email.com';
}

 

Intersection은 꼭 두개의 타입을 만족해야 한다. &의 의미를 생각하면 될 것 같다.

 

 

4. 리터럴 타입

|로 데이터를 구분하는 리터럴 타입을 사용하면 정해진 문자열이나 수치만 대입할 수 있는 타입으로 제어할 수 있다.

// 문자열
let aaa: 'aaa' | 'bbb';

aaa = 'aaa';
aaa = 'ccc'; // Error 발생


// 숫자
function ccc(a: string, b: string) : -1 | 0 | 1 {
	return a === b ? 0 : a > b ? 1 : -1;
}

 

 

5. never 타입

never 타입은 절대로 발생하지 않는 값의 종류를 나타낸다.

// 에러가 항상 반환되는 함수로 절대 값이 정상으로 반환되지 않을 때 never사용
function error(message: string) never {
	throw new Error(message);
}

// never를 사용해서 명시적으로 값이 반환되지 않은 것을 컴파일러에 전달 가능
// never를 사용하지 않으면 타입스크립트는 컴파일 에러가 발생
function aaa(x: string | number | number[]): boolean {
	if (typeof x === 'string') {
    	return true;
    } else if (typeof x === 'number') {
    	return false;
    }
    
    return error('never type!');
}

 

 

 

https://link.coupang.com/a/bo3FAk

 

위키북스 실전 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발

COUPANG

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

728x90