Sử dụng TypeScript với Vue Single File Components

Bạn có thể tự hỏi mình, “TypeScript là gì”? Đó là một trong những ngôn ngữ lập trình phát triển nhanh nhất! Đó là một bộ siêu JavaScript do Microsoft tạo ra và biến ngôn ngữ được gõ lỏng lẻo thành một ngôn ngữ được gõ đúng; về cơ bản, đó là ES6 với các khai báo kiểu tùy chọn. Nếu bạn không chắc nên bắt đầu từ đâu với TypeScript, tôi khuyên bạn nên đọc thêm về nó .

Như đã nói, chưa bao giờ là thời điểm tốt hơn để bắt đầu sử dụng TypeScript trong các dự án Vue.js của bạn. Evan Bạn đã nói rằng, cơ sở mã của Vue.js 3.0 sẽ được viết lại hoàn toàn bằng TypeScript. Điều này sẽ không ảnh hưởng đến các nhà phát triển ES6, nhưng nó sẽ cải thiện trải nghiệm TypeScript.

Tạo một dự án CLI

Với Vue CLI 3, bạn có thể tạo một dự án mới với TypeScript đã được cấu hình ; chỉ cần chọn “TypeScript” trong dấu nhắc CLI. Trong khi khởi động một dự án mới, bạn sẽ nhận thấy rằng bạn có thể chọn sử dụng “cú pháp thành phần kiểu lớp”. Nếu bạn chưa quen với TypeScript, tôi khuyên bạn không nên sử dụng cú pháp kiểu lớp. Trở lại vào tháng 2, Evan You đã từ bỏ hoàn toàn cú pháp kiểu lớp cho thư viện lõi Vue 3.0. Đó là một lựa chọn phổ biến, nhưng vì những lý do đó, ta sẽ xem xét cách sử dụng TypeScript với Vue.js mà không có nó.

# Generate Vue project in current directory $ vue create .

Chọn TypeScript tại CLI

Sử dụng các thành phần kiểu lớp hay không

Nếu bạn đã tạo một dự án Vue và muốn thêm hỗ trợ TypeScript vào nó; bạn có thể làm như vậy với những điều sau:

 $ vue add typescript

Cấu hình Trình biên dịch TypeScript

Vì TypeScript yêu cầu một bước xây dựng, bạn có thể cấu hình TypeScript theo nhu cầu của group hoặc dự án của bạn . Có rất nhiều tùy chọn mà bạn có thể bật hoặc tắt bằng cách sử dụng file tsconfig.json . Tệp này sẽ nằm trong folder root của dự án của bạn.

Hãy thử nghiệm các tùy chọn này để tìm ra tùy chọn nào hữu ích nhất cho bạn và dự án của bạn. Tôi khuyên bạn nên bật noImplicitAny , noImplicitThis , noImplicitReturns ở mức tối thiểu.

noImplicitAny : Tăng lỗi trên các biểu thức và khai báo với any kiểu ngụ ý any . Điều này sẽ tạo ra lỗi nếu một đối số, const , let hoặc var không có kiểu. Đây là cách kiểm tra tinh thần của chính bạn nhiều hơn để tạo các loại dữ liệu tùy chỉnh cho mã của bạn.
noImplicitThis : Tương tự như noImplicitAny nhưng sẽ gặp lỗi với từ khóa this . Một cuộc kiểm tra tinh thần khác để khuyến khích bạn gõ mọi thứ bạn có thể.
noImplicitReturns : Báo lỗi khi không phải tất cả các đường dẫn mã trong hàm đều trả về giá trị. Điều này giúp đảm bảo tất cả các điều kiện trong một hàm đã cho có kiểu trả về, đều trả về một giá trị.

tsconfig.json

{   "compilerOptions": {     "module": "ES6",     "noImplicitAny": true,     "noImplicitThis": true,     "noImplicitReturns": true,     "sourceMap": true   },   "paths": {     "@/*": [       "src/*"     ]   },   "include": [     "src/**/*.ts",     "src/**/*.vue"   ],   "files": [     "src/vue-shims.d.ts"   ],   "exclude": [     "node_modules"   ] }

Các loại dữ liệu cơ bản và tùy chỉnh

Trong TypeScript có 12 kiểu khác nhau ngoài hộp:

boolean
number
string
array
object
tuple
enum
any
void
undefined
null
never

Các kiểu phổ biến hơn mà bạn sẽ sử dụng là các kiểu nguyên thủy: string , number , boolean , null , undefined và void . Tuy nhiên, sẽ có lúc bạn cần tạo một kiểu dữ liệu tùy chỉnh. Trong thời gian đó, bạn có thể tạo thứ gì đó mà TypeScript gọi là Interface .

Trong folder root của bạn, tạo một folder và đặt tên cho nó types . Bên trong folder mới này, hãy tạo một file mới có tên là index.ts . Bạn có thể khai báo giao diện mới với từ khóa interface ; nó được coi là phương pháp hay nhất để tạo ra những CamelCase này.

