Subscribe on changes!

Undefined is complained when bind :style to an array

avatar
Mar 25th 2023

Vue version

3.2.47

Link to minimal reproduction

https://github.com/yuwu9145/vue-StyleValue-type

Steps to reproduce

  1. clone the repo
  2. run npx vue-tsc --noEmit

What is expected?

No type error

What is actually happening?

src/App.vue:2:17 - error TS2322: Type 'undefined' is not assignable to type 'StyleValue'.

2   <h1 :style="[ style, {background: 'green'} ]">Test</h1>

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 4.67 GB / 7.62 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

[undefined, {...other style object}] works perfectly fine in runtime. check link

In addition, undefined can be directly assigned to :style without type error

<h1 :style="undefined">Test</h1> // no type error

Therefore, [undefined] should not be type complained