כיצד להשתמש ב-TypeScript עם פרויקט Node.js שלך

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

אין זמן טוב יותר להתחיל להשתמש ב-TypeScript בפרויקט Node.js שלך מאשר עכשיו. אבל איך אתה יכול להגדיר את זה עבור פרויקט Node.js שלך? תגלו זאת במאמר זה.

מה זה TypeScript?

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

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

זה תומך גם בתכנות פונקציונלי וגם בתכנות מונחה עצמים. כל התכונות הללו הופכות אותה לניתנת להרחבה ומתאימה לפיתוח אפליקציות מורכבות.

כיצד להגדיר TypeScript ב-Node. JS

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

עם זאת, ודא שאתה התקן את חבילת npm Node.js לפני שנמשיך.

אתחול קובץ package.json

פתח את המסוף שלך וצור תיקיית פרויקט. לאחר מכן, היכנס לספרייה החדשה הזו ואתחל פרויקט Node.js:

npm init

הפקודה לעיל יוצרת א package.json קובץ לאחסון התלות שלך.

התקן את TypeScript ותלויות אחרות

לאחר מכן, המשך והתקן את TypeScript בפרויקט Node.js שלך:

npm i-D כתב כתיבה

ה -ד מילת מפתח מבטיחה ש-TypeScript יותקן כחלק מה- devDependencies ב package.json.

תצטרך גם להתקין @types/express, הגדרת TypeScript עבור Express.js:

npm התקנת -D @טיפוסים/express

לאחר מכן, אתחול א tsconfig.json קוֹבֶץ. זה מפרט את אפשרויות המהדר הבסיסיות עבור הפרויקט שלך:

npx tsc --init

הפקודה לעיל יוצרת א tsconfig.json קובץ בתיקיית השורש של הפרויקט שלך.

כמו כן, התקן את Express.js. אתה יכול לדלג על זה אם אתה מתכוון לנהל שרתים רק עם פרימיטיביות ה-HTTP המובנים של Node.js. אבל Express.js מקל על זה:

npm להתקין אֶקְסְפּרֶס

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

npm להתקין -g צומת

הגדר את TypeScript עם Node. JS

פתח את ה tsconfig.json קובץ שאתחלת קודם לכן באמצעות שלך עורך הקוד שנבחר. יכול להיות שיש הרבה בקובץ הזה. למרות שאתה עשוי להגדיר את הקובץ הזה בצורתו הנוכחית, אתה יכול להחליף את כל התוכן שלו בקובץ למטה כדי להפוך אותו לפשוט יותר.

הנה כל מה שאתה צריך ב tsconfig.json לצאת לדרך:

{
"מהדר אפשרויות": {
"מודול": "commonjs",
"esModuleInterop": נכון,
"יַעַד": "es6",
"מודול רזולוציה": "צוֹמֶת",
"sourceMap": נכון,
"outDir": "dist" //מציין את ספריית ה-transpiler. 
 },
"lib": ["es2015"]
}

עכשיו פתוח package.json. כך זה נראה כעת לאחר התקנת TypeScript ו-Express:

לאחר מכן, הוסף את התצורות הבאות ל- תסריטים מַעֲרָך:

"תסריטים": {
"מִבְחָן": "הד \"שגיאה: לא צוינה בדיקה\"&& יציאה 1",
"לִבנוֹת": "npx tsc",
"הַתחָלָה": "node ./dist/app.js",
"dist": "tsc -p .",
 "dev": "nodemon ./src/app.ts", //החלף זֶה עם הנכון מַדרִיךנָתִיבל app.ts ב שֶׁלְךָ מקרה
"סוּג": "מודול"
}

התצורה שלעיל מצביעה על השרת שלך להתחיל בו app.js, המשדר. אל דאגה, זהו קובץ ברירת מחדל שייווצר אוטומטית ב-a dist תיקייה כאשר אתה מפעיל את לִבנוֹת תַסרִיט. אתה תעשה זאת בהמשך הדרך.

לאחר מכן, התצורה מציינת את סקריפט הפיתוח הראשי בתור app.ts.

מכאן שכאשר אתה מתחיל את סביבת הפיתוח, צומת פועל app.ts. לאחר מכן, Node.js מרכיב את זה לתוך JavaScript בפנים app.js—שמתקשר עם שרת ה-HTTP.

לאחר מכן, צור א src תיקיה בספריית השורש של הפרויקט שלך. בתוך תיקיה זו, צור קובץ TypeScript ריק ותן לו שם app.ts.

צור את ה-Transpiler Directory

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

אז בעוד ש-TypeScript מטפל במבנה הקוד, קובץ ה-transpiler מרכיב אותו ל-JavaScript.

כעת הפעל את לִבנוֹת סקריפט ליצירת ה dist ספריית טרנספילר באופן אוטומטי:

npm הרץ לבנות

הפקודה לעיל מרכיבה את קוד TypeScript שלך ל-JavaScript. התיקיה שנוצרה מכילה שני קבצים; app.js ו app.js.map.

לִפְתוֹחַ package.json שוב. תראה מפתח במערך בשם רָאשִׁי. אתה יכול לראות שהערך שלו מצביע על index.js. החלף את זה ב- app.js (טרנספילר) ספריית קבצים:

"רָאשִׁי": "./dist/app.js",

לאחר העיצוב, package.json אמור להיראות כך:

זה הכל לחלק התצורות.

צור והפעל בקשת HTTP

כעת נסה ליצור ולהריץ בקשת HTTP דרך שרת Express.js כדי לראות אם הקוד שלך מתקדם כמו שצריך.

בְּתוֹך app.ts:

יְבוּא express, {בקשה, תגובה} מ 'אֶקְסְפּרֶס'
const app = express()
app.get('/', אסינכרון (req: Request, res: Response)=>{
 console.log('שלום עולם')
 res.send('שלום עולם')
})
const יציאה = 8080
app.listen (יציאה, (): בָּטֵל=>{
לְנַחֵם.עֵץ(`האפליקציה מקשיבה ל http://localhost:${port}`)
})

לאחר מכן, פתח את שורת הפקודה לספריית השורש של הפרויקט שלך והפעל את dev סקריפט כדי להתחיל את הפרויקט שלך:

npm run dev

פתח את הדפדפן שלך ועבור אל מארח מקומי: 8080, ותראה את התגובה (שלום עולם). תראה זאת גם בטרמינל אם החלת את ה console.log פקודה כפי שעשינו בדוגמה לעיל.

ל-TypeScript יש סיכויי ביקוש גבוהים

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

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

מבוא ל-Angular

קרא הבא

על הסופר