TypeScript 인터페이스 타입

TypeScript 인터페이스

재사용이 가능한 구조(같은 모양)의 타입들의 이름을 작명할 수 있다.

1. 속성과 값의 타입을 지정할 수 있다.
2. 값을 지정할 수 있지만 보통 넒은 범위의 타입을 지정한다.
3. 클래스와 마찬가지로 인터페이스도 상속이 가능하다.
4. 동일한 이름의 인터페이스를 여러 개 생성할 수 있다.

 

선언

interface Post {
    postId: number;
    title: string;
    content: string;
    writer: string;
}

const write: Post = {
    postId: 1,
    title: "1번 게시물 타이틀",
    CONTENT: "2번 게시물 내용",
    writer: "관리자",
};

 

 

읽기 전용(readonly)

- 처음 객체 생성 시에 할당하여 그 이후로는 속성값을 바꿀 수 없도록 설정할 수 있다.

- as const와 동일하다.

interface person {
    readonly name: string;
    readonly age: number;
    readonly address: string;
    readonly grade: string;
}

 

- 같은 이름을 가진 인터페이스를 여러 개 생성할 수 있다.

interface Person {
    name: string;
    age: number;
    married: boolean;
}

interface Person {
    email: string;
    grade: string;
}

const user: Person = {
    name: "사용자",
    age: 29,
    married: false,
    email: "admin",
    grade: "일반",
}

 

옵셔널 프로퍼티

- 속성 앞 ?를 붙여 인터페이스 내에 정의한 속성 전부를 사용하지 않을수 있다.

interface optional {
	name: string;
    number?: age;
    address?: string;
}

const user: optional = {
	name: "사용자",
}

 

딕셔너리 패턴

- [key: ""] 속성을 사용하여 어떤 속성과 값이 들어올지 모르는 경우 사용할 수 있다.

interface Temporary {
    name: string;
    [key: string]: string | number; 
}

const obj: Temporary = {
    name: "사용자",
    grade: "일반",
    temporary: "딕셔너리",
}

 

함수(인자) 인터페이스

interface Person {
  name: string;
  age: number;
  done: boolean;
}

function newUser(user: Person): void {
  console.log(user);
}

test({ name: '사용자', age: 29, done: false });

 

함수(구조) 인터페이스

- 인자와 반환값의 타입을 지정할 수 있다.

interface Fun {
  (a: number, b: number): number;
}

const testing: Fun = (a: number, b: number): number => {
  return a + b;
};

 

인터페이스 확장

- 클래스와 마찬가지로 인터페이스도 서로 확장이 가능하다.

interface User {
    name: string;
    age: number;
    introduce: string;
}

interface Info extends User {
    gender: string;
    married: boolean;
}

const user: Info = {
    name: "사용자",
    age: 29,
    introduce: "자기소개",
    gender: "남자",
    married: false,
}
// 또는
const user: {} as Info;

 

TypeScript 타입 별칭

재사용이 가능한 구조(같은 모양)의 타입들의 이름을 작명할 수 있다.

- 특정 타입이나 인터페이스를 참조할 수 있는 변수다.

- 타입을 정의할 수 있는 모든 부분에 사용할 수 있다.

- 새로운 타입을 생성하는 게 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있도록 이름을 작명한다.

- 인터페이스와의 가장 큰 차이는 확장 가능/불가능 여부이다. 확장할 수 없다.

- 인터페이스는 주로 객체 생성 시 타입은 더 넒은 범위로 다재다능하다.

 

// 문자열이나 객체
type typeCheck = string | {};

const strOrObj: typeCheck = {
    name: "관리자",
    grade: "root",
}