Tự học Vuejs | Sử dụng Vue với TypeScript

Chào mừng đến với Cafedev,nơi chúng tôi chia sẻ kiến thức và kinh nghiệm về công nghệ! Trong bài viết này, chúng ta sẽ khám phá cách sử dụng Vue với TypeScript. Vue.js, một framework JavaScript phổ biến, khi kết hợp với TypeScript, một ngôn ngữ kiểu tĩnh mạnh mẽ, sẽ giúp xây dựng các ứng dụng web linh hoạt và dễ bảo trì. Hãy cùng tìm hiểu cách tận dụng sức mạnh của TypeScript để phát triển ứng dụng Vue của bạn một cách hiệu quả và dễ dàng!

Sử dụng Vue với TypeScript

Hệ thống kiểu như TypeScript có thể phát hiện nhiều lỗi thông thường thông qua phân tích tĩnh trong quá trình biên dịch. Điều này giảm khả năng xuất hiện lỗi thời gian chạy trong sản xuất, và cũng cho phép chúng ta tự tin hơn khi tái cấu trúc mã trong các ứng dụng quy mô lớn. TypeScript cũng cải thiện tính thẩm mỹ cho nhà phát triển thông qua tính năng tự động hoàn thành dựa trên kiểu trong các IDE.

Vue được viết bằng TypeScript và cung cấp hỗ trợ TypeScript hàng đầu. Tất cả các gói chính thức của Vue đi kèm với các khai báo kiểu được gói thành mặc định mà nên hoạt động ngay lập tức.

1. Thiết lập Dự án

create-vue, công cụ xây dựng dự án chính thức, cung cấp các tùy chọn để tạo ra một dự án Vue sử dụng Vite với TypeScript.

1.1 Tổng quan

Với thiết lập dựa trên Vite, máy chủ dev và trình gói chỉ thực hiện việc biên dịch và không thực hiện kiểm tra kiểu. Điều này đảm bảo máy chủ dev của Vite vẫn hoạt động nhanh chóng ngay cả khi sử dụng TypeScript.

• Trong quá trình phát triển, chúng tôi khuyến nghị phụ thuộc vào một cài đặt IDE tốt để nhận phản hồi ngay lập tức về lỗi kiểu.
• Nếu sử dụng SFCs, hãy sử dụng tiện ích vue-tsc để kiểm tra kiểu và tạo khai báo kiểu từ dòng lệnh. vue-tsc là một bao bọc xung quanh tsc, giao diện dòng lệnh riêng của TypeScript. Nó hoạt động chủ yếu giống như tsc ngoại trừ việc nó hỗ trợ các tệp SFC Vue ngoài các tệp TypeScript. Bạn có thể chạy vue-tsc ở chế độ xem trong khi đồng thời chạy máy chủ dev của Vite, hoặc sử dụng một plugin Vite như vite-plugin-checker để chạy các kiểm tra trong một luồng làm việc riêng.
• Vue CLI cũng cung cấp hỗ trợ TypeScript, nhưng không còn được khuyến nghị. Xem ghi chú dưới đây bài viết.

1.2 Hỗ trợ IDE

• Visual Studio Code (VS Code) được khuyến nghị mạnh mẽ vì hỗ trợ tốt cho TypeScript ngay từ khi cài đặt.
• Vue – Chính thức (trước đây là Volar) là tiện ích mở rộng chính thức của VS Code cung cấp hỗ trợ TypeScript bên trong các SFC Vue, cùng với nhiều tính năng tuyệt vời khác.

Gợi ý: Tiện ích mở rộng chính thức của Vue thay thế Vetur, tiện ích mở rộng chính thức trước đây của chúng tôi cho Vue 2. Nếu bạn đang cài đặt Vetur, hãy đảm bảo tắt nó trong các dự án Vue 3.

