typescript 错误：2339。 如何在一个变量中使用多种类型的 object？

Question

I'm trying to make component with vanilla js + typescript

I made class "Component". the problem is "state"

interface boardState {
  items: string[];
  page: number;
}
interface postState {
  writer: string;
  content: string;
}
class Component {
  $target : Element;
  state: boardState | postState;
  constructor() { ...}
  init() { ...}
  setState() { ...}
  render() { ...}
}

class Board extends Component{
  constructor(selector) {
    super(selector);
  }
  init(){
    this.state.items = ["title1", "title2"] ; // error
  }
}

and this is class "Board" extends Component.

I want to use different types of state. ex) boardState, postState, pageState

but when i use state.items in Board the error occurred.

error message: TS2339: Property 'items' does not exist on type 'postState| boardState'.

how can I fix it?

Answer 1

Can you just overr the type in the Board class?

eg

interface boardState {
  items: string[];
  page: number;
}
interface postState {
  writer: string;
  content: string;
}
class Component {
  $target : Element;
  state: boardState | postState;
}

class Board extends Component{
  state: boardState;
  constructor() {
    super();
  }
  init(){
    this.state.items = ["title1", "title2"] ;
  }
}

https://typescript-bygs7m.stackblitz.io

Answer 2

state can either be boardState or postState , not both

In the case that it is postState and you attempt to set the value of state.items , it will not work, so TypeScript throws an error.

Answer 3

that's because you only have items in boardState , what you need is do type narrowing and manage the case where items doesn't exist, in the TS documentation you can see more about that https://www.typescriptlang.org/docs/handbook/2/narrowing.html

but in your case, I think is better add the member in the Board class