https://github.com/ssi02014/typescript-todolist

📚 TypeScript 공부하면서 Class형태로 만들어보는 ToDoList
https://github.com/ssi02014/typescript-todolist

Last synced: 8 months ago
JSON representation

📚 TypeScript 공부하면서 Class형태로 만들어보는 ToDoList

• Host: GitHub
• URL: https://github.com/ssi02014/typescript-todolist
• Owner: ssi02014
• Created: 2021-06-08T14:45:33.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-06-22T12:40:14.000Z (over 4 years ago)
• Last Synced: 2024-12-30T06:44:48.395Z (9 months ago)
• Language: TypeScript
• Homepage:
• Size: 128 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 💻 TypeScript-ToDoList

타입스크립트로 만들어보는 ToDoList 📑




## 📈 프로젝트 시작 전 셋팅 과정

### 🔍 1. 타입스크립트 설치

```

  node install -g typescript

  npm install -g ts-node

```




### 🔍 2. tsconfig.json 생성 및 설정

```

  //tsconfig.json 생성

  tsc --init

```




- tsconfig.json 설정

```json

{

  "compilerOptions": {

    /* Basic Options */

    "target": "es5",  

    "module": "commonjs",

    "outDir": "./build",  //빌드 된 이후 자바스크립트 파일이 저장 될 장소

    "rootDir": "./src",   //타입스크립트 소스코드가 있는 저장소

    /* Strict Type-Checking Options */

    "strict": true,  

    /* Module Resolution Options */

    "esModuleInterop": true, 

    "skipLibCheck": true,  

    "forceConsistentCasingInFileNames": true 

  }

}

```




### 🔍 3. package.json 생성 및 설정

```

  //package.json 생성

  npm init -y

```




- package.json 설정

```json

  {

    ...

    "scripts": {

      "test": "echo \"Error: no test specified\" && exit 1",

      "build": "tsc -w",

      "start:run": "nodemon build/index.js",

      "start": "concurrently npm:start:*"

    },

    ...

  }

```

### 🔍 nodemon, concurrently 설치

```

  npm install nodemon concurrently

```

- concurrently는 동시에 여러 명령어를 실행하기 위해 사용된다.

- nodemon: 실시간으로 수정사항을 반영해준다.




## 👨‍💻 TodoItem: JavaScript vs TypeScript

### 🔍 JavaScript

```js

  class TodoItem {

    constructor(id, task, complete) {

      this.id = id;

      this.task = task;

      this.complete = complete;

    }

    printDetails() {

      console.log(

        `${this.id} \t ${this.task} \t ${this.complete ? "(complete)" : ""}`

      );

    }

  }

```




### 🔍 TypeScript

- 타입스크립트에서는 타입을 지정해주는거 이외에 `접근 지정자(private, public, protected)` 등을 지정할 수 있다.

- 생성자(contructor)안에서 `접근 지정자`를 지정하면 따로 프로퍼티 정의할 필요 없이 프로퍼티로 정의된다.

- 함수의 리턴 값이 없으면 반환 값 타입을 `void`로 지정해야 한다.

```ts

  class TodoItem {

    constructor(public id: number, public task: string, public complete: boolean) {

      this.id = id;

      this.task = task;

      this.complete = complete;

    }

    printDetails(): void {

      console.log(

        `${this.id} \t ${this.task} \t ${this.complete ? "(complete)" : ""}`

      );

    }

  }

  export default TodoItem;

```




## 👨‍💻 TodoCollection

### 🔍 getTodoById 메서드

- 함수 반환 값의 대한 타입을 `TodoItem | undefined`이런 식으로 지정하면 반환 값의 타입이 TodoItem 또는 undefined라는 의미

```ts

  import TodoItem from "./TodoItem";

  class TodoCollection {

    ...

    getTodoById(id: number): TodoItem | undefined {

      return this.todoItems.find((item) => item.id === id);

    }

    ...

  }

  export default TodoCollection;

```




### 🏃‍♂️ Type Annotations - Inference Around Functions