• WebStorm cũng cung cấp hỗ trợ ngay từ khi cài đặt cho cả TypeScript và Vue. Các IDE JetBrains khác cũng hỗ trợ chúng, hoặc là ngay khi cài đặt hoặc qua một plugin miễn phí. Tính đến phiên bản 2023.2, WebStorm và Plugin Vue đi kèm với hỗ trợ tích hợp sẵn cho Vue Language Server. Bạn có thể thiết lập dịch vụ Vue để sử dụng tích hợp Volar trên tất cả các phiên bản TypeScript, trong Cài đặt > Ngôn ngữ & Frameworks > TypeScript > Vue. Theo mặc định, Volar sẽ được sử dụng cho các phiên bản TypeScript từ 5.0 trở lên.

1.3 Cấu hình tsconfig.json

Dự án được xây dựng thông qua create-vue bao gồm tsconfig.json được cấu hình trước. Cấu hình cơ bản được trừu tượng hóa trong gói @vue/tsconfig. Bên trong dự án, chúng tôi sử dụng Project References để đảm bảo các kiểu đúng cho mã chạy trong các môi trường khác nhau (ví dụ: mã ứng dụng và mã kiểm thử nên có các biến toàn cục khác nhau).

Khi cấu hình tsconfig.json thủ công, một số tùy chọn đáng chú ý bao gồm:

