When to have @types

As I am reading some tutorials just like this one here
I noticed the author has introduced @type

as I am new into vue, I do not know what @type is! and iI do not have it in my .vue project.

would you please tell me in what scenario or case I would need to have @type and what it should container

@/types refers to a folder called types the @ means the folder is non-npm packages (see more at the following link for more information)
Usually you create this folder in order to store your interface/types related to your application. (see more at the following link for more information)
In the tutorial you can see that is importing a type called Product from this folder.
I hope I was able to help you.
good luck for the future !

Edit :
Historically, Vue used javascript as the programming language in its framework. In addition to this, Microsoft has developed Typescript which, as its name suggests, is a language similar to Javascript but with types. You can read the documentation on this subject in the link in my second reply.
As mentioned in the tutorial in your post, Typescript is now supported in version 3 of Vue. In the tutorial of your post, the author makes the choice to use Typescript and thus Types/Interface that Typescript propose as I was able to explain it in my answer.
I hope this is clearer for you.
I can only advise you to read the Typescript documentation and to use this language in the development of your future Vue applications.
In addition, the vue documentation is very well provided with examples using Typescript.