- 함수의 파라미터를 정의할 때 각 파라미터의 타입을 지정하지 않으면 `any` 타입의 파라미터가 지정 된다.

- 함수의 파라미터에 타입을 지정하지 않으면 일반 변수와 마찬가지로 암묵적인 any 타입의 적용으로 경고 사항이다.

- 함수의 반환 값에 대한 타입은 return 실행문에 따라 `타입 추론(Type Inference)`이 적용 된다.

- 반환 값의 경우 retrun 구문으로 `명시적인 타입의 유추`가 가능하다.

- 함수의 반환 값이 없을 경우 `void` 타입의 반환을 정의한다.

- 함수의 반환 값으로 정의 가능한 `never` 타입은 절대 발생하지 않는 값의 타입을 나타낸다. 쉽게 말하면 반환을 안한다는 의미

- `void` 타입은 변수로 사용 될 경우 `undefined`, `null` 값만 대입(assign)이 가능하다.

- `never`타입은 어떤 변수의 변수에도 대입 될 수 있지만, never 타입에는 어떤 타입의 값도 대입될 수 없다.




### 🏃‍♂️ Type Annotations - Tuple

- 튜플을 이용하면 배열의 요소 수와 각 요소에 대한 타입을 지정할 수 있다.

- 튜플은 정해진 길에아 맞지 않으면 에러가 발생. 하지만 `push()`는 튜플의 규칙을 무시함.

- 서로 다른 타입의 요소를 갖는 배열은 순서에 상관없이 데이터를 넣을 수 있지만, 반면 튜플은 정해진 순서에 맞게 넣어야 함

- 튜플 타입은 배열보다 저장되는 요소에 순서와 수에 제약을 두고자 할 때 사용

```ts

  const tuples: [string, number] = ['Jeon', 27]; //튜플

  const arr: (string | number)[] = ['Jeon', 27, 'MinJae', 26]; //배열

  tuples[0] = 'Park' // OK

  tuples[0] = 50 // Error: Type '50' is not assignable to type 'string'.ts(2322)

  tuples[1] = 50 // OK

  

  tuples.push(100);

  console.log(tuples); // ['Park', 50, 100] 

```




### 🏃‍♂️ Generics

- 재사용 가능한 클래스, 함수를 만들기 위해 다양한 타입에서 사용 가능 하도록 하는 것이 `제네릭`이다.

- 제네릭을 이용하면 모든 타입의 객체를 다루면서 객체 타입의 무결성을 유지할 수 있다.

- 제네릭을 통해 클래스나 함수 내부에서 사용되는 특정 데이터의 타입을 외부에서 지정한다.

- 제네릭이 적용된 대상(클래스, 함수, 인터페이스)은 선언 시점이 아닌 생성 시점에 사용하는 타입을 결정한다.

```ts

class Box {

  constructor(private fruit: T) {}

  getFruit(): T {

    return this.fruit;

  }

}

```

- 위 코드에서 ``을 적어 제네릭을 적용 이를 타입 파라미터라고 한다.

- T말고 어떠한 알파벳을 사용해도 상관은 없지만 관용적으로 T를 사용




```ts

const box: Box = new Box(new Orange(5));

```

- 위에 코드를 보면 box를 정의하면서 box의 타입으로 Box의 타입을 제네릭으로 ``를 지정함 실제 인스턴스화 하면서 Orange 객체를 생성해서 넣음




```ts

class Box {

  constructor(private fruit: Orange) {}

  getFruit(): Orange {

    return this.fruit;

  }

}

```

- 결과적으로 T라고 지정된 타입들은 모두 Orange 타입이 된다.




### 🏃‍♂️ type alias

- 새로운 타입을 정의하는 방법은 type alias와 interface를 정의하는 두 가지 방식이 있다.

- type alias를 이용하면 객체, 공용체(Union), 튜플(Tuple), 기본 타입에 타입의 별칭을 생성할 수 있다.

- type alias도 제네릭의 사용이 가능하며, 스스로 참조하는 것도 가능하다.

