Verwenden von TypeScript in JavaScript ohne Schreiben von TypeScript

Arbeitsumgebung einrichten

▍ Option Nummer 1. VS-Codeeinstellungen (globale Validierung)

"javascript.implicitProjectConfig.checkJs": true

▍Option Nummer 2. Verwenden der Datei jsconfig.json (globale Validierung)

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

▍ Option Nummer 3. Aktivieren Sie die Validierung für einzelne Dateien

// @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; //  

Code-Eingabe mit JSDoc

▍Typisierung von Funktionen

/**
 * @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;
  }

▍Typisierung von regulärem Code

▍Typisierung von Bibliotheken

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

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

Wechseln zu TypeScript

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

Zusammenfassung