원시 타입
let num: number = 555;
let str: string = 'this is string';
let bool: boolean = true;
let nullType: null = null;
let undefinedType: undefined = undefined;
let symbolType: symbol = Symbol('mySymbol');
배열 타입
let arr: number[] = [1, 2, 3];
let arr1: Array<number> = [1, 2, 3];
let arr3: Array<number | string | boolean> = [1, true, 'sss'];
Tuple(튜플)
튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다. 주의할 점은 튜플의 경우 push하는 행위는 막지 못한다.
let tuple: [boolean, number, string] = [true, 111, '11'];
상수
일반적으로 const로 상수를 선언하면 값을 변경하거나 재할당 할 수 없다. 하지만 객체와 배열의 경우 const로 상수를 선언하였다 하더라도 아래와 같이 값의 재할당이 가능하다.
이러한 재할당을 방지하여 완전한 변경없는 객체를 만들고자 할 때에는 as const 키워드를 사용하면 된다.
const obj = { a: 1, b: 2 };
obj.a = 3; //값을 재할당 할 수 있다.
const objAsConst = { a: 1, b: 2 } as const;
objAsConst.a = 3; //Error 발생
Enum
enum 멤버에 숫자로 값을 할당하면 1씩 값을 증가하여 값이 자동적으로 대입된다.
enum fruit {
apple = 10,
watermelon,
strawberry,
pineapple,
}
fruit.watermelon; //(enum member) fruit.watermelon = 11
enum은 이넘 멤버에 인덱스 번호로도 접근이 가능하며, 반대로 값으로 인덱스 값에 접근 가능하다.
enum Color {
Red,
Green,
Blue,
}
let c: Color = Color.Green;
Color[0] === 'Red';
Color[1] === 'Green';
Color[2] === 'Blue';
Color['Red'] === 0;
Color['Green'] === 1;
Color['Blue'] === 2;
함수 타입
매개변수와 반환값의 타입을 정의할 수 있다.
function add(a: number, b: number): number {
return a + b;
}
- 고차함수 타입 작성
고차함수는 함수를 반환하는 함수이다. 아래와 같이 반환 타입을 작성할 수 있다.
function add(a: number, b: number): (c: string) => number {
return (c: string) => {
return 3;
};
}
- 객체안에 메서드 타입 작성
//객체 안에 메서드 타입 정의 하는방법
const obj2: { a: () => string } = {
a() {
return 'hello';
},
};
//객체 안에 메서드 타입 정의 하는방법 (매개변수가 있는경우 일치 시키기)
const obj3: { aFunc: (parameter: number) => string } = {
aFunc(parameter: number) {
return 'hello';
},
};
any
모든 타입을 넣을 수 있는 타입이다. 왠만해서 any를 최대한 피하면 좋다.
자바스크립트나 다른 프로젝트를 타입스크립트로 바꾸어 나갈때 any라는 타입으로 지정하고 하나씩 변경해 나가면 좋다.
다른 사람이 만든 d.ts를 가져다가 사용하거나 타입을 정의하기 너무 복잡할 경우 any를 사용하기도 한다.
let arr1: any = [1, 2, '3', true];
let arr2: any = 111
let arr3: any = 'string'
never
일반적으로 함수의 리턴 타입으로 사용되며 항상 오류를 출력하거나 리턴값이 끝나지 않는 무한 루프에 사용된다.
// 항상 오류 발생
function invalidError(message: string): never {
throw new Error(message);
}
// never 타입을 결과 추론(Inferred)
function fail() {
return invalidError('fail');
}
// 무한 루프
function infiniteLoop(): never {
while (true) {
infiniteLoop();
}
}
void
함수에 반환(return)값이 없는 경우 사용한다.
function noReturn(): void {
console.log('nothing');
}
Type assertions (타입 단언 / 타입 캐스팅)
as, as unknown as, <type><unknown> 키워드를 사용하여 다른 사람이 작성한 타입을 강제로 변경할 수 있다.
부모 자식 관계의 타입의 경우 as 키워드만으로도 강제 형 변환이 가능하다.
// 자식 부모 관계
const div = document.createElement('div'); // Type => HTMLDivElement
div as HTMLElement // Type => HTMLElement
// 자식 부모 관계 X
const changeDiv = div as unknown as string; // Type => string
// 자식 부모 관계 X
const hello: number = 3;
(<string>(<unknown>hello)).substr(1, 2);
Union Type (유니언 타입)
유니언 타입은 | 기호를 사용하며 자바스크립트 || (OR) 연산자의 의미를 갖는 타입이다.
작성된 두가지 타입 중 하나만 충족되면 인자값으로 받을 수 있다.
const logMessage = (value: string | number) => {
console.log(value);
};
logMessage('good morning');
logMessage(12345);
유니언 타입으로 인터페이스가 두가지이상 오면 공통된 속성만 사용이 가능하다.
타입 가드를 사용하면 특정 인터페이스 모두를 사용할 수 있다. 타입가드는 조건문을 통합 타입 체킹
Intersection Type (인터섹션 타입)
인터섹션 타입은 & 기호를 사용하며 유니언 타입과 달리 작성된 타입 모두가 만족되어야 인자 값으로 받을 수 있다.
interface PersonDataOne {
name: string;
}
interface PersonDataTwo {
age: number;
}
const handleData = (person: PersonDataOne & PersonDataTwo): void => {
console.log(person);
};
handleData({ name: 'lee' }); //Error
handleData({ name: 'lee', age: '20' });//Error
handleData({ name: 'lee', age: 20 });
인터페이스 두개를 충족해야 되므로 name과 age를 모두 작성해야 되고 타입 또한 모두 일치해야 한다.
댓글
댓글 쓰기