🔰 타입이란?
타입은 값이 가진 프로퍼티와 메서드 등을 참조하는 방법.
=> 즉, 이 값이 어떤 속성을 가지고 있는지 표현하는 방법이다.
type Profile = {
id: string;
name: string;
age: number;
isMarried: boolean;
}string, boolean처럼 이미 정해진 타입(원시타입) 말고도 우리가 타입을 직접 정의해 줄 수도 있다.
선언 가능한 모든 타입 총 정리
🔰 타입 정의 방식
기본 형태
function someFunc(a: TYPE_A, b: TYPE_B): TYPE_RETURN {
return a + b;
}
let some: TYPE_SOME = someFunc(1, 2);예시
function add(a: number, b: number): number {
return a + b;
}
const sum: number = add(1, 2);
console.log(sum); // 3에러 예시
function add(a: number, b: number): number {
return a + b;
}
const sum: string = add(1, 2); // Error
console.log(sum);변수 sum을 number가 아닌 string 타입으로 지정하면 컴파일 시점에서 아래와 같은 에러가 발생 
🔰 타입 선언
주요 타입
불린 : boolean
let isBoolean: boolean;
let isDone: boolean = false;숫자 : number
let num: number;
let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d; // 61453
let binary: number = 0b1010; // 10
let octal: number = 0o744; // 484
let infinity: number = Infinity;
let nan: number = NaN;문자열 : string
let str: string;
let red: string = 'Red';
let green: string = 'Green';
let myColor: string = `My color is ${red}`;
let yourColor: string = 'Your color is ' + green;배열 : Array
let fruits: string[] = ["Apple", "Banana", "Mango"];
let fruits: Array<string> = ["Apple", "Banana", "Mango"];
let oneToSeven: number[] = [1, 2, 3, 4, 5, 6, 7];
let oneToSeven: Array<number> = [1, 2, 3, 4, 5, 6, 7];
let array: (string | number)[] = ["Apple", 1, 2, "Banana", "Mango", 3];
let array: Array<string | number> = ["Apple", 1, 2, "Banana", "Mango", 3];
let someArr: any[] = [0, 1, {}, [], "str", false];인터페이스 : interface
interface IUser {
name: string;
age: number;
isVaild: boolean;
}
let userArr: IUser[] = [
{
name: "Neo",
age: 10,
isVaild: true,
},
{
name: "Lewis",
age: 64,
isVaild: false,
},
{
name: "Evan",
age: 123,
isVaild: true,
},
];타입 별칭 : type
type User = {
name: string;
age: number;
isValid: boolean;
};
let userArr: User[] = [
{
name: "Neo",
age: 10,
isValid: true,
},
{
name: "Lewis",
age: 64,
isValid: false,
},
{
name: "Evan",
age: 123,
isValid: true,
},
];Null과 Undefined
let undefin: undefined = undefined;
let nul: null = null;
let stringOrNull: string | null = null;
let numberOrUndefined: string | undefined = undefined;모든 타입 : any
let any: any = 123;
any = 'play game';
any = {};
any = null;
const arr: any[] = [1, true, 'typescript'];void
리턴 값이 없는 타입.
function coding(msg: string): void {
console.log(`Happy ${msg}`);
}유니온(Union)
유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(
||)와 같이 A이거나 B라는 의미의 타입.
| 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부릅니다.
let union: (string | number);
union = 'Hello World';
union = 777;
union = false; // Error인터섹션(Intersection)
인터섹션 타입(Intersection Type)은 두 개 이상의 타입을 조합하여 하나의 타입으로 합치는 방식. 이는 자바스크립트의 AND 연산자(
&&)와 비슷한 개념으로, A이면서 동시에 B인 타입을 의미.
interface User {
name: string,
age: number
}
interface Validation {
isValid: boolean
}
const testCase2: User & Validation = {
name: 'jisu',
age: 30,
isValid: true
}
함수(Function)
let myFunc: (arg1: number, arg2: number) => number;
myFunc = function(x, y) {
return x + y;
}
myFunc(1, 2); // 3
let noneFunc: () => void;
noneFunc = function () {
console.log('hihi');
};
커스텀 타입 : Type alias vs interface
타입 별칭(type alias)과인터페이스(interface)는 매우 유사하며, 많은 경우 자유롭게 선택할 수 있다. 인터페이스의 거의 모든 기능이 타입에서 사용할 수 있다.
주요 차이점
타입은 새로운 속성을 추가하기 위해 다시 열 수 없지만
인터페이스는 항상 확장 가능하다는 점이다.
// Type alias
type ExampleType = {};
type StringType = string;
type UnionType = string | number
// interface
interface ExampleInterface {
example : string;
}차이점 1. 확장성(Extensibility)
interface Hello {
name: string
}
interface Hello {
age: number
} // ✅ 가능, Hello 는 name 과 age 모두를 포함하게 됨
type Hello2 = {
name: string
}
type Hello2 = {
age: number
} // ❌ 불가능- 인터페이스(interface) : 인터페이스는 항상 확장 가능하다. 다른 인터페이스를 상속하거나 동일한 이름으로 다시 열어 새로운 속성을 추가할 수 있다.
- 타입 별칭(type alias) : 타입 별칭은 한 번 정의되면 다시 열어 새로운 속성을 추가할 수 없다. 따라서 동일한 타입에 새로운 속성을 추가해야 하는 경우 인터페이스가 더 유리하다.
차이점 2. 복잡한 타입 표현(Complex Type Expressions)
- 인터페이스(interface) : 객체 형태의 타입을 정의하는 데에 주로 사용된다.
- 타입 별칭(type alias) : 객체 형태 뿐만 아니라, 유니온 타입, 튜플, 매핑된 타입 등 복잡한 타입 표현에 유리하다.
type A = B | C처럼 더 다양한 타입을 정의할 수 있다.
