reactjs - typescript after using a string as a key i then want to use a variable to go further in object but get errors - Stack

admin管理员组

文章数量:1289634

I have an object that has keys I want to access but I am trying to use a string to enter the beginning part of that object

I then want to continue into that object one more time to get to my refOptions but I still see those typescript errors

the code runs well but the problem is that I get the typescript error that either says that a string cant be used on key or that the refOptions doesn't exist on type userModel

import React, { useState } from 'react'

interface userModel {
    planHeaders: string[],
    refOptions: {value: string, label: string, }[],
    sphereOptions: {value: string, lavel: string}[]
}

const tempObject: { users: {user: string, pass: string}[], fee: userModel, fo: userModel, fum: userModel  }  ={
    users:[{user: 'fee', pass: 'feeSecretPass'}, {user: 'fo', pass: 'fo aint small'}, {user: 'fum', pass: 'password'}],
    fee: {
        planHeaders: [ 'Fall prevention', 'Flood Protection', 'Legal Protection' ],
        refOptions: [{ value: 'jerry', label: 'Jerry' }, { value: 'jim', label: 'Jim' }, { value: 'john', label: 'John' }],
        sphereOptions: [{value: 'broker', lavel: 'Broker'},{value: 'coldCall', lavel: 'Cold Call'},{value: 'poster', lavel: 'Poster'},]
    },
    fo: {
        planHeaders: [ 'Fall prevention', 'Flood Protection', 'Legal Protection' ],
        refOptions: [{ value: 'jerry', label: 'Jerry' }, { value: 'jim', label: 'Jim' }, { value: 'john', label: 'John' }],
        sphereOptions: [{value: 'broker', lavel: 'Broker'},{value: 'coldCall', lavel: 'Cold Call'},{value: 'poster', lavel: 'Poster'},]
    },
    fum: {
        planHeaders: [ 'Fall prevention', 'Flood Protection', 'Legal Protection' ],
        refOptions: [{ value: 'jerry', label: 'Jerry' }, { value: 'jim', label: 'Jim' }, { value: 'john', label: 'John' }],
        sphereOptions: [{value: 'broker', lavel: 'Broker'},{value: 'coldCall', lavel: 'Cold Call'},{value: 'poster', lavel: 'Poster'},]
    }
}

const [userSettings, setUserSettings] = useState<{password: string, user: string }>({ password: '', user: '' })

//Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ users: { user: string; pass: string; }[]; fee: userModel; fo: userModel; fum: userModel; }'
console.log(`1st Fo Plan Headers are ${tempObject[userSettings.user].planHeaders}`)

//Element implicitly has an 'any' type because expression of type 'string | number | symbol' can't be used to index type '{ users: { user: string; pass: string; }[]; fee: userModel; fo: userModel; fum: userModel; }'.
console.log(`2nd Fo Plan Headers are ${tempObject[userSettings.user as keyof tempObject].planHeaders}`)

//Property 'planHeaders' does not exist on type '{ user: string; pass: string; }[] | userModel'.
console.log(`3rd Fo Plan Headers are ${tempObject[userSettings.user as keyof typeof tempObject].planHeaders}`)

I'm just confused on how to get this red line gone cause the userSettings will be different depending on who is using it so it needs to link to the correct people

本文标签：