Set data Type in Vue data object with Typescript

Question

I'm currently using Vue.js with Typescript in a webpack project.

As indicated in the Recommended Configuration in my tsconfig.json I have:

"strict": true,

Inside one of my component i have:

declare interface Player {
    cod: string,
    param: string
  }

export default Vue.extend({
    name: 'basecomponent',
    data() {
      return {
        players: []
      };
    },
    created() 
      let self = this
      axios.get('fetch-data')
        .then((response) => {
          let res: Players[] = response.data;
          for(let i = 0; i < res.length; i++){
              self.players.push(res[i]);
          }
        })
        .catch((error: string) => {
          console.log(error);
       });
    },
 });

but when I try to compile i get:

 error TS2345: Argument of type 'Player' is not assignable to parameter of type 'never'.

Cause I believe players: [] has never[] type.

My question is: how can I infer type Vue data object properties??

Michael Wilson · Accepted Answer · 2019-07-10 13:33:44Z

144

To add to Joshua's answer, you may want to declare the type of players inline so your code doesn't get too verbose as your data gets larger.

data() {
  return {
    players: [] as Player[]
  };
},

another option:

data() {
  return {
    players: new Array<Player>()
  };
},

edited Jul 10, 2019 at 13:33

answered May 2, 2018 at 18:55

Michael Wilson

1,9352 gold badges13 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Over a year ago

Except, least with my vanilla setup I get a warning - The class method 'data' must be marked either 'private', 'public', or 'protected'. I assume we drop a get in front of it?

user74091 Over a year ago

i now get the 'type assertion on object literals' error with this approach. the approach below from @ore4444 is now the more current recommendation

ie8888 Over a year ago

the type assertion is not a good idea. Someone could even write players: [{notAPlayer: true}] as Player[]

Ore4444 · Accepted Answer · 2019-07-24 10:00:52Z

34

This should work:

declare interface Player {
  cod: string,
  param: string
}

declare interface BaseComponentData {
  players: Player[]
}

export default Vue.extend({
  name: 'basecomponent',
  data(): BaseComponentData {
    return {
      players: []
    };
  },
})

edited Jul 24, 2019 at 10:00

answered Jul 22, 2019 at 18:45

Ore4444

9,3652 gold badges26 silver badges29 bronze badges

1 Comment

Vinicius Bazanella Over a year ago

the sad side is that for every new key you'll have to declare it twice, once in the interface and another on data function

0Valt · Accepted Answer · 2021-10-01 18:21:54Z

29

Your data method has an undeclared return value.

If you supply one, TypeScript will know what to expect with players.

You just need to expand the data() { line.

e.g.:

data() {
  return {
    players: []
  };
},

needs to become:

data() : {
  players: Array<any>, // if possible, replace `any` with something more specific
} {
  return {
    players: []
  };
},

Tada! players is now of type Array of any.

edited Oct 1, 2021 at 18:21

0Valt

10.5k9 gold badges41 silver badges66 bronze badges

answered Feb 7, 2018 at 22:29

Joshua Hansen

5054 silver badges4 bronze badges

4 Comments

Plastic Over a year ago

I do not think I have understood the proposed solution, in any case your code is semantically wrong, ''data'' must be a function that return an object...

Plastic Over a year ago

it's not generic typescript but typescript used on a VUE object

Jae Woo Woo Over a year ago

@Plastic It is right usage of typescript. It shows return type of data function so that you can declare the types of return value.

FrankPl Over a year ago

I think the first word of the second line of your proposed code should read players, not people.

Ahmad · Accepted Answer · 2020-03-21 14:11:59Z

13

I found another method that is more close to the typical syntax, while keeping the code short.

data() {
  return new class {
    players: Player[] = []
  }();
},

answered Mar 21, 2020 at 14:11

Ahmad

5,7608 gold badges46 silver badges62 bronze badges

2 Comments

Paul-Sebastian Manole Over a year ago

This is arguably the best way to do it. This is declaring the type with shorthand syntax, and assigning the value in one line. Using as does type coercion, probably not what you want, while new Array<T>() is the generic (uses generics) syntax of T[].

Reynicke Over a year ago

I like this method. How do you solve the issue of assigning values from props? props: {initialPlayer: Object}, data() { return new class { players: Player[] = [this.initialPlayer] // this would refer to the class? }(); },

Илья Карев · Accepted Answer · 2018-07-14 12:21:56Z

8

Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.

It will look like this:

players: [] as Player[]

answered Jul 14, 2018 at 12:21

Илья Карев

1052 silver badges4 bronze badges

2 Comments

nomadoda Over a year ago

Any source you could refer to, backing up your claim that '<>' syntax is forbidden?

Hans Koch Over a year ago

@nomadoda It is not forbidden, i think Илья Карев is referring to TSlint warning you for the use of <T> for type casting, the reason why you should prefer the myVar as T Syntax is due to lacking JSX support. You can read that in the TypeScript docs typescriptlang.org/docs/handbook/jsx.html

th3n3wguy · Accepted Answer · 2021-09-20 04:44:05Z

In case anyone comes across this in the future, here is the answer that solved my problem. It is a little more "wordy", but it does the type inference properly everywhere within the Vue.extend() component definition:

interface Player {
  cod: string,
  param: string
}

// Any properties that are set in the `data()` return object should go here.
interface Data {
  players: Player[];
}

// Any methods that are set in the "methods()" should go here.
interface Methods {}

// Any properties that are set in the "computed()" should go here.
interface Computed {}

// Any component props should go here.
interface Props {}

export default Vue.extend<Data, Methods, Computed, Props>({
    name: 'basecomponent',
    data() {
      return {
        players: []
      };
    },
    // You probably will want to change this to the "mounted()" component lifecycle, as there are weird things that happen when you change the data within a "created()" lifecycle.
    created() {
      // This is not necessary.
      // let self = this
      // If you type the Axios.get() method like this, then the .data property is automatically typed.
      axios.get<Players[]>('fetch-data')
        .then(({ data }) => {
          // This is not necessary.
          // let res: Players[] = response.data;
          // for(let i = 0; i < data.length; i++){
          //     self.players.push(data[i]);
          // }
          this.players = data;
        })
        .catch((error: string) => {
          console.log(error);
       });
    },
 });

Klesun · Accepted Answer · 2023-02-24 16:00:12Z

0

To not resort to describing the whole data structure, a more viable approach would probably be to first define players as a variable with explicit type:

export default Vue.extend({
    name: 'basecomponent',
    data() {
      const players: Player[] = [];
      return {
        players: players
      };
    },
...

This should work for other complex types as well, not just for arrays. Though I'm yet to find out how to tell volar not to narrow the union type by the initializer value -_-

answered Feb 24, 2023 at 16:00

Klesun

14.1k7 gold badges66 silver badges60 bronze badges

1 Comment

Penny Liu Over a year ago

You can simplify the code by directly returning the players array without explicitly assigning it to a property with the same name. return { players }

Collectives™ on Stack Overflow

Set data Type in Vue data object with Typescript

7 Answers 7

3 Comments

1 Comment

4 Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

4 Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related