如何组合 typescript 中的类型？

Question

Here I'm trying to create a function that sets dimensions.

the dims could either be an object array or just a number.

dimensions(
    dims: { width: number; height: number } | Array<number> | number,
  ) {

console.log(dims.width)

}

But if I access dims.width I'm getting type error width doesnot exists on property dims with type { width: number; height: number } | Array<number> | number { width: number; height: number } | Array<number> | number

How can I solve this?

Easy way is to do like this dims['width'] . Is there any alternative?

Answer 1

The compiler is absolutely right: if dims is (say) a number, dims.width would yield undefined . The compiler doesn't allow that. You need to narrow the type:

function normalizeDims(
  dims: { width: number; height: number } | Array<number> | number
  ): { width: number; height: number } {
  if (typeof dims === 'number') {
    // in this block the TS compiler knows dims is a number:
    return { width: dims, height: dims };
  }
  if (Array.isArray(dims)) {
    // here the TS compiler knows dims is an Array<number>
    if (dims.length !== 2) throw Error();
    return { width: dims[0], height: dims[1] };
  }
  // here the compiler has narrowed down the type of dims to object
  return dims;
}

function dimensions(
    dims: { width: number; height: number } | Array<number> | number,
  ) {
  const normalized = normalizeDims(dims);
  console.log(normalized.width)
}

Look in the TS docs . They have lots of examples that cover exactly this case and many more. And, it's just one (longish) page.