Now let’s take a look at what’s in store for TypeScript 4.0!
Variadic Tuple Types
Labeled Tuple Elements
Class Property Inference from Constructors
Short-Circuiting Assignment Operators
unknown on catch Clauses
Custom JSX Factories
Speed Improvements in build mode with --noEmitOnError
--incremental with --noEmit
Editor Improvements
/** @deprecated */ Support
Partial Editing Mode at Startup
Smarter Auto-Imports
Breaking Changes
تا پیش از نگارش 1.5 تایپ اسکریپت، مفاهیم internal modules و external modules وجود داشتند. جهت نامگذاری بهتر و کاهش سردرگمی در استفادهی آنها، از نگارش 1.5 به بعد، ماژولهای داخلی به namespaces (فضاهای نام) تغییر نام یافتند و ماژولهای خارجی به نام «ماژول» خلاصه شدند.
همچنین از نگارش 1.5 به بعد، پشتیبانی کاملی از نحوهی تعریف «ماژولها در ES 6» نیز به عمل میآید. بنابراین مطالعهی آن نیز پیشنهاد میگردد.
مفهوم ماژولها
هدف اصلی از ماژولها، ارائهی روشی برای مدیریت و ساماندهی پروژههای بزرگ با تعداد فایلهای زیاد است. در اینجا فایلهای ارجاعی، در زمان اجرا، توسط runtime جاوا اسکریپت بارگذاری شده و سپس به امکانات آنها دسترسی خواهیم داشت. ماژولها به صورت توکار در Node.JS نیز پشتیبانی میشوند؛ البته با فرمت common.js که کامپایلر TypeScript نیز قادر به تولید آن است.
امکان کامپایل به روشهای قدیمیتر تعریف ماژولها در TypeScript
در مورد انواع روشهای قدیمیتر نحوهی تعریف ماژولهای در جاوا اسکریپت مانند common.js، AMD و امثال آنها، مطالعهی مطلب «ماژولها در ES 6» توصیه میشود. فقط نکتهای که در اینجا حائز اهمیت است، این است که چون TypeScript قادر است به ES 5 نیز کامپایل شود و در ES 5 روش جدید ES 6 جهت تعریف ماژولها وجود ندارد، امکان تبدیل و ترجمهی کدهای TypeScript به تمام نوعهای معروف و شناخته شدهی ماژولها مانند common.js توسط کامپایلر TypeScript به صورت خودکار وجود دارد. برای این منظور از سوئیچ module کامپایلر استفاده میشود.
نحوهی تعریف ماژولها در TypeScript
برای تبدیل یک فایل ts به یک ماژول، تنها کافی است موردی را از آن export کنیم. آیتمهای موجود در یک ماژول، تنها زمانی در سایر فایلها قابل استفاده خواهند بود که از آن export شده باشند:
// periodicals.ts export interface Periodical { issueNumber: number; } export class Magazine implements Periodical { issueNumber: number; } export function GetMagazineByIssueNumber(issue: number): Magazine { // retrieve and return a magazine }
روش دیگر انجام این تعاریف، حذف واژهی کلیدی export از تمام موارد تعریف شده و سپس خلاصه کردن آنها در یک سطر، توسط روش export statement است؛ به نحو ذیل:
// periodicals.ts interface Periodical { issueNumber: number; } class Magazine implements Periodical { issueNumber: number; } function GetMagazineByTitle(title: string): Magazine { // retrieve and return a magazine } export { Periodical, Magazine, GetMagazineByTitle as GetMag}
همچنین در اینجا میتوان نام دیگری را نیز برای خروجیها درنظر گرفت. برای مثال بجای نام GetMagazineByTitle، با استفاده از as syntax، یک نام جدید معرفی شدهاست.
نحوهی استفادهی از ماژولها در TypeScript
برای استفادهی از امکانات خروجی مثال قبل، در یک ماژول دیگر، به نحو ذیل عمل میکنیم:
// news.ts import { Magazine, GetMag as GetMagazine} from './periodicals'; let newsMag: Magazine = GetMagazine('Weekly News');
در انتها نیز مسیر نسبی فایل ts ماژول، بدون ذکر پسوند آن، پس از واژهی کلیدی from ذکر میشود.
اگر نیاز است تمام خروجیهای یک ماژول به صورت خودکار import شوند، میتوان از * استفاده کرد:
// kids.ts import * as mag from './periodicals';
let kidMag: mag.Magazine= mag.GetMag('Games and Stuff!');
خروجی پیش فرض یک ماژول
اگر تنها قرار است یک آیتم از ماژولی export شود، میتوان از مفهوم default export استفاده کرد:
// movie.ts export default class{ title: string; director: string; }
// kids.ts import AnimatedMovie from './movie’; let cartoon = new AnimatedMovie();
Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered by Chrome Headless, and works by starting a headless Chrome instance in a new process. This enables a secure way to render web content inside VS Code, and enables interesting features such as in-editor debugging and more!
آغاز کار با git در ویژوال استدیو
In this episode, Robert is joined by Paul Litwin, who shows us how to get started with Git in under an hour. Git is a free, open source and quite popular distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Starting with the command line and ending up in both VS Code and Visual Studio, Paul takes us on a tour of the how you can use Git to manage your source code.
نحوه ساخت Pipe سفارشی
علاوه بر استفاده از Pipeهای از پیش ساخته شده Angular، شما میتوانید Pipeهای سفارشی خود را نیز تعریف و استفاده کنید. به عنوان مثال میخواهیم Pipe ای را با نام perNumber تعریف کنیم، تا تمامی اعداد موجود در عبارت ورودی Pipe را به صورت اعداد فارسی نمایش دهد. یعنی با اعمال این Pipe به عدد 123456 خروجی ۱۲۳۴۵۶ مورد انتظار است. برای ایجاد Pipe سفارشی مراحل زیر را انجام دهید.
قدم اول - ساخت یک فایل با نام دلخواه
طبق Style Guide در Angular.io نام این فایل را per-number.pipe.ts انتخاب میکنیم.
قدم دوم – افزودن ماژولهای مورد نیاز
داخل فایل ایجاد شده ماژولهای Pipe و PipeTransform را با استفاده از دستور import از angular/core@ اضافه میکنیم.
import { Pipe, PipeTransform } from '@angular/core';
قدم سوم – ساخت کلاس و مزین کردن آن به Pipe@
یک کلاس با نام دلخواه را مثلا به نام PerNumberPipe ایجاد میکنیم. این کلاس علاوه بر اینکه PipeTransform را پیاده سازی خواهد کرد، مزین به متادیتای Pipe@ نیز میباشد. متادیتای Pipe@ هنگام تزئین کلاس، یک نام را دریافت میکند. این نام قرار است به عنوان نام نهایی Pipe برای اعمال بر روی Template expressions مورد استفاده قرار بگیرد.
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'perNumber'}) export class PerNumberPipe implements PipeTransform { }
قدم چهارم – پیاده سازی متد transform
به واسطه اعمال اینترفیس PipeTransform، این کلاس باید متد transform را پیاده سازی کند. این متد در پارامتر اول خود، عبارت ورودی را که قرار است Pipe بر روی آن اعمال شود، دریافت میکند و در ادامه تعداد دلخواهی پارامتر ورودی Pipe را که میخواهد، میتواند دریافت کند.
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'perNumber'}) export class PerNumberPipe implements PipeTransform { transform(value: any, ...args: any[]): any { } }
نکته ۱: نام انتخابی برای Pipe در آذینگر Pipe@ بایستی یک شناسه معتبر در JavaScript باشد.
نکته ۲: متد transform برای Pipe اجباری است و حتما بایستی پیاده سازی شود. اینترفیس PipeTransform این متد را برای کلاس اجباری میکند؛ هرچند استفاده از این اینترفیس برای کلاس Pipe کاملا اختیاری است.
قدم آخر – نوشتن کد تبدیل اعداد
Pipe مورد نظر ما قرار است یک رشته عددی را از ورودی دریافت کند و تمامی اعداد لاتین آن را به فارسی تبدیل کند. همچنین این Pipe هیچگونه پارامتری را دریافت نمیکند. کد زیر نحوه پیاده سازی متد transform را نمایش میدهد.
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'perNumber'}) export class PerNumberPipe implements PipeTransform { transform(input: string): string{ if (input == undefined) return ''; var str = input.toString().trim(); if (str === "") return ""; str = str.replace(/0/g, '۰'); str = str.replace(/1/g, '۱'); str = str.replace(/2/g, '۲'); str = str.replace(/3/g, '۳'); str = str.replace(/4/g, '۴'); str = str.replace(/5/g, '۵'); str = str.replace(/6/g, '۶'); str = str.replace(/7/g, '۷'); str = str.replace(/8/g, '۸'); str = str.replace(/9/g, '۹'); return str; } }
نحوه معرفی Pipe سفارشی به برنامه
حالا جهت استفاده از Pipe سفارشی در کامپوننتهای خود کافی است آنرا یکبار در قسمت declarations در AppModule خود تعریف کنید.
import { PerNumberPipe } from './pipes/per-number.pipe.ts' ... declarations: [PerNumberPipe]
نحوه استفاده از Pipeهای سفارشی
نحوه استفاده از Pipeهای سفارشی، دقیقا مشابه Pipeهای از قبل ساخته شده Angular میباشد.
<h3>{{'12345679' | perNumber}}</h3>
یکسری از Pipeهای مربوط به زبان فارسی در گیتهاب بنده پیاده سازی شده است که نیازمند همکاری دوستان است. لطفا جهت همکاری برای ساخت یک ابزار جامع برای زبان فارسی در Angular به این لینک مراجعه کنید.
Pipeها و تشخیص تغییرات
Angular برای اعمال Pipe بر روی Template expressions بایستی تمامی رخدادهای برنامه را تحت نظر قرار داده و با مشاهده هر تغییری بر روی عبارت ورودی Pipe، فراخوانی Pipe را آغاز کند. از جمله این رخدادها میتوان به رخداد mouse move، timer tick، server response و فشرده شدن کلیدهای ماوس و یا کیبورد اشاره کرد. واضح است که بررسی تغییرات عبارت در این همه رخداد میتواند مخرب باشد و بر روی کارآئی (Performance) تاثیر منفی خواهد گذاشت. اما Angular برای حل این مشکل و همچنین هنگام مشاهده سریع تغییرات هنگام استفاده از Pipeها، الگوریتمهای سریع و سادهای در نظر گرفته است.
در قسمت بعد با انواع Pipeها در Angular و همچنین نحوه پیاده سازی آنها، آشنا خواهیم شد.
کتابخانه jquery-lockfixed
lockfixed is a jQuery plugin which allows for DOM elements to be positioned anywhere on the page, and lock within the user's viewport when scrolling. Common use case is a menu under a header, which on scrolling stays within the viewport and doesn't overflow the footer.
Degrades nicely on mobile and tablet browsers and doesn't have any CSS prerequisites. Demo