Vue's computed property utilizing typed variables

Question

Vue's computed property utilizing typed variables

I am trying to create a computed array of type Todo[], but I keep encountering this specific error:

No overload matches this call. Overload 1 of 2, '(getter: ComputedGetter<Todo[]>, debugOptions?: DebuggerOptions | undefined): ComputedRef<Todo[]>', gave the following error. Overload 2 of 2, '(options: WritableComputedOptions<Todo[]>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<Todo[]>', gave the following error.

This is what I have attempted so far:

todo.ts

export class Todo {
  checked: boolean;
  text: string
 
  constructor(checked: boolean, text: string) {
    this.checked = checked;
    this.text = text
  }
}

Todos.vue

<script setup lang="ts">
import { computed } from '@vue/reactivity';
import { ref } from 'vue'
import { Todo } from '../todo'

let todos = ref<Todo[]>([]);

const filter = ref<string>('all')
const filteredTodos = computed<Todo[]>(() => {
  if(filter.value == "all") return todos;
  if(filter.value == "active") return todos.value.filter((item) => !item.checked)
  if(filter.value == "completed") return todos.value.filter((item) => item.checked)
})
</script>

javascript typescript vue.js

Answer 1

Answer №1

TypeScript is the way to go.

With three conditions and returning Todo[] each time, TypeScript may not recognize that all cases are covered by those conditions. In case none of them are met, the result returned will be undefined.

To ensure TypeScript understands this, you can do something like:

const filteredTodos = computed<Todo[]>(() => {
  if (filter.value === "active")
    return todos.value.filter((item) => !item.checked)
  if (filter.value === "completed")
    return todos.value.filter((item) => item.checked)

  // cover all other cases:
  return todos.value
})

This could also be simplified as:

const filteredTodos = computed<Todo[]>(() =>
  filter.value === "active"
    ? todos.value.filter((item) => !item.checked)
    : filter.value === "completed"
      ? todos.value.filter((item) => item.checked)
      : todos.value
)

For better readability:

const filteredTodos = computed<Todo[]>(() => {
  switch (true) {
    case filter.value === "active":
      return todos.value.filter((item) => !item.checked)
    case filter.value === "completed":
      return todos.value.filter((item) => item.checked)
    default:
      return todos.value
  }
})

Notes:

I've updated loose equality to strict equality for better coding practices. Loose equality can lead to bugs that are hard to detect.
In the adjusted logic, the computed now returns all todos unless filter.value is either 'active' or 'completed'. The 'all' filter value is implied and no longer needs to be specified. If you prefer to return an empty array when the filter value is unspecified, you can use:

const filteredTodos = computed<Todo[]>(() => {
  switch (true) {
    case filter.value === "all":
      return todos.value
    case filter.value === "active":
      return todos.value.filter((item) => !item.checked)
    case filter.value === "completed":
      return todos.value.filter((item) => item.checked)
    default:
      return []
  }
})

Answer 2

TypeScript is the way to go.

With three conditions and returning Todo[] each time, TypeScript may not recognize that all cases are covered by those conditions. In case none of them are met, the result returned will be undefined.

To ensure TypeScript understands this, you can do something like:

const filteredTodos = computed<Todo[]>(() => {
  if (filter.value === "active")
    return todos.value.filter((item) => !item.checked)
  if (filter.value === "completed")
    return todos.value.filter((item) => item.checked)

  // cover all other cases:
  return todos.value
})

This could also be simplified as:

const filteredTodos = computed<Todo[]>(() =>
  filter.value === "active"
    ? todos.value.filter((item) => !item.checked)
    : filter.value === "completed"
      ? todos.value.filter((item) => item.checked)
      : todos.value
)

For better readability:

const filteredTodos = computed<Todo[]>(() => {
  switch (true) {
    case filter.value === "active":
      return todos.value.filter((item) => !item.checked)
    case filter.value === "completed":
      return todos.value.filter((item) => item.checked)
    default:
      return todos.value
  }
})

Notes:

I've updated loose equality to strict equality for better coding practices. Loose equality can lead to bugs that are hard to detect.
In the adjusted logic, the computed now returns all todos unless filter.value is either 'active' or 'completed'. The 'all' filter value is implied and no longer needs to be specified. If you prefer to return an empty array when the filter value is unspecified, you can use:

const filteredTodos = computed<Todo[]>(() => {
  switch (true) {
    case filter.value === "all":
      return todos.value
    case filter.value === "active":
      return todos.value.filter((item) => !item.checked)
    case filter.value === "completed":
      return todos.value.filter((item) => item.checked)
    default:
      return []
  }
})

Vue's computed property utilizing typed variables

Answer №1

Similar questions

Retrieve information dynamically from a JSON file using the get JSON function and iterate through the data

Exploring ways to retrieve a function-scoped variable from within an Angular subscribe function

What is the best method for animating a display table to none or reducing its height to

Use jQuery to parse the JSON below and then showcase the information in an HTML table

The scrolling speed of the mousewheel in Firefox is notably slower compared to that of Google Chrome

Why is the child's CSS hover not functioning when the body has an event listener attached to it?

Move the location of the mouse click to a different spot

Tips on resolving the issue of an Axios post request not appearing in a get request in React

How to align an unordered list vertically in the center using Bootstrap?

Is it feasible to stop closure from capturing external variables in TypeScript?

The JavaScript code snippets are ineffective, yielding an error message of "resource failed to load."

Navigate to a particular date with react-big-calendar

Tips for implementing a settimeout function in a VUEJS script

What is the best approach for nesting Vue Components and passing additional elements as their children?

React Native formInput Component with Underline Decoration

Choosing only those elements that are not children of parents with a specific class by utilizing the `.not()` method

Pass multiple variables from a Laravel controller to a Vue component

Guide on importing TypeScript types into Vuetify 3

An unexpected error has occurred: Uncaught promise rejection with the following message: Assertion error detected - The type provided is not a ComponentType and does not contain the 'ɵcmp' property

Oops! The Route post function is missing some necessary callback functions, resulting in an undefined object error