Função para Alterar o Status da Tarefa
Parte da seção Introdução ao TypeScript do Journey de JavaScript da Coddy. Lição 47 de 73.
Desafio
FácilVocê recebeu o seguinte do desafio anterior:
- A interface
Taskcomid(número),title(string) estatus(tipo literal) - Três variáveis de tarefa:
firstTask,secondTaskethirdTask - A função
getTaskInfo - A função
addTask - Os arrays
initialTaskseupdatedTasks
Crie uma função chamada changeTaskStatus que aceite três parâmetros:
taskListdo tipoTask[](um array de objetos Task)taskIddo tiponumber(o ID da tarefa a ser atualizada)newStatusdo tipo'todo' | 'in-progress' | 'done'(o novo status da tarefa)
A função deve:
- Encontrar a tarefa com o ID correspondente na lista de tarefas
- Atualizar o status dessa tarefa para o novo status
- Retornar um novo array com a tarefa atualizada (não modifique o array original)
- Se nenhuma tarefa com o ID informado for encontrada, retornar o array original sem alterações
Crie uma variável chamada testTasks do tipo Task[] contendo firstTask, secondTask e thirdTask.
Use sua função changeTaskStatus para:
- Alterar o status da tarefa com o ID
1para'in-progress'e armazenar o resultado emprogressTasks - Alterar o status da tarefa com o ID
2para'done'emprogressTaskse armazenar o resultado emcompletedTasks
Imprima as seguintes saídas em linhas separadas:
- Chame
getTaskInfocom a primeira tarefa detestTaskse imprima o resultado - Chame
getTaskInfocom a primeira tarefa deprogressTaskse imprima o resultado - Chame
getTaskInfocom a segunda tarefa decompletedTaskse imprima o resultado - Imprima o status da primeira tarefa em
testTasks - Imprima o status da segunda tarefa em
completedTasks
Experimente você mesmo
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];
}
const initialTasks: Task[] = [firstTask, secondTask];
const updatedTasks: Task[] = addTask(initialTasks, "Review code changes");
console.log(initialTasks.length);
console.log(updatedTasks.length);
console.log(getTaskInfo(updatedTasks[updatedTasks.length - 1]));
console.log(updatedTasks[updatedTasks.length - 1].title);
console.log(updatedTasks[updatedTasks.length - 1].status);Todas as lições de Introdução ao TypeScript
1Primeiros Passos com TS
O que é TypeScript?Por que usar TypeScript?Seu Primeiro Código TypeScriptProcesso de Compilação e ErrosRecapitulação: Introdução ao TS4Trabalhando com Funções
Tipagem de Parâmetros e RetornosTipagem de Arrow FunctionsO Tipo de Retorno 'void'Parâmetros Opcionais com '?'Valores Padrão de ParâmetrosTipagem de Rest ParametersDefinindo Tipos de FunçõesRecapitulação: Criando Funções Tipadas7Projeto: Uma Lista de Tarefas Simples
Projeto: Definindo a Struct de TarefaFunção para Adicionar uma Tarefa2Tipos Principais
Tipos Básicos: str, num, booleanO Tipo 'any': Válvula de EscapeO Tipo 'unknown'Trabalhando com 'null' e 'undef'Inferência de Tipo na PráticaAnotações de Tipo ExplícitasRecapitulação: Prática de Tipos Principais5Tipos: Aliases, Uniões e Interseções
Aliases de Tipos para PrimitivosTipos de União ('|')Trabalhando com Tipos de UniãoTipos LiteraisTipos de Interseção ('&')Combinando Aliases de TiposRecapitulação: Combinações Avançadas de Tipos3Estrutura de Dados: Arrays e Tuplas
Arrays TipadosModificador 'readonly' para ArraysO que é uma Tupla?Declarando e Acessando TuplasDesestruturando TuplasTuplas ReadonlyArrays Tipados MultidimensionaisSpread Operator com ArraysRecapitulação: Arrays e TuplasPratique por conta própria: Playground de TypeScript