Typescript vue data types

Поддержка TypeScript

Vue CLI предоставляет встроенную поддержку TypeScript.

Официальные файлы объявлений в npm-пакетах

Статическая типизация может предотвратить много потенциальных ошибок ещё на этапе компиляции, особенно при разрастании приложений. По этой причине Vue поставляется с официальными файлами объявления типов TypeScript, причём не только для ядра Vue, но также и для Vue Router и Vuex.

Так как всё это уже опубликовано на npm, то вам даже не понадобится использовать внешние инструменты, такие как Typings , потому что объявления типов автоматически импортируются вместе с Vue.

Рекомендуемая конфигурация

// tsconfig.json
{ 
"compilerOptions": { 
// это соответствует поддержке браузеров у Vue 
"target": "es5", 
// это обеспечивает более строгий вывод для свойств данных в `this` 
"strict": true, 
// при использовании webpack 2+ или rollup, добавить поддержку tree-shaking: 
"module": "es2015", 
"moduleResolution": "node" 
}
}

Обратите внимание, вы должны включить strict: true (или, по крайней мере, noImplicitThis: true , которая является частью флага strict ), чтобы использовать проверку типов у this в методах компонентов, иначе он всегда будет рассматриваться как тип any .

Инструменты разработки

Создание проекта

Vue CLI 3 позволяет генерировать новые проекты, которые используют TypeScript. Чтобы начать:

# 1. Установите Vue CLI, если она ещё не установлена
npm install --global @vue/cli

# 2. Создайте новый проект, затем выберите опцию «Manually select features»
vue create my-project-name

Поддержка редакторов

Для разработки приложений Vue с использованием TypeScript мы настоятельно рекомендуем использовать Visual Studio Code, которая предоставляет отличную встроенную поддержку для TypeScript. Если вы используете однофайловые компоненты, воспользуйтесь отличным расширением Vetur, которое обеспечивает вывод TypeScript внутри однофайловых компонентов и многие другие возможности.

WebStorm также предоставляет встроенную поддержку для TypeScript и Vue.

Использование

Чтобы позволить TypeScript правильно выводить типы внутри опций компонента Vue, вам необходимо определять компоненты с помощью Vue.component или Vue.extend :

import Vue from 'vue'

const Component = Vue.extend({ 
// вывод типов включён
})

const Component = { 
// это НЕ БУДЕТ работать, 
// потому что TypeScript не может определить, что это опции компонента Vue.
}

Компоненты Vue на основе классов

Если вы предпочитаете API на основе классов при объявлении компонентов, вы можете использовать официально поддерживаемый декоратор vue-class-component:

import Vue from 'vue'
import Component from 'vue-class-component'

// декоратор @Component указывает, что класс — это компонент Vue
@Component({ 
// здесь можно использовать все опции компонента 
template: 'Click!'
})
export default class MyComponent extends Vue { 
// Данные инициализации могут быть объявлены как свойства экземпляра 
message: string = 'Hello!'
 
// Методы компонента могут быть объявлены как методы экземпляра 
onClick (): void { 
window.alert(this.message) 
}
}

Расширение типов для использования с плагинами

Плагины могут добавлять во Vue новые глобальные свойства, свойства экземпляра и параметры компонента. В этих случаях необходимы объявления типов для возможности плагина компилироваться в TypeScript. К счастью, есть функция TypeScript для расширения существующих типов, называемая расширением модуля (module augmentation).

Например, чтобы объявить свойство экземпляра $myProperty с типом string :

// 1. Обязательно импортируйте Vue перед объявлением расширенных типов
import Vue from 'vue'

// 2. Укажите файл с типами, которые вы хотите расширить
// Vue имеет тип конструктора в types/vue.d.ts
declare module 'vue/types/vue' { 
// 3. Объявите расширение для Vue 
interface Vue { 
$myProperty: string 
}
}

