在typescript中正确添加一个class的实例

Question

I have 3 class objects A, B, C. I have a property in class B called handleDropDown().

I have created a custom type

type PageObject = { pageObject: A | B | C; }

It can either be class A,B or C.

When try to access the handleDropDown from class BI get an error that

Property 'handleDropDown' does not exist on type 'A | B | C'.

I am new to typescript was wondering what I am doing wrong

 type Query = { name: string; } class BaseAll { } class BaseInfo { } class A extends BaseAll { query: Query; constructor(query: Query) { super(); this.query = query; } } class B extends BaseAll { query: Query; constructor(query: Query) { super(); this.query = query; } handleDropDown() { console.log('I am here') } } class C extends BaseAll { query: Query; constructor(query: Query) { super(); this.query = query; } } type PageObject = { pageObject: A | B | C; } class Page { header: string; objs: { [key: string]: A | B | C } = {}; constructor(text: string) { this.header = text; } setHeaderText(text: string) { return text } addObj(name: string, obj: A | B | C) { this.objs[name] = obj; } } let myQuery3 = { name: 'list' }; let myQuery2 = { name: 'file' }; let A1 = new A(myQuery3); let A2 = new A(myQuery2); let C1 = new C(myQuery2); let C2 = new C(myQuery3); let page1 = new Page("Page title Here"); page1.addObj('t1', A1); page1.addObj('t2', A2); page1.addObj('f1', C1); page1.addObj('f2', C2); console.log(page1.objs.t1.query); console.log(page1.objs.t2.query); console.log(page1.objs.f1.handleDropDown()); console.log(page1.objs.f2.handleDropDown()); //let page1_filter = new Filter("Dashboard", [],[]); // page1.updateQuery(myQuery2); console.log(page1);

Answer 1

While a runtime check via instanceof B is always an option, I would consider using an const object literal.

When dealing with const object literals, TS can infer precise type of that object.

interface Page {
  header: string;
  objs: {
    [key: string]: A | B | C;
  }
};

const A1 = new A(myQuery3);
const A2 = new A(myQuery2);
const B1 = new B(myQuery2);
const C2 = new C(myQuery3);

const page1 = {
  header: 'Page title Here',
  objs: {
    t1: A1,
    t2: A2,
    f1: B1,
    f2: C2
  }
} satisfies Page;
console.log(page1.objs.t1.query);
console.log(page1.objs.t2.query);
console.log(page1.objs.f1.handleDropDown());
console.log(page1.objs.f2.handleDropDown());  // Expected error

Please note that:

• inferred type if page1 is:

const page1: {
    header: string;
    objs: {
        t1: A;
        t2: A;
        f1: B;
        f2: C;
    };
}

• this code uncovers a bug in your code (in compile time) - you are trying to call handleDropDown on f1 and f2 of type C - which do not have these methods. This is an advantage over runtime check.
• I used TS 4.9 satisfies operator to still have type checking and code completion

Playground link