Gợi ý loại JavaScript

Psssst. BOOTCAMP PHÁT TRIỂN WEB 2023 sẽ bắt đầu vào ngày 01 THÁNG 2 NĂM 2023. Tham gia danh sách chờ, giữ chỗ trong khóa học thuần tập kéo dài 10 tuần của tôi và tìm hiểu các nguyên tắc cơ bản, HTML, CSS, JS, Tailwind, React, Next. jsvà hơn thế nữa. ✨

Nếu bạn chưa từng sống dưới một tảng đá, bạn sẽ biết điều gì đó về TypeScript. Đó là một ngôn ngữ mới do Microsoft giới thiệu và về cơ bản nó là JavaScript với các loại (và biên dịch thành 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 hướng dẫn của mình bằng TypeScript vì nhiều lý do

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

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ì vậy?

Những người hâm mộ TypeScript vẫn có thể sử dụng các hướng dẫn về JavaScript, vì JavaScript có thể rất phù hợp 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 tuân theo các nguyên tắc cơ bản của Nền tảng web hơn là 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 được hưởng lợi từ việc có các loại trong JavaScript. Họ rất hữu ích

Nhờ video này của Paul Lewis tuyệt vời, tôi thấy rằng chúng ta thực sự có thể có các loại trong JavaScript, sử dụng Mã VS

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

npm install -g typescript

Sau đó, bạn thêm tệp

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

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

{
  "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, ví dụ, bạn nên loại trừ

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

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

Bây giờ, Mã VS 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ố hàm bằng cách sử dụng giá trị mặc định

Giả sử chúng ta có chức năng này, trong đó

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

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 với

multiply(20)

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

multiply(20, 10)

Nhưng nếu bạn vượt qua, chẳng hạn, một chuỗi làm tham số thứ hai như

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

Đối số của loại '"hey"' không thể gán cho tham số của loại 'số'

Đáng kinh ngạc

Chúng ta 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ụng JSDoc, thường được sử dụng làm trình tạo API và thêm gợi ý loại

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

⚠️ Đừng quên double

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

Bây giờ nếu bạn cố gọi

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

Đối số kiểu '"ho. ”’ không thể gán cho tham số kiểu ‘số’

Ngoài

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

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

  6

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

  7

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

  8

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

  9

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

  0

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

  1

Thí dụ

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

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

JavaScript có gợi ý loại không?

@type trong JS là gì?

Làm cách nào để chú thích JavaScript?

Có bao nhiêu loại TypeScript?