関数:タスクの概要を出力する
CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 49/73。
チャレンジ
簡単前のチャレンジから、以下の内容が提供されています:
id(number)、title(string)、およびstatus(リテラル型) を持つTaskインターフェース- 3つのタスク変数:
firstTask、secondTask、およびthirdTask getTaskInfo関数addTask関数changeTaskStatus関数listTasksByStatus関数initialTasks、updatedTasks、testTasks、progressTasks、completedTasks、mixedTasks、todoTasks、inProgressTasks、およびdoneTasks配列
1つのパラメータを受け取る printTaskSummary という名前の関数を作成してください:
Task型のtask(単一の Task オブジェクト)
この関数は以下を行う必要があります:
- コンソールに
"ID: [id], Title: [title], Status: [status]"という正確な形式でフォーマットされたサマリーを出力する - 戻り値の型を
voidにする
1つのパラメータを受け取る printAllTaskSummaries という名前の関数を作成してください:
Task[]型のtaskList(Task オブジェクトの配列)
この関数は以下を行う必要があります:
- ループを使用して、配列内の各タスクに対して
printTaskSummaryを呼び出す - 戻り値の型を
voidにする
以下のタスクを含む Task[] 型の sampleTasks という名前の変数を作成してください:
- id が
101、title が"Design user interface"、status が'todo'のタスク - id が
102、title が"Implement authentication"、status が'in-progress'のタスク - id が
103、title が"Deploy to production"、status が'done'のタスク
以下の出力を表示してください:
firstTaskを引数にしてprintTaskSummaryを呼び出すsampleTasksの2番目のタスクを引数にしてprintTaskSummaryを呼び出すsampleTasksを引数にしてprintAllTaskSummariesを呼び出すdoneTasksの最後のタスクを引数にしてprintTaskSummaryを呼び出す
自分で試してみよう
// Task interface and previous code from earlier challenges
interface Task {
id: number;
title: string;
status: 'todo' | 'in-progress' | 'done';
}
const firstTask: Task = {
id: 1,
title: "Learn TypeScript interfaces",
status: "todo"
};
const secondTask: Task = {
id: 2,
title: "Build task management app",
status: "in-progress"
};
const thirdTask: Task = {
id: 3,
title: "Write unit tests",
status: "done"
};
function getTaskInfo(task: Task): string {
return `Task ${task.id}: ${task.title} - ${task.status}`;
}
function addTask(taskList: Task[], title: string): Task[] {
const newTask: Task = {
id: taskList.length + 1,
title: title,
status: 'todo'
};
return [...taskList, newTask];
}
function changeTaskStatus(taskList: Task[], taskId: number, newStatus: 'todo' | 'in-progress' | 'done'): Task[] {
return taskList.map(task =>
task.id === taskId ? { ...task, status: newStatus } : task
);
}
const initialTasks: Task[] = [firstTask, secondTask];
const updatedTasks: Task[] = addTask(initialTasks, "Review code changes");
const testTasks: Task[] = [firstTask, secondTask, thirdTask];
const progressTasks = changeTaskStatus(testTasks, 1, 'in-progress');
const completedTasks = changeTaskStatus(progressTasks, 2, 'done');
// Create the listTasksByStatus function
function listTasksByStatus(taskList: Task[], status: 'todo' | 'in-progress' | 'done'): Task[] {
return taskList.filter(task => task.status === status);
}
// Create mixedTasks array
const mixedTasks: Task[] = [firstTask, secondTask, thirdTask];
// Filter tasks by status
const todoTasks = listTasksByStatus(mixedTasks, 'todo');
const inProgressTasks = listTasksByStatus(mixedTasks, 'in-progress');
const doneTasks = listTasksByStatus(mixedTasks, 'done');
// Print the required outputs
console.log(mixedTasks.length);
console.log(todoTasks.length);
console.log(inProgressTasks.length);
console.log(doneTasks.length);
console.log(getTaskInfo(todoTasks[0]));
console.log(getTaskInfo(inProgressTasks[0]));
console.log(getTaskInfo(doneTasks[0]));Introduction To TypeScriptのすべてのレッスン
7プロジェクト:シンプルなタスクリスト
プロジェクト:Task構造体の定義タスクを追加する関数2基本の型
基本の型: str, num, boolean'any' 型: 脱出ハッチ'unknown' 型'null' と 'undef' の扱い型推論の実践明示的な型アノテーションまとめ:基本の型の演習5型:エイリアス、ユニオン型、インターセクション型
プリミティブ型の型エイリアスユニオン型 ('|')ユニオン型の扱い方リテラル型インターセクション型 ('&')型エイリアスの組み合わせまとめ:高度な型の組み合わせ自分で練習してみよう: JavaScriptオンラインコンパイラ