После включения указанного выше кода в файл объявлений (например, my-property.d.ts ) в вашем проекте, вы можете использовать $myProperty в экземпляре Vue.

var vm = new Vue()
console.log(vm.$myProperty) // Это скомпилируется без ошибок 

Вы также можете объявить дополнительные глобальные свойства и параметры компонента:

import Vue from 'vue'

declare module 'vue/types/vue' { 
// Глобальные свойства можно объявлять 
// на интерфейсе `VueConstructor` 
interface VueConstructor { 
$myGlobal: string 
}
}

// ComponentOptions объявляется в types/options.d.ts
declare module 'vue/types/options' { 
interface ComponentOptionsextends Vue> { 
myOption?: string 
}
}

Указанные выше объявления позволяют скомпилировать следующий код:

// Глобальное свойство
console.log(Vue.$myGlobal)

// Дополнительный параметр компонента
var vm = new Vue({ 
myOption: 'Привет'
})

Аннотации возвращаемых типов

TypeScript может столкнуться с трудностями при определении типов определённых методов из-за циклической природы файлов Vue с объявлением типов. По этой причине вам может потребоваться аннотировать возвращаемый тип для методов, таких как render и тех, которые находятся в computed .

import Vue, { VNode } from 'vue'

const Component = Vue.extend({ 
data () { 
return { 
msg: 'Привет' 
} 
}, 
methods: { 
// необходима аннотация из-за `this` в возвращаемом типе 
greet (): string { 
return this.msg + ', мир' 
} 
}, 
computed: { 
// необходима аннотация 
greeting (): string { 
return this.greet() + '!' 
} 
}, 
// `createElement` выводится, но `render` нуждается в возвращаемом типе 
render (createElement): VNode { 
return createElement('div', this.greeting) 
}
})

Если вы обнаружите, что вывод типа или автодополнение не работают, аннотация некоторых методов может помочь решить эти проблемы. Использование опции —noImplicitAny поможет найти многие из этих методов без аннотаций.

Аннотация типов входных параметров

import Vue, { PropType } from 'vue'

interface ComplexMessage { 
title: string, 
okMessage: string, 
cancelMessage: string
}

const Component = Vue.extend({ 
props: { 
name: String, 
success: { type: String }, 
callback: { 
type: Function as PropType() => void> 
}, 
message: { 
type: Object as PropTypeComplexMessage>, 
required: true, 
validator (message: ComplexMessage) { 
return !!message.title; 
} 
} 
}
})

Если функция валидатора не получает выведенный тип или не работает автоподстановка свойств, то аннотация аргумента с ожидаемым типом может помочь решить эти проблемы.

Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .

Источник

Vue 3 + Typescript: Data with Custom Types

Now that we know how to define custom types, it’s time for us to apply our new abilities to Vue itself! To start, we will be taking a look at the data option first.

The Problem

When we open up EventDetails.vue , one of the problems that might not be immediately obvious for those of us who haven’t used types before is that currently our editor cannot provide much help in terms of what is valid or not.

📄 EventDetails.vue

template> div v-if="event"> h1>> h1> p>> on > @ > p> p>> p> div> template> 

For example, while we reference event.id , there’s nothing to inform us that this is an attribute that exists. In fact, the only way to really check is to wait until the code runs. And while this might not seem like a huge impediment at first, this can cause a lot of issues when the data becomes more complex.

Introducing VueDX

So how do we get our editor to help us? Well, the first step is to install a new VS Code extension called VueDX.

It is a new extension designed to enhance our developer experience with Vue in a lot of different ways. We won’t have time to cover everything in this lesson, but just know it’s worth taking a closer look at!

Once we’ve installed it and restarted VS Code, one of the first things you may notice is that our editor is now reporting errors. This is great!

Now let’s fix these errors!

Defining the Event Custom Type

The reason we are seeing this error is that as can see in our component definition, events is actually defined as null .

📄 EventDetails.vue

import < defineComponent >from 'vue' export default defineComponent(< name: 'EventDetails', data() < return < event: null > >, >) 

