Первоначально опубликовано на alexjoverm.github.io 28 июня 2017 г.
У вас есть проект Vue, и вы слышали обо всем, с чем вам может помочь TypeScript. Вы решили начать использовать TypeScript. Здесь вы увидите, как сделать это доступным и прагматичным способом, чтобы найти любовь между этими двумя технологиями.
В этой статье мы предполагаем, что вы используете SFC (одиночные файловые компоненты), но это может сработать, даже если вы разбиваете их на несколько файлов. Итак… приступим!
Интеграция TypeScript
Мы начнем с шаблона Vue CLI Webpack, но он будет работать и с потрясающим шаблоном PWA. Не выбирайте использование ESLint, когда вас просят:
vue init webpack my-app cd my-app
Нам нужно сделать 4 шага:
1. Создайте файл tsconfig.json
Давайте начнем с чего-то очень простого, позже мы вернемся к настройке TypeScript.
{ "compilerOptions": { "lib": ["dom", "es5", "es2015"], "target": "es5", "module": "es2015", "moduleResolution": "node", "sourceMap": true, "allowSyntheticDefaultImports": true } }
Наиболее важной частью является настройка allowSyntheticDefaultImports
. Поскольку типы Vue не используют экспорт по умолчанию ES2015, этот параметр должен быть установлен для обхода этого. Вы можете увидеть больше информации на этой странице документации VSCode.
Установка "module": "es2015"
сделает код сотрясаемым деревом за счет создания ESM (модулей EcmaScript).
2. Добавьте настройки ts-loader и webpack
Установите typescript
и ts-loader
с помощью npm:
npm i -D typescript ts-loader
Затем откройте build/webpack.base.conf.js
и поместите следующий код в начало module.rules
, прямо перед vue-loader
:
module: { rules: [ { test: /\.ts$/, exclude: /node_modules|vue\/src/, loader: "ts-loader", options: { appendTsSuffixTo: [/\.vue$/] } }, ...
Там переименуйте запись в .ts
и добавьте ее в расширения:
entry: { app: ‘./src/main.ts’ }, … resolve: { extensions: [‘.ts’, ‘.js’, ‘.vue’, ‘.json’], …
3. Добавьте es-module: true
к build/vue-loader.conf.js
Это укажет vue-loader использовать модули ES вместо модулей CJS (CommonJS), как описано в документации vue-loader:
module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), esModule: true }
4. Используйте TypeScript в файлах
Итак, вы должны сделать 2 вещи здесь:
- Переименуйте
.js
в.ts
расширения в папкеsrc
- Используйте
lang="ts"
в тегеscript
вашего файла Vue. Например, вApp.vue
:
<script lang="ts"> export default { name: 'app' } </script>
Исправление проблем
Если ваш редактор кричит на строку import App from './App'
в файле main.js
о том, что он не находит модуль App, вы можете добавить в свой проект файл vue-shim.d.ts
со следующим содержимым:
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
Я использую VSCode 1.13.1 и не вижу его, но видел раньше.
TSLint, Красивее… Богиня!
Я записал двухминутное видео на Egghead, где я объясняю, как настроить TSLint с Prettier без каких-либо конфликтов. Иди проверь!
Хорошо, я могу использовать TypeScript… так что теперь?
На данный момент TypeScript уже может указать вам на некоторые ошибки, которые вы не замечали раньше, используя встроенные и сторонние типы, и дает вам лучший опыт разработки, используя вывод типов, как описано в TypeScript в Slack, статья, рассказывающая, как Slack перевел свою кодовую базу на TypeScript.
Тем не менее, вы должны добавить свои собственные типы, используя интерфейсы, типы, перечисления, классы и все, что вам нужно. Таким образом вы добавите больше покрытия типов, которое TypeScript будет использовать для применения статической типизации, гарантируя безопасность типов.
В идеале вы должны использовать опцию компилятора TypeScript 2.3 strict
в своем tsconfig.json
, потому что это обеспечит вам максимальную безопасность типов. У Мариуса Шульца есть хорошо поясненная статья по этому поводу. В TypeScript 2.3 параметр strict представляет собой группу из 4 параметров, но в будущих выпусках может быть добавлено больше:
strictNullChecks
noImplicitAny
noImplicitThis
alwaysStrict
Однако, если у вас средняя/большая кодовая база, использование строгой опции заставит вас потратить действительно огромные усилия и время на устранение нехватки типов.
В этом случае хороший способ интегрировать TypeScript — начать с наиболее гибкой конфигурации, и по мере того, как вы будете добавлять большее покрытие типов в свою кодовую базу, начните включать по отдельности упомянутые выше флаги, пока не дойдете до того момента, когда вы сможете применить strict
, поэтому вы можете подходить к нему прагматично.
Вывод
TypeScript обеспечивает безопасность типов в вашей кодовой базе с самого начала, но чем больше типов вы определяете, тем легче обнаруживать ошибки и ошибки и делать код удобным для сопровождения. Vue из версии 2 поставляется с типизациями, поэтому мы можем их использовать. Они становятся более мощными, когда вы используете ООП (объектно-ориентированное программирование) в Vue, но об этом вы узнаете в другом посте.
Если вам это нравится, пожалуйста, идите и поделитесь им! Вы можете следить за мной в этом блоге или в твиттере как @alexjoverm. Любые вопросы? Стрелять!