Is it possible to create a reusable TypeScript interface for an array of functions?

Question

Is it possible to create a reusable TypeScript interface for an array of functions?

Currently working with Vue and Typescript, I'm exploring different ways to describe types for an array of functions. In my current code, I have the following setup. Is there a way I could define an interface called formRules instead of repeatedly declaring the types

Array<(v: string) => boolean | string>

or just

<(v: string) => boolean | string>

?

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component({
  name: 'signUpForm',
})

export default class SignUpForm extends Vue {
  private valid = true

  private firstName = ''
  private lastName = ''
  private nameRules: Array<(v: string) => boolean | string> = [
    (v) => !!v || 'Name is required',
  ]

  private email = ''
  private emailRules: Array<(v: string) => boolean | string> = [
    (v) => !!v || 'E-mail is required',
    (v) => /.+@.+\..+/.test(v) || 'E-mail must be valid',
  ]
}
</script>

typescript vue.js

Answer 1

Answer №1

interface ValidateInput={(value:string):boolean|string}

type ValidateMultipleInputs=ValidateInput[]


let validationRules:ValidateInput[]
//or
let validationRulesArr:ValidateMultipleInputs

Answer 2

interface ValidateInput={(value:string):boolean|string}

type ValidateMultipleInputs=ValidateInput[]


let validationRules:ValidateInput[]
//or
let validationRulesArr:ValidateMultipleInputs

Answer 3

Answer №2

Define a custom type that matches your function signature.

<script lang="ts>
import { Vue, Component } from 'vue-property-decorator';

@Component({
  name: 'signUpForm',
})

type FormValidator = (value: string) => boolean | string;

export default class SignUpForm extends Vue {
  private valid = true

  private firstName = ''
  private lastName = ''
  private nameRules: FormValidator[] = [
    (value) => !!value || 'Name is required',
  ]

  private email = ''
  private emailRules: FormValidator[]*emphasized text* = [
    (value) => !!value || 'E-mail is required',
    (value) => /.+@.+\..+/.test(value) || 'E-mail must be valid',
  ]
}
</script>

Note that TypeScript can infer the types automatically, so specifying them may not be necessary. Just specify the type for the parameter if needed:

export default class SignUpForm extends Vue {
  private valid = true

  private firstName = ''
  private lastName = ''
  private nameRules = [
    (value: string) => !!value || 'Name is required',
  ]

  private email = ''
  private emailRules = [
    (value: string) => !!value || 'E-mail is required',
    (value: string) => /.+@.+\..+/.test(value) || 'E-mail must be valid',
  ]
}

This approach is cleaner and avoids unnecessary type definitions.

Answer 4

Define a custom type that matches your function signature.

<script lang="ts>
import { Vue, Component } from 'vue-property-decorator';

@Component({
  name: 'signUpForm',
})

type FormValidator = (value: string) => boolean | string;

export default class SignUpForm extends Vue {
  private valid = true

  private firstName = ''
  private lastName = ''
  private nameRules: FormValidator[] = [
    (value) => !!value || 'Name is required',
  ]

  private email = ''
  private emailRules: FormValidator[]*emphasized text* = [
    (value) => !!value || 'E-mail is required',
    (value) => /.+@.+\..+/.test(value) || 'E-mail must be valid',
  ]
}
</script>

Note that TypeScript can infer the types automatically, so specifying them may not be necessary. Just specify the type for the parameter if needed:

export default class SignUpForm extends Vue {
  private valid = true

  private firstName = ''
  private lastName = ''
  private nameRules = [
    (value: string) => !!value || 'Name is required',
  ]

  private email = ''
  private emailRules = [
    (value: string) => !!value || 'E-mail is required',
    (value: string) => /.+@.+\..+/.test(value) || 'E-mail must be valid',
  ]
}

This approach is cleaner and avoids unnecessary type definitions.

Answer 5

Answer №3

Let's consider a basic illustration-


const array: ((val: string) => boolean | string)[];
let elements: array;
elements = [(val: string) => val];
console.log(elements[0]("hello"));

Answer 6

Let's consider a basic illustration-


const array: ((val: string) => boolean | string)[];
let elements: array;
elements = [(val: string) => val];
console.log(elements[0]("hello"));

Is it possible to create a reusable TypeScript interface for an array of functions?

Answer №1

Answer №2

Answer №3

Similar questions

Setting up a bi-directional binding to an empty or new object that is a valid reference

Send a variable from a next.js middleware to an API request

What could be causing my date variable to reset unexpectedly within my map function?

What is the process for sending an email using Angular 6 and ASP.NET CORE web api?

What is the best method for dividing a user interface into several arrays of keys, each grouped by type?

Nest JS Guards - Employ either of two approaches

5 steps to effectively filter child items in Vuetify

The operation failed with a TypeError because the object does not allow the addition of the newField property

Calculate the overall cost from an array of information using Vue.js and Laravel

React encountered an issue: each child element within a list must be assigned a unique "key" prop

The Vue.js application using pinia npm encounters a server error due to a variable being assigned a value but never utilized

Implementing multiple components in a Vue route: A comprehensive guide

Facing issues with vertical Tab display in Bootstrap using Vue.js - unexpected results

Launching a Material UI Modal nested within a parent component

What is the best way to retrieve the updated input value in Vue?

Using Vue.js to transform a map filter into a variable

Is it possible to optimize the performance of my React and TypeScript project with the help of webpack?

Guidelines for implementing grpc-web in a Vue.js application

Implementing the Same Vue Component with Different Path Names

Converting ASP .Net Core Dto's and Controllers into TypeScript classes and interfaces