Làm thế nào để sử dụng TypeScript với Vue.js và các thành phần tệp đơn?

Question

Tôi đã tìm kiếm trên toàn bộ web để có một ví dụ làm việc tối thiểu về thiết lập Vue.js + TypeScript. Như thường lệ với "ngăn xếp JavaScript hiện đại", hầu hết các hướng dẫn này đều lỗi thời dù được viết chỉ một vài tháng trước hoặc tùy thuộc vào thiết lập rất cụ thể. Dường như không có ví dụ chung, có thể xác minh được để xây dựng.

Dưới đây là một số các nguồn tài nguyên Tôi coi:

• https://vuejs.org/v2/guide/typescript.html
• https://herringtondarkholme.github.io/2016/10/03/vue2-ts2/
• http://www.mindissoftware.com/Vue-Sample-in-Typescript/
• https://medium.com/@hayavuk/setting-vue-up-for-typescript-goodness-a6ddc4072f4f
• https://johnpapa.net/vue-typescript/
• https://alexjoverm.github.io/2017/06/28/Integrate-TypeScript-in-your-Vue-project/

Mẫu cơ bản tôi sử dụng là một trong những cung cấp bằng cách chạy vue-cli init webpack với tất cả các tùy chọn mặc định. Vì điều này tạo ra rất nhiều mã, tôi không dán mọi thứ ở đây. Nếu có nhu cầu cho một số trích đoạn cụ thể, tôi sẽ sẵn sàng cập nhật câu hỏi.

Các tài liệu chính thức Vue.js là vô ích cho mục đích của tôi bởi vì nó không xem xét thiết lập nguyên cảo với SFCs. Mới nhất tôi đã thử là người cuối cùng trong danh sách. Tôi đã theo dõi thiết lập chính xác nhưng nó chạy tôi vào lỗi sau trên npm run dev:

Bất kỳ ai cũng có thể giải thích lý do tại sao điều này xảy ra và cách giải quyết? Tốt hơn hết, tôi rất hoan nghênh một ví dụ từng bước ngắn gọn, tối thiểu, từng bước về cách thiết lập cấu hình Vue.js + TypeScript hoạt động với mẫu webpack.

Tôi đã hoàn tất thành công một số dự án khách hàng chạy trong sản xuất trong Vue.js với JavaScript vanilla nhưng công cụ TypeScript này kết hợp với Vue.js chỉ gây nhầm lẫn cho tôi.

Answer 1

Tôi đã cố gắng sử dụng typescript với vue. Ý kiến ​​cá nhân của tôi: nó không hoạt động tốt. Kể từ khi một số vue internals không phù hợp cho typescript:

1. vuex với this.$store.dispatch('some_action')
2. Vue.use, Vue.mixin và những thứ khác tương tự mà biến những Vue dụ toàn cầu

Nhưng, trong khi làm nghiên cứu của tôi, tôi đã tìm thấy những nồi hơi tuyệt vời này: typescript-vue-tutorial bởi Daniel Rosenwasser và TypeScript-Vue-Starter của Microsoft.

Tôi cũng đã cố gắng bắt chước vue-webpack-template với typescript bởi bản thân mình: https://github.com/sobolevn/wemake-vue-template

Ngoài ra còn có các công cụ tốt đẹp để làm cho công việc typescript + vue của bạn tốt hơn:

• vuex-typescript
• vue-class-component
• vue-property-decorator

Cuối cùng, tôi đã quyết định sử dụng flow. Kiểm tra this project template nếu bạn quan tâm.

Answer 2

Ý kiến ​​tuyệt đối đồng ý của @ sobolevn. Nhưng, có rất nhiều thông tin để tôi đánh giá, hỗ trợ cộng đồng cho TypeScript đáng để chờ đợi.

hệ sinh thái Vue của đang được nhiều nguyên cảo:

1. *.vueTypeScript lint tập tin trong VSCode được hỗ trợ. Xem vấn đề này vetur.

2. Hệ sinh thái nguồn mở.

   • vue-router
   • vuex-class
   • vue-test-utils

3. New vue-cli trong thiết kế. click me

Vì vậy, nếu bạn có thời gian chờ đợi, bạn có thể tạm thời quan sát một thời gian. Hoặc, bạn có thể tham khảo các dự án sau: TypeScript-Vue-Starter và A Webpack Template Fork With Typescript Support.

Answer 3

Điều này giống như mẫu vue-cli mới nhất với số lượng ngôi sao đáng kể và hỗ trợ cho vue 2.5.

Tôi không nghĩ rằng tôi thấy nó đặc biệt được đề cập trong câu trả lời khác

vue init ducksoupdev/vue-webpack-typescript my-project

https://github.com/ducksoupdev/vue-webpack-typescript