نحوه استفاده از TypeScript در توسعه برنامه‌های Vue.js در Visual Studio

علی بهرامی‌نژاد - - زمان تقریبی مطالعه: 2 دقیقه

Vuejs

اخیراً به چهارچوب جاوااسکریپتی Vue.js علاقه‌مند شدم. باتوجه به اینکه Vue.js به صورت رسمی از TypeScript پشتیبانی می‌کند مطابق راهنمای موجود در سایت Vue.js سعی کردم که فایل‌های Declaration مربوط به Vue.js را به عنوان Reference به فایل‌های TypeScript پروژه اضافه کنم اما کامپایلر TypeScript آن‌ها را نشناخت و چندین خطای مختلف رخ داد. در این نوشتار راهنمای استفاده از declaration فایل‌های Vue.js در Visual Studio شرح داده شده است. به لطف این فایل‌ها می‌توان در کد نویسی Vue.js از امکان intellisense ویژوال استودیو بهره برد تا با راحتی هرچه بیشتر به توسعه برنامه پرداخت ...

پیش‌نیازهای نرم افزاری

لازم است از قبل NodeJS برروی client شما نصب شده باشد.

نخست نصب TypeScript

پس از نصب NodeJS کافیست Command Prompt را باز کنید و TypeScript را از طریق NPM نصب کنید:

npm install typescript -g

مرحله دوم: ساخته بسته NPM برای پروژه

لازم است ابتدا به پوشه‌ای که فایل‌های TypeScript شما قرار گرفته است رفته و دستور npm init را وارد کنید تا فایل package.json مربوط به npm برای پروژه شما ایجاد شود، مقادیر ورودی را طبق نیاز وارد کنید یا همگی را enter بزنید تا به شکل پیش‌فرض پر شوند. با اینکار فایل package.json در کنار پروژه شما ایجاد میشود.

نمونه اجرا شده دستور بالا:

D:\hello-vue>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (hello-vue)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\hello-vue\package.json:

{
  "name": "hello-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes

مرحله سوم: دریافت بسته‌های مربوط به Vue.js

سپس بسته‌های مربوط به Vue.js و declation فایل‌های آن‌را دریافت کنید.

npm install --save vue

پس از اجرای دستورات بالا، خواهید دید که در پوشه App پوشه Node_Modules ایجاد شده است، این پوشه مربوط به بسته‌های NodeJS می‌باشد.

نمونه مثال اجرا شده از دستورات بالا:

D:\hello-vue>npm install --save vue
hello-vue@1.0.0 D:\hello-vue
`-- vue@2.4.2

npm WARN hello-vue@1.0.0 No description
npm WARN hello-vue@1.0.0 No repository field.

مرحله چهارم: ساخت فایل tsconfig.json

با زدن دستور tsc --init فایل tsconfig.json که مربوط به تنظیمات کامپایلر TypeScript است در پروژه شما ایجاد می‌شود. مطابق راهنمای Vue.js تغییرات را در فایل tsconfig.json ایجاد میکنیم:

نحوه اجرا دستور:

D:\hello-vue>tsc --init
message TS6071: Successfully created a tsconfig.json file.

فایل را مطابق زیر تغییر می‌دهیم:

// tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

مرحله آخر: لذت intellisense در نوشتن Vue.js

Vuejs

دیدگاه‌ها