• compilerOptions.isolatedModules được đặt là true vì Vite sử dụng esbuild để biên dịch TypeScript và phải tuân thủ giới hạn biên dịch một tệp. compilerOptions.verbatimModuleSyntax là một tập hợp con của isolatedModules và cũng là một lựa chọn tốt – đó là cái mà @vue/tsconfig sử dụng.
• Nếu bạn đang sử dụng Options API, bạn cần đặt compilerOptions.strict là true (hoặc ít nhất kích hoạt compilerOptions.noImplicitThis, một phần của cờ strict) để tận dụng kiểm tra kiểu của this trong các tùy chọn của thành phần. Nếu không this sẽ được xem như any.
• Nếu bạn đã cấu hình các bí danh giải quyết trong công cụ xây dựng của bạn, ví dụ như bí danh @/* được cấu hình mặc định trong một dự án create-vue, bạn cũng cần cấu hình nó cho TypeScript thông qua compilerOptions.paths.
• Nếu bạn dự định sử dụng TSX với Vue, đặt compilerOptions.jsx thành "preserve", và đặt compilerOptions.jsxImportSource thành "vue".

  Xem thêm:

• Tài liệu chính thức về tùy chọn biên dịch TypeScript
• Nhược điểm biên dịch TypeScript của esbuild

1.4 Ghi chú về Vue CLI và ts-loader

Trong các thiết lập dựa trên webpack như Vue CLI, việc kiểm tra kiểu là một phần phổ biến của luồng biến đổi module, ví dụ với ts-loader. Tuy nhiên, đây không phải là một giải pháp sạch sẽ vì hệ thống cần có kiến thức về toàn bộ biểu đồ module để thực hiện kiểm tra kiểu. Bước biến đổi của từng module đơn giản không phải là nơi phù hợp cho nhiệm vụ này. Điều này dẫn đến các vấn đề sau:

– ts-loader chỉ có thể kiểm tra kiểu cho mã sau biến đổi. Điều này không khớp với các lỗi chúng ta thấy trong IDE hoặc từ vue-tsc, mà ánh xạ trực tiếp lại với mã nguồn.
– Việc kiểm tra kiểu có thể chậm. Khi nó được thực hiện trong cùng một luồng / quy trình với các biến đổi mã, nó ảnh hưởng đáng kể đến tốc độ xây dựng của toàn bộ ứng dụng.
– Chúng ta đã có kiểm tra kiểu chạy ngay trong IDE của chúng ta trong một quy trình riêng, vì vậy chi phí chậm trễ trải nghiệm phát triển đơn giản không phải là một sự đánh đổi tốt.
Nếu bạn hiện đang sử dụng Vue 3 + TypeScript thông qua Vue CLI, chúng tôi mạnh mẽ khuyến nghị chuyển sang Vite. Chúng tôi cũng đang làm việc trên các tùy chọn CLI này để kích hoạt hỗ trợ TS chỉ biên dịch, để bạn có thể chuyển sang vue-tsc cho việc kiểm tra kiểu.

2. Ghi chú về Sử dụng Chung

2.1defineComponent()

Để TypeScript có thể suy luận kiểu đúng trong tùy chọn của thành phần, chúng ta cần định nghĩa các thành phần với defineComponent():

import { defineComponent } from 'vue'

export default defineComponent({
  // type inference enabled
  props: {
    name: String,
    msg: { type: String, required: true }
  },
  data() {
    return {
      count: 1
    }
  },
  mounted() {
    this.name // type: string | undefined
    this.msg // type: string
    this.count // type: number
  }
})

defineComponent() cũng hỗ trợ suy luận các prop được truyền vào setup() khi sử dụng Composition API mà không cần sử dụng “<script setup>”

import { defineComponent } from 'vue'

export default defineComponent({
  // type inference enabled
  props: {
    message: String
  },
  setup(props) {
    props.message // type: string | undefined
  }
})

Xem thêm:
– Ghi chú về webpack Treeshaking
– kiểm tra kiểu cho <code< a=””>defineComponent>
Gợi ý defineComponent() cũng cho phép suy luận kiểu cho các thành phần được định nghĩa trong JavaScript thuần.”</code<>

2.2 Sử dụng trong Các Component Tệp Đơn

Để sử dụng TypeScript trong các Single File Components (SFCs), bạn cần thêm thuộc tính lang=”ts” vào các thẻ <script>. Khi có lang=”ts”, tất cả các biểu thức trong mẫu cũng được kiểm tra kiểu chặt chẽ hơn.

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      count: 1
    }
  }
})
</script>
<template>
  <!-- type checking and auto-completion enabled -->
  {{ count.toFixed(2) }}
</template>

lang=”ts” cũng có thể được sử dụng với <script setup>

<script setup lang="ts">
// TypeScript enabled
import { ref } from 'vue'

const count = ref(1)
</script>

<template>
  <!-- type checking and auto-completion enabled -->
  {{ count.toFixed(2) }}
</template>

2.3 TypeScript trong Mẫu

Thẻ “<template>” cũng hỗ trợ TypeScript trong liên kết biểu thức khi sử dụng “<script lang=”ts”>” hoặc “<script setup lang=”ts”>”. Điều này hữu ích trong những trường hợp bạn cần thực hiện ép kiểu trong các mẫu biểu thức.

Dưới đây là một ví dụ:

<script setup lang="ts">
let x: string | number = 1
</script>
<template>
  <!-- error because x could be a string -->
  {{ x.toFixed(2) }}
</template>

Điều này có thể được vượt qua bằng một phép ép kiểu trực tuyến:

<script setup lang="ts">
let x: string | number = 1
</script>
<template>
  {{ (x as number).toFixed(2) }}
</template>

Gợi ý Nếu sử dụng Vue CLI hoặc một thiết lập dựa trên webpack, TypeScript trong các biểu thức mẫu yêu cầu vue-loader@^16.8.0.

2.3 Sử dụng với TSX

Vue cũng hỗ trợ viết các thành phần với JSX / TSX. Chi tiết được thảo luận trong hướng dẫn Hàm Render & JSX.

3. Các Component Chung

Các component chung được hỗ trợ trong hai trường hợp:

• In SFCs: <script setup> với thuộc tính generic
• Các thành phần hàm render / JSX: đăng ký hàm của defineComponent()

Hy vọng rằng bài viết về Sử dụng Vue với TypeScript đã cung cấp cho bạn cái nhìn sâu sắc hơn về cách tích hợp hai công nghệ này để phát triển ứng dụng web hiệu quả. Tại Cafedev,chúng tôi luôn khuyến khích việc áp dụng những kiến thức mới vào dự án của bạn và chia sẻ kinh nghiệm của mình với cộng đồng. Hãy tiếp tục đọc các bài viết mới và theo dõi những cập nhật công nghệ mới nhất trên Cafedev để không bỏ lỡ bất kỳ điều gì quan trọng!

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

• Group Facebook
• Fanpage
• Youtube
• Instagram
• Twitter
• Linkedin
• Pinterest
• Reddit
• Tumblr
• Trang chủ

Chào thân ái và quyết thắng!