#Elements on any type when accessing a variable with type hinted interface

26 messages · Page 1 of 1 (latest)

tidal rune
#

basically this error it
i tried to solve it this way Rules | {[key:string]:Rules}
it gives an error on vue side that i can't give that object as such

anyway i have to solve it in ts

image.png
next shell
#

!screenshot

split moonBOT
#
`!screenshot`:

Rather than screenshots, please provide either code formatted as:

```ts
// code here
```
Or even better, as an example on the TypeScript playground that is as simple as possible and reproduces the issue. This makes it easier to help you and increases the chances of getting an answer.

next shell
#

basically, key can be anything

#

but you can't be sure it willl be a valild key for the rulesToApply object

#

like, rulesToApply["foo"] woudn't work and should not be allowed

#

that is exactly the error yo are getting

#

instead, se keyof Rules for the type of key

#

@tidal rune

tidal rune
next shell
#

well, you still have to tell TypeScript about it

#

so keyof Rules and not string

tidal rune
# next shell so `keyof Rules` and not `string`

That would set it to (required, email,alpha and minlength)
That's incorrect in my case
The rulestoApply here are [username,email,password]
While key is required,email, minlength and alpha

next shell
#

could paste the code here or in a playground?

#

providing a screenshot isn't realllyy helpful
even more when hhalf of is hidden by a tooltip ^^'

#

The rulestoApply here are [username,email,password]
While key is required,email, minlength and alpha
oh, then keyof typeof rulestoApply

tidal rune
# 
// src/helpers/FormValidation.ts
import Validator from './Validator'

type Rules = {
  required?: {
    applyTo: string[]
  }
  email?: {
    applyTo: string[]
  }
  alpha?: {
    applyTo: string[]
  }
  minlength?: {
    value: number
    applyTo: string[]
  }
}

export function FormValidate(form: object, rulesToApply: Rules) {
  const formToTest: { [key: string]: any } = new Validator(form)
  for (const key in rulesToApply) {
    rulesToApply[key].applyTo.forEach((field: string) => {
      formToTest[key](field)
    })
  }
}
# 
// src/helpers.Validator.ts
class Validator {
  public form: object
  /**
   * taking the form Object and run some Checks in it
   */
  constructor(form: object) {
    this.form = form
  }
  minLength(length: number) {
    // const regExpStr = `/.{${length},}/`
    // let regExp = new RegExp(regExpStr)
    // regExp.test()
  }
  required(field: string) {
    const regExp = /^\w+{3,}/
    console.log('required', field)
  }
  alpha(field: string) {
    const regExp = /^[a-zA-Z\u{0020}]+/u
    console.log('alpha', field)
  }
  email(field: string) {
    console.log('email', field)
  }
}

export default Validator
# 
// src/components/Register.vue
async function handleSubmition(ev: Event) {
  /**
   *  i'll need some utility function who'll call that will deal with;
   *    * Form-Validation
   *    * Fetching FormData (get,post,delete,patch)
   */
  let registerForm = ev.currentTarget as HTMLFormElement
  let formData = Object.fromEntries(new FormData(registerForm))
  FormValidate(formData, {
    required: {
      applyTo: ['UserName', 'Email', 'Password', 'Confirmation']
    },
    email: {
      applyTo: ['Email']
    }
  })
  // let response = await fetch(BACKEND_URL + '/register', {
  //   method: 'POST',
  //   headers: {
  //     'Content-Type': 'application/json',
  //     'Access-Control-Allow-Origin': '*'
  //   },
  //   body: JSON.stringify(Object.fromEntries(formData))
  // })

  // let result = await response.json()
  // console.log(result)
}
# 
<template>
<form
        class="mx-auto w-5/6 py-3"
        data-formType="registerForm"
        name="registerForm"
        @submit.prevent="handleSubmition"
      >
        <label
          >UserName:
          <input class="w-full my-2" type="text" name="UserName" />
        </label>
        <label
          >Email:
          <input class="w-full my-2" type="text" name="Email" />
        </label>
        <label
          >Password:
          <input class="w-full my-2" type="text" name="Password" />
        </label>
        <label
          >Confirmation:
          <input class="w-full my-2" type="text" name="Confirmation" />
        </label>
        <button class="block w-1/2 bg-slate-400 rounded mx-auto p-1" type="submit">register</button>
        <RouterLink to="/login" class="contents">already registered</RouterLink>
      </form>
</template>
next shell
#

Rules has a property called minlength
but it's called minLength in Validator
is that an error?

#

also, the minLength method expects a number, ut you wrote field is of type string

tidal rune
tidal rune