[TIL] 엘리스 SW 엔지니어 트랙 Day 024

📖 오늘 배운 내용 - 2021.11.25

• interface
• generic
• Union Type
• Intersection Type

 

📝 interface

• 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용 가능
• 여러 가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입 정의
• 프로퍼티와 메서드를 가질 수 있다는 점에서 클래스와 유사
• 단, 직접 인스턴스를 생성할 수 없음 / 모든 메서드는 '추상 메서드' 임
• 단, 추상 클래스의 추상 메서드와 달리 abstract 키워드를 사용하지 않음
• interface는 타입이며 선언만 존재 ⇒ JS로 변환되면서 인터페이스는 사라짐
• interface 간의 extends를 사용하여 다중 상속 가능(class와 비슷)

 

📕 interface 사용 이유

• 협업하여 개발 시 공통적으로 사용되는 부분에 대하여 미리 정의를 함
• 협업 개발에 있어 서로 간의 약속이 될 수 있음
• 추후 코드를 합칠 때 효율적
• 추상 클래스는 프로그램의 전체적인 구조를 짤 때 사용하지만 인터페이스는 프로그래머 간의 협업 개발을 할 때 사용한다.

 

🛠 예시 코드

// 학년별로 점수
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'; // grade는 key값으로 아무거나 적어줘도 됨
}

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

 

📕 선택적 프로퍼티 / 읽기 전용 프로퍼티

interface User {
    readonly 1: string;
    2: string;
    3?: string;
}

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

user.1 = 'test'; // error!

• 선택적 프로퍼티 :: ?
  • 인터페이스 내에 있는 속성은 반드시 구현되어야 함
  • 선택적 프로퍼티 기호(?)가 붙는 경우는 반드시 구현되지 않고 선택 가능
  • 사용 가능한 프로퍼티를 파악할 수 있어서 코드를 이해하기 용이
• 읽기 전용 프로퍼티 :: readonly
  • 인터페이스로 개체를 처음 생성할 때만 값을 할당
  • 그 이후로는 변경할 수 없는 속성을 의미

 

📕 인터페이스 상속

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

interface Toy {
    name: string;
}

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

• 인터페이스는 extends를 사용하여 인터페이스 또는 클래스를 상속받을 수 있음
• 복수의 interface 상속 가능

 

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

interface Developer extends Person {
    skills: string[];
}

const developer: Developer = {
    name: 'Lee',
    age: 20,
    skills: ['HTML', 'css', 'js',]
}

• 인터페이스는 클래스도 상속 가능
• 모든 멤버가 상속되지만 그 속성(public, protected, private)까지는 상속하지 않음

 

📕 함수의 매개 변수로 사용

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

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

getUser({
    id: 1,
    name: 'temp',
    username: 'temp',
    email: 'temp'
})

• 인터페이스는 변수의 타입으로 사용할 수 있음
• 인터페이스 타입으로 선언된 변수는 해당 인터페이스를 준수해야 함

 

// 가장 위에 선언
interface Todo {
    id: number;
    content: string;
    completed: boolean;
}

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

// 함수 파라메터 선언
function addTodo(todo: Todo) {
    todos = [...todos, todo];
}

const newTodo: Todo = {
    id: 1,
    content: 'typescript',
    completed: false
}

addTodo(newTodo);
console.log(todos);

• 한 번만 지정해 주면 변수, 함수 모두 계속되는 타입 체크 없이 계속해서 사용해 줄 수 있음

 

📝 Generic

• 데이터 타입을 일반화함
• 자료형을 정하지 않고 여러 타입을 사용할 수 있게 함
• 재사용성이 높은 함수를 만들어줄 때 사용됨
• 한 가지 타입보다 여러 가지 타입에서 동작하는 함수를 생성

class Stack<T> {
    private data: T[] = [];

    constructor() {}

    push(item: T): void {
        this.data.push(item);
    }

    pop(): T {
        return this.data.pop();
    }
}

const numberStack = new Stack<number>();
const stringStack = new Stack<string>();
numberStack.push(1);
stringStack.push('a');

• <T>라는 문법을 추가하여 제네릭 정의
• T는 Type의 약자로 제네릭을 사용할 때 관용적으로 많이 사용

 

📝 Union Type

function logText(text: string | number) {
  // ...
}

• 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다.

 

📝 Intersection Type

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer;

• 인터섹션 타입(Intersection Type)은 여러 타입을 모두 만족하는 하나의 타입을 의미한다.
• 중복을 제외한 두 인터페이스의 타입 모두를 사용 가능

 

💡 오늘 깨달은 것

• 인터페이스,,제네릭,,, 어렵다... 초반에는 이해가 갔는데 점점 들어갈수록 이해가 안 된다. 특히 상속에 들어가는 순간 복잡 복잡..
• 내일 온라인 강의 들으면서 다시 이해하고 오늘 실강 다시 돌려봐야겠다..!!!!

 

📌 참고

• 타입스크립트 핸드북
• TypeScript 한글 문서