23 (1/3) :: TypeScript Interface, 사용 이유 & 예시, 상속

엘리스 SW 엔지니어 트랙 23일차

박성국 강사님 실시간 강의

 

 

Interface와 제네릭

타입스크립트에서 조금 더 중요한 개념이라고 하신다

 

 

Interface

• 타입 체크에 사용
• 변수, 함수, 클래스에 사용 가능
• 클래스와 비스므리
• 하지만 직접 인스턴스 생성 불가
• 모든 메소드는 추상 메소드
• abstract 키워드 사용 안한다

 

 

Interface 사용 이유

협업 개발시

공통적으로 사용되는 부분에 대해 미리 정의

추후 코드를 합칠 때 효율적이다

 

 

추상클래스 vs Interface

추상 클래스는 전체적인 구조

Interface는 프로그래머간 협업

 

 

Interface 예시

interface에서 정한 property는 모두 required

아니면 [grade: number] 이런식으로 활용 가능

value 자리에는 들어올 타입을 넣어준다

// interface User { 
//     1: string;
//     2: string;
//     3: string;
//     4: string;
// }

// let user:User = {
//     1: 'A',
//     2: 'B',
//     3: 'C',
//     4: 'A'
// }

interface User {
    [grade: number]: 'A' | 'B' | 'C' | 'D'
}

let user: User = {
    1: 'A',
    2: 'B',
    5: 'C'
}

 

 

interface 상속

interface도 상속이 가능하다

그럼 부모 interface도 required

 

1개 상속 예시

interface Person {
    name: string
    age?: number
}

interface Developer extends Person {
    type: 'frontend' | 'backend'
}

const developer: Developer = {
    name: 'HJ',
    type: 'frontend'
}

 

2개 상속 예시

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

interface Toy {
    name: string
}

interface ToyCar extends Car, Toy {
    price: number
}

const temp: ToyCar = {
    color: 'red',
    wheels: 6,
    start: () => {
        console.log('eeeeeha')
    },
    name: 'red car',
    price: 1000
}

 

Class 상속 예시

Class도 상속 가능하구나

class Person {
    constructor(public name: string, public age:number) {

    }
}

interface Developer extends Person {
    skills: string[]
}

const developer: Developer = {
    name: 'E',
    age: 11,
    skills: ['HTML', 'CSS', 'JavaScript']
}

 

 

interface 주로 이렇게 사용

• 함수의 매개변수(Parameter)로 사용
• API 응답에서 데이터 구조 결정

 

 

함수의 매개변수로 사용 예시

interface User {
    id: number
    name: string
    username: string
    email: string
}

const getUser = (user: User) => {
    console.log(`This user's name is ${user.name}`)
}

getUser({
    id: 1,
    name: 'santa',
    username: 'clause',
    email: 'elf@north.com'
})

 

여러번 다양하게 사용가능한 interface

interface Todo {
    id: number
    contents: string
    completed: boolean
}

// 변수 선언
let todos: Todo[] = []

function addTodo(todo: Todo){
    todos = [...todos, todo]
}

// 함수 parameter 
const newTodo: Todo = {
    id: 1,
    contents: 'ts',
    completed: false

}

addTodo(newTodo)
console.log(todos)

 

 

inerface 상속

interface를 interface에 할당 예시

interface User { 
    id: number
    name: string
    email: string
    
    // interface Address 값으로 할당
    address: Address | Address[]
    phone: string
    website: string
    
    // interface Company 할당
    company: Company
}

interface Address {
    street: string
    city: string
    zipcode: string
    
    // interface GeoCoordinates 할당
    geo: GeoCoordinates
}

interface GeoCoordinates {
    lat: string
    lng: string
}

interface Company {
    name: string
    bs: string
}

const logUserAddress = (userAddress: Address | Address[]) => {
    if(Array.isArray(userAddress)){
        console.log(`유저의 주소는 총 ${userAddress.length}`)
    
        for(const[index, address] of userAddress.entries()) {
            console.log(`유저 주소 ${index + 1} 은 ${address.street}`)
        }
    } else {
        console.log(`유저 주소는 ${userAddress.street}`)
    }
}

 

 

함수로 interface 할당 예시

interface SquareFunc {
    // (받을 인자) : 리턴 값이 타입
    (num: number): number
    // 함수를 할당하는 두 번째 방법
    rectAreaFunc: (width: number, height: number ) => number
}

const squareFunc: SquareFunc = function(num: number) {
    return num * num
}

squareFunc.rectAreaFunc = (width, height) => {
    return width * height
}

 

 

클래스에도 interface 할당 가능

예시

interface ITodo {
    id: number
    content: string
    completed: boolean
}

class Todo implements ITodo {
    constructor(
        public id: number,
        public content: string,
        public completed: boolean
    ) {}
}

const todo = new Todo(1, 'ts', false)

console.log(todo)

 

 

 

 

23 (2/3) :: Generic

링크 => https://forgottenknowledge.tistory.com/entry/23-23-Generic

23 (2/3) :: Generic