Использование TypeScript в Nuxt или Vue может быть очень сложным. Я только хочу сделать проверку типов! Больше ничего. Мне потребовалось так много времени, чтобы узнать, как включить проверку типов в Nuxt, поэтому я поделюсь тем, что я обнаружил (и вы можете применить эти выводы и во Vue).
Шаг 1. Измените язык скрипта.
Это должно было быть очевидно. В первые веб-дни нам приходилось явно устанавливать язык тега скрипта на JavaScript. JavaScript не был языком по умолчанию в первые дни. С тех пор браузер теперь предполагает, что тег script всегда является JavaScript.
Чтобы включить TypeScript на странице .vue
, измените язык скрипта.
<script lang="ts"> const myVar: string = 'hello' </script>
Теперь мы можем использовать TypeScript. Простой.
Шаг 2: Создайте интерфейс для объекта данных
TypeScript очень хорошо ловит ошибки. Вы путаетесь с типами, вы получаете ошибку. Поэтому мы должны определить, как должен выглядеть объект данных.
<script lang="ts"> interface Data { var1: boolean; } export default { data(): Data { var1: true, } } </script>
Теперь каждый раз, когда мы динамически обновляем данные или обновляем наш код, у нас будет проверка типов.
Шаг 3: Создайте интерфейс для этого
Страницы Vue позволяют нам использовать переменную this
для доступа к свойствам Nuxt/Vue и свойствам данных. Мы должны определить интерфейс, позволяющий использовать this
наших функций.
<script lang="ts"> interface Data { var1: boolean; } interface This extends Data { [key: string]: any; } export default { data(): Data { var1: true, }, created(this: This) { this.var1 = false; } } </script>
Теперь мы можем использовать this
в хуках жизненного цикла Vue, таких как created
. Поскольку у this
так много свойств, нам нужно было добавить общее определение ключа для учета всех остальных свойств.
(Необязательно) Шаг 4: Создайте интерфейс для объекта методов
Если у нас есть методы, мы можем убедиться, что они принимают правильные типы ввода и вывода.
<script lang="ts"> interface Data { var1: boolean; } interface Methods { onCreated(): void } interface This extends Data, Methods { [key: string]: any; } export default { data(): Data { var1: true, }, created(this: This) { this.var1 = false; console.log(this.onCreated(true)) }, methods: <Methods>{ onCreated(this: This, val: boolean): string { return `my val = ${val}` } } } </script>
Методы добавляются в this
, поэтому мы расширили интерфейс This
.
Вывод
Я предположил, что у вас уже есть tsconfig.json
и все остальные необходимые элементы для добавления соответствующих пакетов TypeScript npm, чтобы этот пост был коротким и простым. Подход, который я описал, нестандартен, но он упрощает использование TypeScript на ваших страницах Vue. Кроме того, рекомендуемые подходы Nuxt и Vue не показывают, как проверять типы объектов data
и methods
.
Я надеюсь, что вы нашли этот пост полезным.
Примечание от автора
Присоединяйтесь к моему списку рассылки, чтобы получать обновления о моих письмах.
Посетите miguelacallesmba.com/subscribe и зарегистрируйтесь.
Берегите себя,
Мигель
об авторе
Мигель — главный инженер по безопасности и автор книги Безсерверная безопасность. Он работал над несколькими бессерверными проектами в качестве разработчика и инженера по безопасности, участвовал в бессерверных проектах с открытым исходным кодом и работал над большими военными системами на различных инженерных должностях.