And as far as types are concerned, null will never have a property of title , time , etc. so the errors we are seeing make sense.

So to fix this, let’s start by tracing back to how the Event type should be structured. The way we do this is to trace our steps back to where the data source is coming from, which is an API call in EventService.ts

📄 EventService.vue

import axios from 'axios' const apiClient = axios.create(< baseURL: '', withCredentials: false, headers: < Accept: 'application/json', 'Content-Type': 'application/json' > >) 

When we visit the page, we can navigate the site to find examples of our event. And what we end up with looks something like this:

[ < "id": 123, "category": "animal welfare", "title": "Cat Adoption Day", "description": "Find your new feline friend at this event.", "location": "Meow Town", "date": "January 28, 2022", "time": "12:00", "organizer": "Kat Laydee" > ] 

With this, we can now say with confidence that events should be an Array that contains a series of objects with the following properties:

• id
• category
• title
• description
• location
• date
• time
• organizer

So, to get started, we’ll begin by defining a types.ts in the src directory to centralize where types are defined in order to also allow other files to import types as needed. And in here, we’ll go ahead and define our EventItem type.

📄 types.ts

export interface EventItem < id: number category: string title: string description: string location: string date: string time: string organizer: string > 

To clarify, we could certainly dive deeper into refining the types for the individual properties of EventItem , but for this lesson, I’ve kept it simple for now.

Now that we have defined EventItem and made it importable with the export keyword, let’s import it into EventDetails.vue .

📄 EventDetails.vue

import < defineComponent >from 'vue' import < EventItem >from '../types' export default defineComponent(< name: 'EventList', data() < return < event: null > >, >) 

At this point though, you might be wondering, “Well, how do I add EventItem as a type to events?” And you’d be right, because as it stands right now, we need to learn a new technique before we can type our events property: type assertions.

What are type assertions?

At its core definition, type assertions allow you to override the inferred type by the editor. In other words, it is a way for you to tell the compiler that you know more about the type than it does.

For example, if we have a type called TodoItem and an empty object:

interface TodoItem < label: string complete: boolean > const futureTodoItem = <> futureTodoItem.label = 'Install VueDX extension' futureTodoItem.complete = false 

TypeScript by default, will infer that futureTodoItem is simply an empty object that should not have any properties in it and will report errors stating as such. But we know it should be a TodoItem type, so we can tell TypeScript this by using the as keyword to override the default behavior.

interface TodoItem < label: string complete: boolean > const futureTodoItem = <> as TodoItem futureTodoItem.label = 'Install VueDX extension' futureTodoItem.complete = false 

And just like that, everything works now!

Use Type Assertion to Define Types in Data

Equipped with our new abilities, let’s fix our type in EventDetails now!

📄 EventDetails.vue

import < defineComponent >from 'vue' import < EventItem >from '../types' export default defineComponent(< name: 'EventDetails', data() < return < event: null > >, >) 

We know that event should be an object, so we can start by switching out null for <> .

📄 EventDetails.vue

import < defineComponent >from 'vue' import < EventItem >from '../types' export default defineComponent(< name: 'EventDetails', data() < return < event: <>> >, >) 

But we need to go one step further since we want to tell TypeScript that it is an object of EventItem type. And we can accomplish this with our new as keyword!

📄 EventDetails.vue

import < defineComponent >from 'vue' import < EventItem >from '../types' export default defineComponent(< name: 'EventDetails', data() < return < event: <>as EventItem > >, >) 

And just like that, we’ve now properly typed our data property!

Code Challenge

Now that you know how to add custom types to the data option, checkout the 06-challenge branch and define the correct custom type for EventList.vue .

Let’s ReVue

In this lesson, we’ve learned about the new VueDX extension, what type assertions are, and how to use the new as keyword in order to define custom types in our data option in Vue 3.

In the next lesson, we’ll be taking a look at how to define props with custom types. See you there!

Источник