사용 환경
Interface란?
사전적으로의 뜻은
- 인터페이스
- 접속기
- 접속하다
라는 뜻을 가지고 있다. TS에서 Interface란 타입을 지정하고 타입을 지정해주는데 사용된다. 뭔가 설계도 같다고 할까!? 이전포스팅의 abstract하고는 무슨차이가 있을까 ? type하고는 또 무슨 차이가 있을까?
Type 과 Interface
type은 좀 더 다양하고 세밀하게 선언해줄 수 있다. string이라고 자료형을 지정해줄 수도 있지만 사용할 데이터들만 지정해 줄 수도 있다.
무언가 ENUM 과 비슷하다..!
type Team = "red" | "blue" | "yellow"
type Heath = 1 | 5 | 10
type Player = {
nickname:string,
team : Team,
health: Health
}
//자 그러면 선언해보겠다.
const hou: Player = {
nickname: "king",
team: "oragne", //기대값이 아니라고 오류가난다.
health: 4, //기대값이 아니라고 오류가난다.
}type은 위에 처럼 값도 지정해줄 수 있다는 장점을 가지공 있다.
Interface는 오로지 오브젝트의 모양을 Typescript에 설명해주기 위해서만 사용되는 키워드이다.
interface person {
nickname: string,
team: Team,
health: Health
}타입과 다른점은 바로 타입은 변수처럼 사용되고, interface는 =이 없다는 점이다!
둘은 서로 굉장히 비슷하다 활용성은 type 이 더 많아보이지만, 가독성은 interface가 좀 더 좋아 보이는 거 같다.
상속
interface User {
name: string
}
interface Player extends User {}
const Hou : Player = {
name : "hou"
}interface도 extends를 활용해서 클래스 처럼 상속할 수 있다! 그러면 User가 그려놓은 name 선언을 그대로 사용할 수 있다.
축적
interface 는 모양을 계속해서 축적 시키면서 자기가 원하는 모양을 만들어갈 수 있다. but type은 그게 가능하지 않다. 가능하긴 하지만 interface보다 더럽다. 한번 아래 코드를 보고 확인해보자
interface User {
name:string
}
interface User {
lastName : string
}
interface User {
health: number
}
const person: User = {
name:"hou",
lastName:"j",
health:10
}위에 코드는 정상 작동한다. 하지만 아래코드는 오류가 난다.
type User = {
name:string
}
type User = {
lastName : string
} 바로 오류가 발생한다. type에도 값을 넣어주는 방법이 있지만, 변수명이 변경되고 코드가 지져분해질 가능성이 높다 아래와 같이 실행하면 된다.
type User = {
name:string
}
type UserA = User & {
lastName:string
}
type UserB = UserA & {
health: number
}
const person: UserB = {
name:"hou",
lastName:"j",
health:10
}type축적은 아무리 봐도 별로인거 같아 보인다.
추상화
abstract로 추상화를 했었는데 interface로도 추상화를 할 수 있다. 아래 코드를 한번 보자!
abstract class User {
constructor(
protected firstName: string,
protected lastName: string
){}
abstract sayHi(name:string):string
abstract fullName(): string
} 위와 같이 abstract를 사용해 User라는 클래스 설계도를 그렸다 User를 extends하는 Class들은 이제 저대로 만들어야 한다.!
그렇다면 Interface는?
interface User {
firstName: string,
lastName: string,
fullName(): string,
sayHi(name:string) : string,
}이것을 상속할 때 사용하는 명령어는 extends가 아니라 implements를 사용하면 된다.!
class Player implements User {
constructor(
public firstName:string,
public lastName:string,
){}
fullName(){
return `${this.firstName} ${this.lastName}`
}
sayHi(name:string){
return `Hello ${name}. My name is ${this.fullName()}`
}
}위와 같은 방식으로 상속이 가능합니다.
또 두개를 한번에 상속할 수도 있는데!
interface Human {
health:number
}interface를 하나 더 만들어 주고
class Player implements User, Human {
constructor(
public firstName:string,
public lastName:string,
public health:number
){}
fullName(){
return `${this.firstName} ${this.lastName}`
}
sayHi(name:string){
return `Hello ${name}. My name is ${this.fullName()}`
}
}아래와 같이 사용할 수도 있다.
함수
함수에도 동일하게 사용할 수 있다.
function makeUser(user: User) : User {
return {
firstName:"nico",
lastName:"las",
fullName: () =>"xx",
sayHi: (name) => "String"
}
}
makeUser({firstName:"nico",
lastName:"las",
fullName: () =>"xx",
sayHi: (name) => "String"})인터페이스는 타입으로써 사용된다! 꼭 기억
Polymorphism 다형성 사용방법!
이전 포스팅에서도 적어놓았던 다형성을 Interface에서 사용하는 방법에 대해서 알아보자!
다형성은 any와 다르게 타입 검사를 해주는 아주 나이스 한 기능!
클래스에서 generic은 아래와 같이 사용한다.
//4-5 Polymorphism
class LocalStorage<T> {
private storage:SStorage<T> = {}
set(key:string, value:T){
this.storage[key] = value;
}
remove(key:string){
delete this.storage[key];
}
get(key:string):T{
return this.storage[key]
}
clear(){
this.storage = {}
}
}위와 같이 선언 하고 아래와 같이 사용할 수 있는데 set method에서 value에 generic 을 사용하고 있다. 이 값을 string 으로 boolean타입으로도 변경해서 사용할 수 있다. 아래 코드와 처럼!
const stringsStorage = new LocalStorage<string>()
stringsStorage.set("key", "value1")
stringsStorage.get("key")
console.log(stringsStorage.get("key"));
const booleansStorage = new LocalStorage<boolean>();
booleansStorage.set("boolean1", true);
console.log(booleansStorage.get("boolean1"));
마무리
interface와type은 유사하다.interface는 중첩이 수월하다.interface와class에도generic을 사용할 수 있다.interface는object와class에 형태를 만든다.interface형태를 만들기에는type보다는interface가독성이 좋다.
참조
