reactjs - Typescript use string or string[]

Question

I have this definition:

interface Field {
  question: string,
  answer: string | string[],
}

but theres error in my text editor if i do this:

if (typeof answer === 'string') {
  const notEmpty = answer.trim().length > 0
}

it says string[] doesn't implement trim. is my approach wrong? should i use 2 interfaces? thanks

updated:

my tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "*": ["*", "src/*"]
    }
  }
}

question from:https://stackoverflow.com/questions/65940265/typescript-use-string-or-string

Answer 1

You have this error because you use a variable : i to go throught your object.

playground

interface Field {
  question: string,
  answer: string | string[],
}

const answerArray: Field['answer'][] = ['tes'];

const i = 0;

if (typeof answerArray[i] === 'string') {
  const notEmpty = answerArray[i].trim().length > 0
}

---

Between the two line :

if (typeof answerArray[i] === 'string') {

const notEmpty = answerArray[i].trim().length > 0

TypeScript consider that answerArray[i] could result in different values.

---

The soluce is to store the value inside of a pointer, like :

playground

interface Field {
  question: string,
  answer: string | string[],
}

const answerArray: Field['answer'][] = ['tes'];

const i = 0;

const myAnswer = answerArray[i];

if (typeof myAnswer === 'string') {
  const notEmpty = myAnswer.trim().length > 0
}