Lai_Khan
개발 & 공부 일지
Lai_Khan
전체 방문자
오늘
어제
  • 전체보기 (69)
    • 공부 (60)
      • 자료구조 & 알고리즘 (4)
      • 웹 (1)
      • JAVA (3)
      • Spring (8)
      • JPA (0)
      • 네트워크 (4)
      • Kubernetes (4)
      • Typescript (5)
      • React (1)
      • 기타 (3)
      • [부스트코스] 웹 프로그래밍 (13)
      • 정보처리기사 (1)
      • 백준 2020년 1~2월 알고리즘 (12)
    • 프로젝트 (0)
    • 취준 (1)
    • 책 (3)
    • 잡담 (5)

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • 네트워크
  • API
  • http
  • OutOfPath
  • 코드리뷰
  • 브라우저
  • Spring
  • typescript
  • JPA
  • 웹
  • kubernetes
  • 스프링
  • java
  • 벡엔드
  • 자바
  • 부스트코스
  • 객체
  • 클래스
  • proxy
  • 백엔드

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Lai_Khan
공부/Typescript

[Typescript] Interface (인터페이스)

[Typescript] Interface (인터페이스)
공부/Typescript

[Typescript] Interface (인터페이스)

2020. 4. 24. 21:30

기본적인 사용법

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

const person: Person = {
    name: 'Mark',
    age: 35
};

function hello(p: Person): void {
	console.log(`안녕하세요 ${p.name}`);
}

 

 

optinal property 1

// 이렇게 하면 age는 있어도 되고 없어도 된다.
interface Person {
    name: string;
    age?: number;
}

function hello(person: Person): void {
    console.log(`안녕하세요! ${person.name}입니다.`);
}

const p1: Person = {
    name: 'Mark',
    age: 35
};

const p2: Person = {
    name: 'Anna'
};

hello(p1);	// 안녕하세요! Mark입니다.
hello(p2);	// 안녕하세요! Anna입니다.

 

optinal property 2

// indexable type. string이나 number만 된다. Array또는 Dictionary의 형태를 가진다.
interface Person {
    name: string;
    age?: number;
    [props: string]: any;
}

function hello(person: Person): void {
    console.log(`안녕하세요! ${person.name}입니다.`);
}

const p1: Person = {
    name: 'Mark',
    age: 35
};

const p2: Person = {
    name: 'Anna',
    sisters: [
        'Sung',
        'Chan'
    ]
};

const p3: Person = {
    name: 'Bokdaengi',
    father: p1,
    mother: p2
};

hello(p1);	// 안녕하세요! Mark입니다.
hello(p2);	// 안녕하세요! Anna입니다.
hello(p3);	// 안녕하세요! Bokdaengi입니다.

 

function in interface

interface에 function을 넣어보자

interface Person {
    name: string;
    age: number;
    hello(): string;
}

const p1: Person = {
    name: 'Mark',
    age: 35,
    hello: function(): void {
        console.log(this);
        console.log(`안녕하세요! ${this.name}입니다.`);
    }
};

const p2: Person = {
    name: 'Anna',
    ageL 35,
    hello(): void {
        console.log(this);
        console.log(`안녕하세요! ${this.name}입니다.`);
    }
};

const p3: Person = {
    name: 'Bokdaengi',
    age: 35,
    hello: (): void => {
        console.log(this);
        console.log(`안녕하세요! ${this.name}입니다.`);
    }
};

p1.hello();	// 안녕하세요! Mark입니다.
p2.hello();	// 안녕하세요! Anna입니다.
p3.hello();	// 안녕하세요! Bokdaengi입니다.

 

class implements interface

인터페이스를 구현해서 클래스를 사용하는 법

interface IPerson {
    name: string;
    age?: number;
    hello(): void;
}

class Person implements iPerson {
	name: string;
    
    constructor(name: string) {
        this.name = name;
    }
    
    hello(): void {
        console.log(`안녕하세요! ${this.name}입니다.`);
    }
}

const person = new Person('Mark');
person.hello();	//안녕하세요! Mark입니다.

 

interface extends interface

interface를 다른 interface에게 상속할 수 있다.

interface Person {
    name: string;
    age?: numebr;
}

interface Korean extends Person {
    city: string;
}

const k: Korean = {
    name: '이웅재',
    city: '서울'
}

 

function interface

많이 사용하진 않는다.

interface HelloPerson {
    (name: string, age?: number): void;
}

let helloPerson: HelloPerson = function(name: string) {
    console.log(`안녕하세요! ${name}입니다.`);
}

helloPerson('Mark');	// 안녕하세요! Mark입니다.

 

Indexable Type

string이거나 number만 된다.

interface StringArray {
    [index: number]: string;
}

const sa: StringArray = {};	// 옵셔널하다.
sa[100] = '백';

interface StringDictionary {
    [index: string]: string;
}

const sd: StringDictionary = {};
sd.hundred = '백';

interface StringArrayDictionary = {
    [index: number]: string;
    [index: string]: string;
}

const sad: StringArrayDictionary = {};
sad[100] = '백';
sad.hundred = '백';

 

string index = optional property

interface StringDictionary {
    [index: string]: string;
    name: string;
}

const sd: StringDictionary = {
    name: '이름'	// 필수
};
sd.hundred = 'any';	// 어떤 프로퍼티도 가능

//////////////////////////////////////////////

interface StringDictionaryNo {
    [index: string]: string;
    // name: number;  // (X) 인덱서블 타입이 string 값을 가지기 때문에 number를 필수로 끌어오면 에러
}

이 경우에 string 인덱스의 값이 string인데 name이라는 number 변수가 필수로 더 있으면 에러가 난다. 에러가 나지 않으려면 name도 number여야 한다.

저작자표시 비영리 변경금지 (새창열림)

'공부 > Typescript' 카테고리의 다른 글

[Typescript] Type assertion, Type alias  (0) 2020.04.24
[Typescript] var, let, const  (0) 2020.04.22
[Typescript] 자료형  (0) 2020.04.20
[Typescript] 개발환경 구축 및 컴파일러 사용  (0) 2020.04.19
  • 기본적인 사용법
  • optinal property 1
  • optinal property 2
  • function in interface
  • class implements interface
  • interface extends interface
  • function interface
  • Indexable Type
  • string index = optional property
'공부/Typescript' 카테고리의 다른 글
  • [Typescript] Type assertion, Type alias
  • [Typescript] var, let, const
  • [Typescript] 자료형
  • [Typescript] 개발환경 구축 및 컴파일러 사용
Lai_Khan
Lai_Khan

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.