Bí Quyết Kiểm Tra Kiểu Tĩnh Cho Slots Trong Component Vue (TSX) – Đảm Bảo Code Luôn Chuẩn Không Cần Chỉnh!

Lê Lân

22/07/2025

Hướng Dẫn Viết Component Vue Với TypeScript và JSX: Tối Ưu Kiểm Tra Kiểu Tĩnh và Quản Lý Slot

Mở Đầu

Việc sử dụng TypeScript kết hợp với JSX trong phát triển Vue không chỉ giúp tăng cường khả năng kiểm tra loại tĩnh mà còn nâng cao độ linh hoạt trong xây dựng giao diện.

Trong môi trường hiện đại, các ứng dụng web đòi hỏi sự chuẩn xác về kiểu dữ liệu và khả năng tái sử dụng component cao. Vue 3 với sự hỗ trợ mạnh mẽ cho TypeScript và JSX đã trở thành lựa chọn hàng đầu cho các dự án lớn. Bài viết này sẽ cung cấp cái nhìn sâu sắc và hướng dẫn chi tiết về cách viết component Vue với TypeScript + JSX, đồng thời xử lý các thách thức liên quan đến slot và kiểm tra kiểu tĩnh.

1. Viết Component Vue Với JSX

JSX trong Vue

Ngoài template, Vue hỗ trợ viết component bằng JSX — một cú pháp tiện lợi do Facebook phát triển cho React nhưng cũng thích hợp với Vue nhờ sự tương thích hàm createElement .

Vue 2 và Vue 3 So Sánh

Vue 2: Việc viết render function khá phức tạp, JSX được khuyến khích dùng trong các trường hợp phức tạp.

Vue 3: Giới thiệu Composition API và setup function, cho phép sử dụng JSX trực tiếp trong setup , gắn kết trạng thái, logic và cấu trúc component.

Ví dụ đơn giản:

// Vue 2
Vue.component('Hello', { 
  render(h) { 
    return h('h' + this.level, this.title) 
  }, 
  props: { level: Number, title: String } 
})

// Vue 3
import { h } from 'vue'
export default {
  props: { level: Number, title: String },
  setup(props) {
    return () => h(`h${props.level}`, props.title)
  }
}

Sử dụng JSX trong setup giúp component rõ ràng và dễ quản lý hơn so với render function truyền thống.

2. Tích Hợp Kiểm Tra Kiểu Tĩnh Với TypeScript

Hạn Chế Vue 2 với TypeScript

Vue 2 chỉ hỗ trợ TypeScript thủ công, không có kiểm tra kiểu tĩnh cho props khiến lỗi dễ xảy ra.

Cải Tiến Trong Vue 3

Vue 3 triển khai PropType giúp định nghĩa kiểu rõ ràng, nhận dạng lỗi ngay khi phát triển.

Định nghĩa Props an toàn kiểu:

import { defineComponent, PropType, h } from 'vue';

export const HelloProps = {
  level: { type: Number as PropType<1 | 2 | 3 | 4 | 5>, required: true },
  title: { type: String as PropType<string>, required: true }
} as const;

export default defineComponent({
  name: 'Hello',
  props: HelloProps,
  setup(props) {
    return () => h(`h${props.level}`, props.title);
  }
});

Kiểm Tra Kiểu Cho Slots

Với <script setup> , dùng defineSlots :

<script setup lang="ts">
const slots = defineSlots<{ default(props: { msg: string }): any }>();
</script>

Với component thường, dùng SlotsType :

defineComponent({
  slots: Object as SlotsType<{
    default: () => JSX.Element;
    footer: () => JSX.Element;
  }>
});

3. Vấn Đề Kiểu Slot Trong TSX

Thực Tiễn Hiện Tại

Mặc dù Vue 3 hỗ trợ kiểm tra kiểu slot nội bộ, TSX component lại không được TypeScript kiểm tra kiểu slot bên ngoài khi sử dụng.

Mặc định, Vue JSX runtime không ánh xạ slots thành props tương ứng nên môi trường TypeScript không thể kiểm tra slot bên ngoài.

4. So Sánh Slots và Children Trong JSX

Cách React và Vue Xử Lý

React: children là thuộc tính của props.

Vue: quản lý slots khác biệt, JSX runtime không hỗ trợ thuộc tính children trong props.

Tác Động

Điều này khiến slots trong Vue TSX không thể được kiểm tra kiểu tĩnh đầy đủ.

5. Các Giải Pháp Khắc Phục

i. Định Nghĩa `children` Trong Props

Bạn có thể khai báo thủ công children trong props để kiểm tra slot:

interface BSlots {
  default?: () => JSX.Element;
  footer?: () => JSX.Element;
}

export const BProps = {
  children: { type: Object as PropType<BSlots> }
};

defineComponent({
  name: 'B',
  props: BProps,
  slots: Object as SlotsType<BSlots>,
  setup(props, { slots }) {
    return () => <>{slots.default?.()}</>;
  }
});

Nhược điểm: Dẫn đến props có thuộc tính children không chuẩn, gây nhầm lẫn và khó bảo trì.

ii. Chỉnh Sửa Vue JSX Runtime

Can thiệp vào định nghĩa types của Vue để thêm children gán với slots, giúp kiểm tra kiểu tĩnh:

export function defineComponent<
  // Các kiểu generic...
  InferredProps = { children?: UnwrapSlotsType<Slots> } & /* phần còn lại */
>() { /*...*/ }

Đồng thời chỉnh sửa Fragment để thêm kiểu children :

export declare const Fragment: {
  new (): {
    $props: VNodeProps & { children?: VNodeChild };
  };
};

Phương án này giúp cải thiện kiểm tra kiểu nhưng không chính thức, phức tạp, và chỉ phù hợp với dự án cam kết sâu với TSX.

Kết Luận

Việc viết Vue component sử dụng TypeScript và JSX giúp mã nguồn trở nên chuẩn xác và có khả năng bảo trì cao hơn, đặc biệt với Vue 3 và Composition API. Tuy nhiên, thách thức lớn nhất đến từ việc kiểm tra kiểu cho slots dưới dạng TSX vẫn chưa được hỗ trợ hoàn hảo. Các giải pháp hiện tại có thể áp dụng tùy vào quy mô và tính chất dự án:

Khai báo children trong props để kiểm tra slot tĩnh

Can thiệp sâu vào runtime JSX của Vue cho tỷ lệ chính xác cao hơn

Lời khuyên: Với các dự án lớn, nên cân nhắc kỹ trước khi chỉnh sửa runtime, đồng thời sử dụng tận dụng các tính năng TypeScript trong Vue 3 để có trải nghiệm phát triển tốt nhất.

Tham Khảo

Original article trên dev.to

Vue 3 JSX Guide

Vue 3 Script Setup API

React Children Prop

TypeScript JSX Runtime Types