Cách kiểm tra các loại trong JavaScript mà không cần sử dụng TypeScript

Tìm hiểu cách thêm các loại vào JavaScript mà không cần sử dụng TypeScript

Nếu bạn chưa từng sống dưới một tảng đá, bạn biết điều gì đó vềTypeScript. Đó là một ngôn ngữ mới được Microsoft giới thiệu và về cơ bản nó là JavaScript với các loại (và biên dịch sang JavaScript để chạy trong trình duyệt).

Bây giờ, tôi đã sử dụng nó trong một số dự án thử nghiệm nhưng tôi có xu hướng tránh viết các hướng dẫn của mình trong TypeScript vì nhiều lý do khác nhau.

Đầu tiên là tôi chủ yếu viết các hướng dẫn dành cho người mới bắt đầu và TypeScript thường không phải là thứ mà mọi người thường bắt đầu.

Ngoài ra, tôi nghĩ rằng nếu tôi bắt đầu viết mọi thứ bằng TypeScript, tôi sẽ gây nhầm lẫn - tôi đang nói về cái gì?

Người hâm mộ TypeScript vẫn có thể sử dụng các hướng dẫn JavaScript, vì JavaScript có thể phù hợp rất tốt với các tệp TypeScript của họ, trong khi điều ngược lại là không đúng.

Vì vậy, tôi gắn bó với các nguyên tắc cơ bản của Nền tảng web hơn là dựa trên các công nghệ xây dựng trên nền tảng đó.

Mà nói…

Có những lúc tôi muốn được hưởng lợi từ việc nhập các loại JavaScript. Chúng rất hữu ích.

Nhờ vàoVideo nàybởi Paul Lewis tuyệt vời, tôi thấy rằngchúng ta thực sự có thể có các loại trong JavaScript, sử dụngMã Visual Studio!

Trước tiên, bạn cần cài đặt TypeScript, nếu bạn chưa:

npm install -g typescript

Sau đó, bạn thêm mộttsconfig.jsontập tin vào thư mục gốc của dự án của bạn. Giả sử bạn có các tệp JavaScript trongsrcthư mục, đây là số lượng cấu hình tối thiểu bạn cần trong tệp đó:

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ]
}

Bạn có thể quyết định loại trừ các thư mục, chẳng hạn như bạn nên loại trừnode_modules:

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
  ]
}

Bây giờ, VS Code có thể chỉ ra lỗi loại trong mã JavaScript của chúng tôi.

Và nó có thể làm điều đó một cách tự động mà chúng ta không cần phải làm gì cả.

Đặc biệt, nó có thể suy ra các loại tham số chức năng bằng cách sử dụng giá trị mặc định.

Giả sử chúng tôi có chức năng này, ở đâutimesđược gán giá trị mặc định là 2:

const multiply = (aNumber, times = 2) => {
  return aNumber * times
}

Bây giờ vì tham số thứ hai có giá trị mặc định, chúng ta có thể gọi hàm này bằng

multiply(20)

để nhân 20 với 2 hoặc như thế này để nhân với 10:

multiply(20, 10)

Nhưng nếu bạn chuyển, ví dụ: một chuỗi làm tham số thứ hai nhưmultiply(20, 'hey'), VS Code bây giờ sẽ cho bạn biết có một vấn đề:

Đối số kiểu '"hey"' không thể gán cho tham số kiểu 'number'

Tuyệt vời!

Chúng tôi cũng có thể thực hiện kiểu kiểm tra kiểu này đối với các đối số không có giá trị mặc định. Bạn có thể làm như vậy bằng cách sử dụngJSDoc, thường được sử dụng làm trình tạo API và thêm các gợi ý loại:

/**
 * @param {number} aNumber
 */
const multiply = (aNumber, times = 2) => {
  return aNumber * times
}

⚠️ Đừng quên đôi**trong đầu của bình luận, nếu không mọi thứ sẽ không hoạt động như mong đợi.

Bây giờ nếu bạn cố gắng gọimultiply('ho!')bạn cũng sẽ gặp lỗi:

Đối số kiểu '“ho!”' Không thể gán cho tham số kiểu 'number'

Khác vớinumber, bạn có thể đặt các loại sau:

  • null
  • undefined
  • boolean
  • string
  • Array
  • Object

Thí dụ:

/**
 * @param {null} aNull
 * @param {undefined} anUndefined
 * @param {boolean} aBoolean
 * @param {string} aString
 * @param {Array} anArray
 * @param {Object} anObject
 */
const multiply = (aNull, anUndefined, aBoolean, aString, anArray, anObject) => {
  console.log(aNull, anUndefined, aBoolean, aString, anArray, anObject)
}

Bây giờ, tất nhiên không phải thêm chú thích trong nhận xét và mã tự nó cho bạn biếtsự thậtsẽ tốt hơn. Nếu bạn có thể sống với cách làm này, thật tuyệt! Nếu không, có TypeScript.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: