[ TypeScript ] Interface 예제

인터페이스

---

 

인터페이스(Interface)는 객체의 타입을 정의하는 역할을 합니다. 인터페이스를 사용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.

• Javascript 예제 ( Typescript 수정 전 )

let user:object; 
user = { name : 'xx', age : 30 };
console.log(user.name) 
// Property 'name' does not exist on type 'object'. 
// name 에는 특정 속성 값이 없다는 오류를 뱉는다.

• TypeScript 예제

// 프로퍼티를 정해서 객체로 표현하고자 할때 interface 를 사용합니다.
interface User {
    name: string;
    age:number;
    gender? : string;// 입력을 해도 되고 안해도 되는 optional 처리는 ? 로 합니다.
    // readonly 프로퍼티를 적용하면 읽기 전용이므로 값에 접근을 할순있지만 수정이 불가능하다.
		readonly birthYear : number;
		[grade:number] : string; 
		// optional 처리가 많아질경우 문자열 index 서명을 추가하는 방법이 있다. 
    // grade 는 number 를 Key 로 하고 string 을 value 로 하는 프로퍼티를 여러개 받을수 있다는 의미입니다.
}

let user:User = {
    name : 'xx',
    age : 30,
		birthYear : 2000,
    1 : 'A', //grade
    2 : 'B', //grade
}

user.age = 10;
user.gender = "male";
user.birthYear = 1995; // 에러가 난다. readonly property

• step2

// 범위가 너무 넓을 경우
// 문자열 리터럴 타입을 사용할수 있다.
// 인덱스 시그니처
type Score = 'A' | 'B' |'C' |'F' ;

interface User {
    name: string;
    age:number;
    gender? : string;
		readonly birthYear : number;
		[grade:number] : string; 
		[grade:number] : Score; 
}

let user:User = {
    name : 'xx',
    age : 30,
		birthYear : 2000,
    1 : 'A', //grade
    2 : 'B', //grade
}

• step3 // interface 를 사용한 Add 함수

interface Add {
    (num1:number, num2:number): number;
}

const add : Add = function(x,y){
    return x + y;
}

add(10,20);
--------------------------------------------------------------------------------

interface IsAdult {
    (age:number):boolean;
}

const a:IsAdult = (age) => {
    return age > 19;
}

a(33); // true

 

interface 유니온 타입 설정

---

 

// Union types

interface Car {
    name: "car";
    color: string;
    start() : void;
}

interface Mobile {
    name : "mobile" ;ac
    color: string ;
    call() : void;
}

function getGift(gift: Car | Mobile){
    console.log(gift.color);
		// 검사해야할 항목이 많아지면 switch 를 사용하는것이 좋다.
    if(gift.name === "car"){ // Car 에만 start() 함수가 있기 때문에 
        gift.start(); 
    } else {
        gift.call()
    }
}

 

 

interface 함수 오버로드

---

 

// 함수 오버로드 (interface 와 더불어 많이 사용된다.)
// 함수 오버로드는 전달받은 매개변수의 갯수나 타입에 따라 다른동작을 하게 하는것을 의미한다.
interface User {
    name:string,
    age: number 
}

// join 이라는 함수는 일종의 value 데이터 역할을 할것이다.
//                                             User 또는 string 이 반환된다.
function join(name:string, age:number|string) : User | string{
    if(typeof age === "number"){
        // 나이가 숫자라면 User을 return 한다.
        return {
            name,
            age
        };
    }else {
				// 나이가 문자열이라면 밑의 문자열을 return 한다.
        return "나이는 숫자로 입력해주세요"; 
    }
}

// 함수에들어오는 값(number 인지 string인지) 에 따라서 User or 문자열을 반환한다. 
// 이럴때엔 오버로드를 사용한다.

const sam: User = join("Sam", 30); // sam 에서 오류를 발생한다. part2 에서 계속
const jane: User = join("Jane", "30");
--------------------------------------------------------------------------------interface User {
// part2
interface User {    
	name:string,
    age: number 
}
 
// 함수 오버로딩 : age를 number로 받았을때 User을 반환해준다. => sam에 있던 오류가 사라짐
function join(name:string, age:number) : User;
// 함수 오버로딩 : age를 string으로 받았을때 User을 반환해준다. => Jane에 있던 오류가 사라짐
function join(name:string, age:string) : User; 

function join(name:string, age:number|string) : User | string{
    if(typeof age === "number"){
        // 나이가 숫자라면 User을 return 한다.
        return {
            name,
            age
        };
    }else {
        return "나이는 숫자로 입력해주세요"; 
    }
}

const sam: User = join("Sam", 30);
const jane: User = join("Jane", "30");

Interface 를 통한 Calss 구현

---

• implements ( interface 재정의 )

// implements (재정의)
interface Car {
    color : string;
    wheels : number;
    start() : void; // return 값이 없는 함수 생성
}

class Bmw implements Car {
    color = "red";
    wheels = 4;
    start(){
        console.log("go ")
    }
}
const b = new Bmw

--------------------------------------------------------------------------------
// 생성자 함수를 이용한 color 주기
interface Car {
    color : string;
    wheels : number;
    start() : void;
}

class Bmw implements Car {
    color;
    wheels = 4;
    constructor(c:string){ 
        this.color = c;
    }
    start(){
        console.log("go ")
    }
}

const b = new Bmw('green')

console.log(b)
b.start(); // 'go'

• extends ( 연장 ) _ 주로 Class 에 많이 쓰인다.

// extends(연장)

interface Car {
    color : string;
    wheels : number;
    start() : void;
}

// 이미 Car 가 가지고 있던 속성들을 그대로 받게된다.
interface Benz extends Car { 
    door: number;
    stop():void; 
}

const benz : Benz = {
    door : 5,
    stop(){
        console.log('stop')
    },
    color : "black",
    wheels : 4,
    start(){
        console.log('go')
    }
}

console.log(benz);
benz.start();

--------------------------------------------------------------------------------
// 동시에 extends 할 수도 있다.
interface Car {
    color : string;
    wheels : number;
    start() : void;
}

interface Toy {
    name : string;
}

interface ToyCar extends Car , Toy {
    price : number;
}

const toyCar : ToyCar = {
    color : 'blue',
    wheels :  6,
    start(){
        console.log('toycar start')
    },
    price : 2500,
    name : 'soyun.s toycar',
}

console.log(toyCar.color)
toyCar.start();

• intersection Type // and 를 의미한다.

interface Car {
    name: string;
    // start(): void;
    start: () => void;
}

interface Toy {
    name: string;
    color: string;
    price: number;
}

// 이럴경우 두 속성이 가진 타입을 모두 기입해주어야 한다.
const toyCar : Car & Toy = {
    name: "toycar",
    start(){},
    color:"black",
    price: 2000
}