آموزش TypeScript در محیط Visual Studio Code - قسمت اول
ورود به سایت Node.js و دانلود و نصب آخرین نسخه آن و معرفی سایت NPM.
ورود به سایت Visual Studio Code و دانلود و نصب آخرین نسخه آن.
ورود به سایت Type Script Land.
ویندوز را Restart می‌کنیم.
وارد محیط Command Prompt شده و دستورات ذیل را می‌نویسیم:
?>node --version
?>npm --version
?>code --version
?>npm install -g typescript
--> C:\Users\Dariush_Tasdighi\AppData\Roaming\npm
?>tsc --version
از طریق Command Prompt یک پوشه خالی ایجاد کرده، وارد آن شده و دستور ذیل را وارد می‌کنیم:
Some New Folder>code .
از آنجایی که می‌خواهیم پروژه ما در حالت Explicit Project بوده (سعی می‌کنیم که از حالت File Scope اجتناب کنیم) در ریشه پروژه فایلی به نام tsconfig.json ایجاد کرده و در داخل آن دستورات ذیل را می‌نویسیم:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}
Transpiling TypeScript into JavaScript
حال یک فایل به نام HelloWorld.ts با سورس کد ذیل در ریشه پروژه ایجاد می‌کنیم:
class Startup {
public static main(): number {
console.log('Hello World');
return 0;
}
}
Startup.main();
حال در داخل محیط Visual Studio Code یا از دکمه F1 و یا از دکمه‌های ترکیبی CTRL + Shift + P استفاده می‌کنیم تا ناحیه Command Palette ظاهر شود. در داخل این ناحیه Configure Task Runner را تایپ کرده و سپس Enter را می‌زنیم. در پنجره ظاهر شده گزینه TypeScript - tsconfig.json را انتخاب کرده تا فایلی به نام tasks.json در پوشه‌ای به نام vscode. ایجاد گردد:
{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
از این پس، هرگاه از دکمه‌های ترکیبی CTRL + Shift + B استفاده نماییم، این Task اجرا شده و اجرای آن باعث می‌گردد که تمامی فایل‌های ts به فایل‌های js اصطلاحا Transpiling گردد.
در صورتی که فایل ts دارای خطایی نباشد، دو فایل با پسوند js و map ایجاد شده و ما می‌توانیم به سادگی و از طریق محیط Command Prompt فایل js ایجاد شده را در محیط Node.js اجرا نماییم:
Some New Folder>node HelloWorld.js
دقت کنید که حتی نیازی نیست که وارد محیط Command Prompt شوید! شما میتوانید از طریق پنجره Terminal نیز اقدام به نوشتن دستور فوق نمایید.
نکته جالب: در صورتی که در داخل فایل tsconfig.json از دستور watch با پارامتر true استفاده نمایید، پس از اجرای Task با استفاده از میامبر CTRL + Shift + B، نه تنها همان لحظه تمامی فایل‌های ts به فایل‌های js و map اصطلاحا Transpiling می‌شوند، بلکه این Task از کار نیافتاده و روی فایل‌های ts شما Observe می‌کند! بدین معنی که هرگاه فایل ts ای را از این به بعد تغییر داده و ذخیره نمایید، همان لحظه عملیات Transpiling اتفاق می‌افتد.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"watch": true
}
}
