프로젝트: Task 구조체 정의하기
Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 45번째.
첫 번째 TypeScript 프로젝트에 오신 것을 환영합니다! 앞으로 몇 개의 수업에 걸쳐 TypeScript가 잘 구조화되고 타입이 안전한 코드를 만드는 데 어떻게 도움이 되는지 보여 주는 완전한 task 목록 애플리케이션을 만들게 됩니다. 이 프로젝트에서는 지금까지 배운 여러 개념인 interfaces, 리터럴 타입, 배열, 함수를 함께 사용합니다.
모든 task management 시스템의 기반은 task가 어떤 모습인지 정의하는 것입니다. 이 강의에서는 애플리케이션에서 하나의 task를 나타내는 데이터 구조를 만듭니다. 이 구조에는 고유 식별자, task의 내용, 현재 상태와 같은 필수 정보가 포함되어야 합니다.
여러분의 Task interface는 status 속성에 literal types를 사용합니다. 이는 status가 'todo', 'in-progress' 또는 'done'과 같은 몇 가지 특정 문자열 값 중 하나만 가질 수 있음을 의미합니다. 이 접근 방식은 오타를 방지하고 애플리케이션 전체에서 일관성을 보장합니다. TypeScript는 유효하지 않은 status 값을 사용하려는 모든 시도를 감지합니다.
이 프로젝트 구조는 새 task 추가, 상태 업데이트, 현재 상태에 따른 task 필터링을 비롯해 앞으로의 학습에서 만들 모든 기능의 청사진 역할을 합니다.
챌린지
쉬움다음 속성을 가진 Task라는 인터페이스를 만드세요.
number타입의idstring타입의title- 다음 리터럴 값 중 하나만 가능한
status:'todo','in-progress'또는'done'
Task 인터페이스를 사용하여 다음 변수를 만드세요.
- id가
1이고, title이"Learn TypeScript interfaces"이며, status가'todo'인Task타입의firstTask라는 변수를 만드세요. - id가
2이고, title이"Build task management app"이며, status가'in-progress'인Task타입의secondTask라는 변수를 만드세요. - id가
3이고, title이"Write unit tests"이며, status가'done'인Task타입의thirdTask라는 변수를 만드세요.
Task 타입의 매개변수를 받고 "Task [id]: [title] - [status]" 형식의 string을 반환하는 getTaskInfo라는 함수를 만드세요.
다음 출력을 각각 별도의 줄에 출력하세요.
firstTask를 사용하여getTaskInfo를 호출하고 결과를 출력하세요.secondTask를 사용하여getTaskInfo를 호출하고 결과를 출력하세요.thirdTask를 사용하여getTaskInfo를 호출하고 결과를 출력하세요.firstTask의 status를 출력하세요.secondTask의 title을 출력하세요.
직접 해보기
// TODO: 여기에 코드를 작성하세요
// Task 인터페이스를 생성하세요
// task 변수들을 생성하세요
// getTaskInfo 함수를 생성하세요
// 필요한 출력을 출력하세요
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
TypeScript 소개의 모든 레슨
직접 연습해 보세요: TypeScript 플레이그라운드