```ts

type MyNumber = number;

const n: MyNumber = 10;

type Container = { value: T };

type User = { name: string, age: number };

const testUser: User = { name:"Kim", age:20 };

//=== const testUser: { name: string, age: number } = { ... }

```




## 👨‍💻 TodoConsole

### 🏃‍♂️ inquirer 라이브러리 설치

- inquirer: Interactive user prompt를 구현을 위한 라이브러리로 루비, 파이썬, 자바스크립트 등 여러가지 언어를 지원하고 일반적인 사용자 입력 구현, 체크박스, 라디오 버튼 등 구현이 편리하다.

- 단, TypeScript에서는 @types/inquirer을 추가적으로 설치해야 한다.

```

  npm i inquirer @types/inquirer

```




### 🏃‍♂️ inquirer 사용 예제

- src/model/TodoConsole.ts

```ts

  import * as inquirer from 'inquirer';

  class TodoConsole {

    ...

    promptUser(): void {

      console.clear();

      

      this.displayTodoList();

      inquirer.prompt({

        type: 'list',

        name: 'command',

        message: 'Choose option',

        choices: Object.values(Commands),

      }).then((answers) => {

        if(answers['command'] !== Commands.Quit) {

          this.promptUser();

        }

      });

    }

  }

  export default TodoConsole;

```




- src/model/Command.ts

```ts

  export enum Commands {

    Quit = 'Quit',

    Add = 'Add',

  }

```




- 주의할 점은 nodemon, concurrently을 사용해서 npm start를 하면 약간의 오류가 있음

- node build/index.js 로 빌드 하고 실행해야 된다.




### 🏃‍♂️ enum

- 열거형(enum) 타입은 `상수`들을 관리하기 위한 객체로 상수의 집합을 정의한다.

- 일반 객체는 속성의 변경을 허용하지만 열거형은 속성의 변경을 허용하지 않는다.

- 열거형의 속성은 기본적으로 `숫자`, `문자열`만 허용한다.

- 열거형을 이용하면 상수의 수를 제한할 수 있으며 코드의 가독성을 높일 수 있다.

```ts

  const korean = 'ko';

  const english = 'en';

  const japanese = 'ja';

  type LanguageCode = 'ko' | 'en' | 'ja';

  const code: LanguageCode = korean;

```

- 위 코드를 수정하면

```ts

enum LanguageCode {

  korean = 'ko',

  english = 'en',

  japanese = 'ja',

}

const code: LanguageCode = LanguageCode.korean;

```




## 👨‍💻 Union Type/Type Guard

### 🏃‍♂️ Union Type

- TypeScript는 타입들의 조합을 통해 새로운 타입을 정의할 수 있으며 Union Type도 그중 하나이다.

- Union Type은 타입 선언에 하나 이상의 타입을 지정하고 해당 타입 중에 하나일 수 있음을 나타낸다.

- Union Type의 정의는 `|` 연산자를 이용해 정의한다.

- Union Type의 멤버 사용은 정의된 모든 타입의 공통적인 멤버들만 사용할 수 있다.




### 🏃‍♂️ Type Guard

- Type Guard는 특정 영역(블록) 안에서 해당 변수의 타입을 한정시켜주는 기능이다.

- Union Type의 정의는 각 타입이 갖는 고유 멤버는 사용할 수 없다.

- 특정 영역에서 각 타입이 갖는 고유 멤버에 대한 사용은 Type Guard를 이용합니다.

- Type Guard는 사용자가 정의 하거나 `number`, `string`, `boolean`, `Symbol`의 경우 `typeof` 연산자를 이용한다.

```ts

  let collection: number[] | string;

  collection = 'TypeScript';

  collection.split(''); //사용할 수 없음. 왜? 숫자배열은 split이라는 메서드를 갖고있기 않기 때문

  //Type Guard

  if (typeof collection === 'string') {

    //collection이 string이라는게 true라면 이 블럭 안에서는 split 메서드를 사용할 수 있다.

    collection.split('');

  }

```