Type 'T' is not assignable to type 'UnwrapRef<T>'

[f3oall]

Reproduction

n/a

Steps to reproduce the bug

I'm quite new to TypeScript, so if it's not a bug explanation will be appreciated.

1. Open VSCode
2. Create .ts file with the code below:

import { defineStore } from 'pinia'

// Define constraint for our factory function generic type
interface Model {
  id: number
}

// Define generic factory function
export function init<User extends Model>(name = 'settings') {
  return defineStore(name, {
    state: () => {
      return {
        // Set one of the properties to the generic type
        user: {} as User
      }
    },
    actions: {
      // Add action which accepts argument with our generic type
      set(u: User) {
        // See linter error when trying to assign arg value to the state
        this.user = u
      }
    }
  })
}

3. You will see a linter error:
   

Expected behavior

There shouldn't be an error or I shouldn't get UnwrapRef<T> type

Actual behavior

Can't assign to a state property of generic type

Additional information

Dependencies versions

{
 "dependencies": {
    "awesome-notifications": "^3.1.3",
    "human-readable-numbers": "^0.9.5",
    "humanize-string": "^3.0.0",
    "lodash.debounce": "^4.0.8",
    "make-plural": "^7.1.0",
    "pinia": "^2.0.16",
    "pluralize": "^8.0.0",
    "sortablejs": "^1.15.0",
    "vue": "^3.2.37",
    "vue-router": "^4.1.2"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/jsdom": "^16.2.14",
    "@types/node": "^16.11.46",
    "@vitejs/plugin-vue": "^3.0.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^2.0.2",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^9.0.0",
    "jsdom": "^20.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "typescript": "~4.7.4",
    "vite": "^3.0.1",
    "vitest": "^0.18.1"
  }
}

[posva]

This is actually intended (See vuejs/core#1324 (comment)). You only need to set the parameter to UnwrapRef<User>:

interface Model {
  id: number
}

// Define generic factory function
export function init<User extends Model>(name = 'settings') {
  return defineStore(name, {
    state: () => {
      return {
        // Set one of the properties to the generic type
        user: {} as User
      }
    },
    actions: {
      // Add action which accepts argument with our generic type
      set(u: UnwrapRef<User>) {
        // See linter error when trying to assign arg value to the state
        this.user = u
      }
    }
  })
}

const s = init()()
s.set({ id: 1 })

[f3oall]

Thank you very much!

The discussion you mentioned fully explains why this is happening.

[andredewaard]

Thanks! this helped me in the right direction, But how can we use this with an array?
Error:

UnwrapRef<T>' is not assignable to parameter of type 'UnwrapRefSimple<T>'

[Mensix]

@andredewaard have you found any solution? 😆