Menggunakan TypeScript dalam JavaScript tanpa menulis TypeScript

Menyiapkan lingkungan kerja

▍ Opsi nomor 1. Pengaturan Kode VS (Validasi Global)

"javascript.implicitProjectConfig.checkJs": true

▍Pilihan nomor 2. Menggunakan File jsconfig.json (Validasi Global)

{
  "compilerOptions": {
    "checkJs": true
  }
}

▍ Opsi nomor 3. Aktifkan validasi untuk file individual

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

// @ts-nocheck
let easy = 'abc';
easy = 123; //  

let easy = 'abc';
// @ts-ignore
easy = 123; //  

Pengetikan kode menggunakan JSDoc

YpPengaturan fungsi

/**
 * @param {number} shippingVal
 */
updateShipping(shippingVal) {
    ...
}

/**
* @typedef {Object} CreditNoteTaxResponseViewModel
* @property {number} feeAmount
* @property {number} inclGst
* @property {number} subTotal
* @property {number} total
*
* @typedef {Object} ApiResponse
* @property {string} status
* @property {string} message
* @property {CreditNoteTaxResponseViewModel} response
*/

/**
                * @param {CreditNoteTaxRequestViewModel} req
                * @returns {Promise<ApiResponse>}
                */
                createCreditNoteTaxApiCall(req) {
        ...
                }

export interface ICreditNoteTaxRequestViewModel{
    orderID: number;
    shippingCredit: number;
    lines: IICreditNoteTaxLineViewModel[]
}

export interface ICreditNoteTaxLineViewModel{
    originalOrderLineID:number;
    creditQuantity: number;
}

export interface ICreditNoteTaxResponseViewModel{
    feeAmount: number;
    inclGst: number;
    subTotal: number;
    total: number;
}

export interface IApiResponse{
    status: string;
    status: message;
    response: ICreditNoteTaxResponseViewModel;
}

/**
   * @param {import("./main").ICreditNoteTaxRequestViewModel} req
   * @returns {Promise<import("./main").IApiResponse>}
   */
  function createCreditNoteTaxApiCall(req) {
    ///  
    return;
  }

YpPengaturan kode reguler

YpKarakterisasi perpustakaan

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

/**
 * @param {JQuery<HTMLElement>} $itemRow
 */
initRow($itemRow) {
    ...
}

Beralih ke TypeScript

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

Ringkasan