type / index.ts

export interface User {  }

Từ đây, bạn có thể bắt đầu xác định các thuộc tính và kiểu giá trị mà đối tượng sẽ có.

type / index.ts

export interface User {   firstName: string,   lastName: string,   twitterHandle: string,   location: {     city: string,     state: string   } }

Trong ví dụ này, ta có một giao diện với một đối tượng bên trong nó ( location ). Ta có thể phá vỡ điều này hơn nữa bằng cách lồng các giao diện. Ta cũng có thể làm cho bất kỳ thuộc tính nào là tùy chọn bằng cách thêm dấu ? với nó. Điều này nghĩa là thuộc tính này có thể có hoặc không có giá trị.

type / index.ts

export interface User {   firstName: string,   lastName: string,   twitterHandle?: string,   location: Location }  export interface Location {   city: string,   state: string }

Bây giờ ta có thể sử dụng kiểu dữ liệu tùy chỉnh này trong các file Thành phần Vue Đơn file ( .vue ) hoặc TypeScript ( .ts ) nào.

Sử dụng các loại dữ liệu tùy chỉnh trong các thành phần Vue một file (SFC)

Bây giờ ta đã tạo interface của bạn, ta có thể import nó vào SFC của ta như các file ESM, JavaScript nào khác, v.v. Để sử dụng TypeScript trong thành phần của ta , bạn cần thêm thuộc tính lang vào thẻ script của thành phần của bạn. Giá trị của thuộc tính đó phải là ts .

Khi sử dụng TypeScript trong các thành phần Vue một file , thư viện Vue phải được nhập để bạn có thể mở rộng từ nó. Vì ta không sử dụng cú pháp kiểu lớp, bạn sử dụng từ khóa as để khai báo dữ liệu là một kiểu dữ liệu.

App.vue

<template>   <p>{{ user.firstName }}</p> </template>  <script lang="ts">   import Vue from 'vue'   import { User } from '@/types' // Our interface    export default Vue.extend({     name: 'Home' as string,     data() {       return {         user: {} as User // Declaring reactive data as type User       }     },     mounted() {       this.user = {         firstName: `Dave`,         lastName: `Berning`,         twitterHandle: `@daveberning`,         location: {           city: `Cincinnati`,           state: `OH`         }       }     }   }) </script>

Đối với những thứ như const , let , var hoặc kiểu trả về của hàm, bạn có thể xác định kiểu của nó bằng dấu hai chấm :

App.vue

<script lang="ts">   import Vue from 'vue'   import { User } from '@/types'    export default Vue.extend({     name: 'Home' as string,     data() {       return {         user: {} as User       }     },     computed: {       fullName(): string { // Computed Property returns a string         return `${this.user.firstName} ${this.user.lastName}`       }     },     mounted(): void { // The mounted hook returns nothing       ...     }   }) </script>

Tệp khai báo

Sau khi tạo dự án Vue của bạn từ dòng lệnh, bạn có thể nhận thấy file shims-vue.d.ts . Đó là file khai báo ( .d.ts ). Tệp khai báo là file không chứa bất kỳ mã thực thi nào, nhưng chứa các mô tả về mã tồn tại bên ngoài file dự án.

Những điều này rất hữu ích khi sử dụng module Node không chứa bất kỳ giao diện, kiểu hoặc file khai báo TypeScript nào. Theo một nghĩa nào đó, mục đích duy nhất của các file này là cho TypeScript biết cách xử lý mã bên ngoài.

miếng chêm.d.ts

declare module '*.vue' {   import Vue from 'vue'   export default Vue }

Vì vậy, trong trường hợp này, về cơ bản ta đang nói với trình biên dịch TypeScript (và IDE) cách xử lý các file .vue ; một file dành riêng cho khuôn khổ với HTML, CSS và TS.

Kết luận

TypeScript là JavaScript còn SASS là CSS; TypeScript là JavaScript. Với TypeScript, bạn có thể nghiêm khắc hoặc khoan dung tùy thích. Đó là một ngôn ngữ Mã nguồn mở tuyệt vời giúp giữ cho cơ sở mã của bạn nhất quán và có thể mở rộng khi dự án của bạn tiếp tục phát triển.

TypeScript cũng được tích hợp nhiều với các IDE và trình soạn thảo phổ biến khác nhau bao gồm: VS Code, WebStorm, Sublime, Vim, Atom, v.v. Với các trình soạn thảo này, TypeScript hoạt động ở chế độ nền, đằng sau mức thấp để cung cấp các manh mối, đề xuất và bản xem trước thời gian thực của các đối số hàm và kiểu trả về.

Nói chung, đó là một ngôn ngữ tiếp tục được tìm thấy trong nhiều công cụ, thư viện và khuôn khổ hơn mà các nhà phát triển sử dụng hàng ngày. Nó có một cộng đồng Mã nguồn mở mạnh mẽ và sự hậu thuẫn của Microsoft.

Tags:

Các tin liên quan