[typescript/타입스크립트] ToDo List 미니 프로젝트 - ListItem 코드리뷰

 
 
 

➜ ListItem.ts

➜ FullList.ts

➜ ListTemplate.ts

➜ Main.ts

 
 
 
 

export interface Item {
    id: string,
    item: string,
    checked: boolean,
}

export default class ListItem implements Item {

    constructor(
        private _id: string = '',
        private _item: string = '',
        private _checked: boolean = false,
    ) { }

    get id(): string {
        return this._id
    }

    set id(id: string) {
        this._id = id
    }

    get item(): string {
        return this._item
    }

    set item(item: string) {
        this._item = item
    }

    get checked(): boolean {
        return this._checked
    }

    set checked(checked: boolean) {
        this._checked = checked
    }
}

 

 
 

1. 인터페이스와 클래스 개념

TypeScript는 자바스크립트에 정적 타입을 추가한 언어로 인터페이스와 클래스를 지원한다.

- interface
interface는 객체의 형태를 정의하는데 사용된다. 즉, 객체가 가져야 하는 속성과 메서드의 형태를 명시하여 객체의 구조를 설명한다. 인터페이스는 실제로 구현 코드를 갖지 않으며, 클래스나 객체가 인터페이스를 구현할 때 해당 형태를 따라야 한다.

- class
class는 객체 지향 프로그래밍에서 사용되는 개념으로, 객체를 생성하는데 사용된다. 클래스는 객체의 특성(속성)과 행동(메서드)을 정의하며, 이를 토대로 여러 객체를 생성할 수 있다.

 
 

2. Todo 항목을 표현하는 interface 정의

먼저, Todo 리스트의 항목을 표현하는 인터페이스를 정의해야 한다. 이 인터페이스를 통해 Todo 항목의 형태를 명시할 수 있다. 

export interface TodoItem {
    id: string;
    item: string;
    checked: boolean;
}

반응형

위의 코드에서 TodoItem 인터페이스는 id, item, checked라는 세 가지 속성을 가지고 있다.
 
- id는 각 항목을 구분할 고유한 식별자를 나타내는 문자열
- item은 Todo 항목의 내용을 나타내는 문자열
- checked는 Todo 항목이 완료되었는지를 나타내는 불리언(boolean) 값
 
 
 

3. Todo 리스트 항목 클래스 생성

이제 TodoItem인터페이스를 구현하는 클래스를 생성한다. 클래스를 사용하면 객체를 생성할 수 있고, 객체는 클래스가 정의한 속성과 메서드를 가진다. TypeScript에서 클래스를 정의할 때는 class 키워드를 사용한다. 아래의 코드는 ListItem 클래스를 정의하고 TodoItem 인터페이스를 구현한다.

export default class ListItem implements TodoItem {
    constructor(
        public id: string = '',
        public item: string = '',
        public checked: boolean = false,
    ) { }
}

ListItem 클래스는 TodoItem 인터페이스를 implements 키워드를 사용하여 구현하고 있다.
 
예를들어, ListItem 클래스는 id, item, checked 속성을 가져야 하며, 해당 속성들은 각각 string, string, boolean 자료형을 가져야 한다. 




 

4. 인터페이스와 클래스의 상호작용

인터페이스와 클래스는 서로 상호작용하여 유용한 기능을 제공한다.
예를 들어, 우리가 ListItem 클래스를 생성하면서 TodoItem 인터페이스를 구현했다. 이로 인해 ListItem 클래스는 id, item, checked 속성을 가져야 하며, 다른 곳에서 TodoItem 인터페이스를 사용하는 경우에도 ListItem 클래스가 해당 인터페이스를 구현했음을 보장할 수 있다.

이러한 상호작용은 코드의 신뢰성을 높이고 협업 시 다른 개발자들이 인터페이스를 기준으로 클래스를 구현함으로써 일관성 있는 코드를 유지하는데 도움이 된다. 또한, 인터페이스를 사용하여 다형성(Polymorphism)을 구현하거나 추상화(abstraction)를 할 수도 있다.
 
 
 
 

5. Getter와 Setter 메서드

Getter 메서드
: get id(), get item(), get checked()는 각각 id, item, checked 속성에 대한 접근자(accessor)이다. 클래스 외부에서 이러한 속성을 읽을 때 사용된다.

Setter 메서드 
: set id(), set item(), set checked()는 각각 id, item, checked 속성에 대한 설정자(mutator)이다. 클래스 외부에서 이러한 속성을 변경할 때 사용된다.