בחינת רכיבי המהדר של TypeScript

המהדר של TypeScript, המכונה לעתים קרובות tsc, הוא אחד ממרכיבי הליבה של המערכת האקולוגית של TypeScript. זה הופך את קוד TypeScript ל-JavaScript תוך אכיפת כללי הקלדה סטטיים. במאמר זה, נצלול לתוך העבודה הפנימית של מהדר TypeScript כדי להבין טוב יותר כיצד הוא מעבד והופך את קוד TypeScript.

1. תהליך הידור TypeScript

מהדר TypeScript עוקב אחר סדרה של שלבים כדי להפוך את TypeScript ל-JavaScript. הנה סקירה ברמה גבוהה של התהליך:

1. ניתוח קבצי המקור לתוך עץ תחביר מופשט (AST).
2. כריכה ובדיקת סוגים של ה-AST.
3. פליטת קוד JavaScript והצהרות הפלט.

הבה נחקור את השלבים הללו ביתר פירוט.

2. ניתוח קוד TypeScript

השלב הראשון בתהליך ההידור הוא ניתוח קוד TypeScript. המהדר לוקח את קבצי המקור, מנתח אותם ל-AST ומבצע ניתוח מילוני.

הנה תצוגה פשוטה של ​​איך אתה יכול לגשת ולתפעל את ה-AST באמצעות ה-API הפנימי של TypeScript:

import * as ts from 'typescript';

const sourceCode = 'let x: number = 10;';
const sourceFile = ts.createSourceFile('example.ts', sourceCode, ts.ScriptTarget.Latest);

console.log(sourceFile);

הפונקציה createSourceFile משמשת להמרת קוד TypeScript גולמי ל-AST. האובייקט sourceFile מכיל את המבנה המנתח של הקוד.

3. כריכה ובדיקת סוגים

לאחר הניתוח, השלב הבא הוא לאגד את הסמלים ב-AST ולבצע בדיקת סוגים. שלב זה מבטיח שכל המזהים מקושרים להצהרות שלהם ובודק אם הקוד עומד בכללי הסוג של TypeScript.

בדיקת סוגים מתבצעת באמצעות המחלקה TypeChecker. להלן דוגמה כיצד ליצור תוכנית ולאחזר מידע סוג:

const program = ts.createProgram(['example.ts'], {});
const checker = program.getTypeChecker();

// Get type information for a specific node in the AST
sourceFile.forEachChild(node => {
    if (ts.isVariableStatement(node)) {
        const type = checker.getTypeAtLocation(node.declarationList.declarations[0]);
        console.log(checker.typeToString(type));
    }
});

בדוגמה זו, TypeChecker בודק את סוג הצהרת משתנה ומחזיר מידע על סוג מה-AST.

4. פליטת קוד

לאחר השלמת בדיקת הסוג, המהדר ממשיך לשלב הפליטה. זה המקום שבו קוד TypeScript הופך ל-JavaScript. הפלט יכול לכלול גם קובצי הצהרה ומפות מקור, בהתאם לתצורה.

הנה דוגמה פשוטה כיצד להשתמש במהדר כדי לפלוט קוד JavaScript:

const { emitSkipped, diagnostics } = program.emit();

if (emitSkipped) {
    console.error('Emission failed:');
    diagnostics.forEach(diagnostic => {
        const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
        console.error(message);
    });
} else {
    console.log('Emission successful.');
}

הפונקציה program.emit מייצרת את הפלט של JavaScript. אם יש שגיאות במהלך הפליטה, הן נלכדות ומוצגות.

5. הודעות אבחון

אחת מהאחריות המרכזיות של מהדר TypeScript היא לספק הודעות אבחון משמעותיות למפתח. הודעות אלו נוצרות הן בשלבי בדיקת הסוג והן בשלבי פליטת הקוד. האבחון יכול לכלול אזהרות ושגיאות, לעזור למפתחים לזהות ולפתור בעיות במהירות.

כך ניתן לאחזר ולהציג אבחון מהמהדר:

const diagnostics = ts.getPreEmitDiagnostics(program);

diagnostics.forEach(diagnostic => {
    const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
    console.log(`Error ${diagnostic.code}: ${message}`);
});

בדוגמה זו, האבחון מוחלץ מהתוכנית ומודפס למסוף.

6. שינוי TypeScript עם ממשקי API של מהדר

ה-API מהדר TypeScript מאפשר למפתחים ליצור טרנספורמציות מותאמות אישית. אתה יכול לשנות את ה-AST לפני פליטת הקוד, ולאפשר התאמות אישיות חזקות וכלים להפקת קוד.

הנה דוגמה לטרנספורמציה פשוטה שמשנה את שמות כל המשתנים ל-newVar:

const transformer = (context: ts.TransformationContext) => {
    return (rootNode: T) => {
        function visit(node: ts.Node): ts.Node {
            if (ts.isVariableDeclaration(node)) {
                return ts.factory.updateVariableDeclaration(
                    node,
                    ts.factory.createIdentifier('newVar'),
                    node.type,
                    node.initializer
                );
            }
            return ts.visitEachChild(node, visit, context);
        }
        return ts.visitNode(rootNode, visit);
    };
};

const result = ts.transform(sourceFile, [transformer]);
console.log(result.transformed[0]);

טרנספורמציה זו מבקרת בכל צומת ב-AST ומשנה שמות של משתנים לפי הצורך.

מַסְקָנָה

חקר הפנימיות של המהדר של TypeScript מספקת הבנה מעמיקה יותר של אופן עיבוד ושינוי קוד TypeScript. בין אם אתה מחפש לבנות כלים מותאמים אישית או לשפר את הידע שלך על אופן הפעולה של TypeScript, חפירה בחלק הפנימי של המהדר יכולה להיות חוויה מאירת עיניים.