Civet: TypeScript بهتری؟

با این ابرمجموعه مدرن TypeScript، به پیشنهادات ECMAScript دسترسی اولیه داشته باشید و ویژگی‌های اضافه شده نرم و نرمی داشته باشید.

• Civet چیست؟
• از Civet برای تکرار در JSX استفاده کنید
• اپراتور لوله Civet
• سوئیچ قدرتمندتر
• حلقه‌ها
• خلاصه برای توابع تک آرگومان
• برش آرایه‌ها و رشته‌ها
• نتیجه‌گیری

Civet به عنوان نوعی CoffeeScript مدرن برای TypeScript توصیف می‌شود، که اگر CoffeeScript را مانند من به یاد داشته باشید، ممکن است امیدوارکننده به نظر نرسد. با این حال، قبل از اینکه آن را حذف کنید، آنچه را که Civet ارائه می دهد در نظر بگیرید. این یک زبان فشرده و مدرن است که قصد دارد هر آنچه را که در مورد TypeScript دوست دارید با قدرت و سادگی بیشتر در اختیار شما قرار دهد، از جمله دسترسی اولیه به ویژگی‌های پیشنهادی زبان ECMAScript. می‌توانید از برخی از قابلیت‌هایی که Civet با تلاش بسیار کم در دستان شما قرار می‌دهد شگفت‌زده شوید.

Civet چیست؟

از آنجایی که Civet اغلب با CoffeeScript مقایسه می شود، بهتر است با در نظر گرفتن وجوه مشترک آنها و همچنین تفاوت آنها شروع کنید.

مانند TypeScript، CoffeeScript ابر مجموعه ای از جاوا اسکریپت است. در دوره‌ای منتشر شد که جاوا اسکریپت بیشتر به خاطر کاستی‌های فراوانش شناخته می‌شد، و CoffeeScript نقطه توقفی برای رفع برخی از این نگرانی‌ها بود. جاوا اسکریپت به زودی به سمت بیان و قابلیت بیشتر تکامل یافت و CoffeeScript به عنوان یک لایه اضافه شده غیر ضروری دیده شد.

Civet، از سوی دیگر، به عنوان یک لایه ارزش افزوده طراحی شده است که به طور مداوم رشد می کند و تکامل می یابد تا کد TypeScript (و جاوا اسکریپت) را با قابلیت های پیشرفته تزئین کند. اگر می خواهید سینتکس اضافی آن را امتحان کنید، می توانید به سادگی Civet را به خط لوله ساخت خود اضافه کنید، برای مثال با Vite یا esbuild.

از آنجایی که Civet مستقیماً به TypeScript انتقال می‌یابد، از پشتیبانی زمان توسعه قوی در IDE برخوردار است. همانطور که Erik Demaine توسعه دهنده Civet می گوید: “یک مزیت بزرگ VS Code LSP [برنامه افزودنی پروتکل سرور زبان] است، بنابراین در حالی که فایل خود را ویرایش می کنید، به طور خودکار TypeScript را جابجا می کند و اجرا می کند، بر خطاها تاکید می کند و کمک شناور را ارائه می دهد.”

در بخش‌های بعدی، نگاهی به ویژگی‌های کلیدی سینتکس Civet خواهیم داشت. این یک تکه نسبتا کوچک برای نگه داشتن در مغز است. به خاطر داشته باشید که TypeScript معتبر Civet نیز معتبر است.

از Civet برای تکرار در JSX استفاده کنید

Civet می تواند JSX را مدیریت کند. به شما امکان می‌دهد از بستن برچسب‌ها در نشانه‌گذاری صرف‌نظر کنید و اگر برچسب‌ها را تورفتگی کنید، آن‌ها را برای شما می‌بندد. همچنین به طور خودکار چندین عنصر یا قطعات خواهر و برادر را در یک قطعه والد قرار می دهد. یکی از بزرگترین ناامیدی های شخصی من در استفاده از JSX، سر و کار داشتن با تکرار لیست ها است. رویکرد معمولی شامل درهم آمیختن جاوا اسکریپت به طور مستقیم در نشانه گذاری است، همانطور که در فهرست ۱ نشان داده شده است.

<For each={props.items}>
  {(item) => {
    return (
      <li class="item" style={props.style}>
        <Item item={item} />
      </li>
    );
  }}
</For>

این به نظر من غیر ضروری به نظر می رسد. زمانی که به آن عادت کنید قابل تحمل است و روش های دیگری برای تکرار وجود دارد< /a> (اگرچه نوشتن نشانه گذاری در جاوا اسکریپت به همان اندازه بد است). اما زمانی که تنها کاری که باید انجام دهید این است که روی یک مجموعه تکرار کنید، چه خوب است که به اندازه کافی ساده باشد که آن را بلافاصله تایپ کنید.

<For each=props.items>
   (item) =>
     <li .item {props.style}><Item {item}>

Civet قبل از رسمی شدن اپراتور لوله TypeScript پیشنهادی را در اختیار شما قرار می دهد. ایده اصلی این ویژگی این است که امکان ترکیب عملیات بدون زنجیره‌سازی تودرتو یا روش روان را فراهم کند. مانند زمانی که CoffeeScript برای جاوا اسکریپت انجام داد، Civet به شما امکان می دهد از این ویژگی اکنون استفاده کنید، قبل از اینکه به طور رسمی به TypeScript برسد.

استفاده از عملگر لوله (|>) نوشتن عملیات زنجیره‌ای را به روشی آسان برای خواندن امکان‌پذیر می‌سازد.

فرض کنید چندین عملیات تعریف شده دارید (مثلاً foo، bar، و baz) و اکنون می‌خواهید از آنها در کنار هم استفاده کنید. برای تغییر یک متغیر در جاوا اسکریپت مستقیم، ممکن است با فراخوانی های تابع تو در تو مانند foo(bar(baz(myVar))) یا احتمالاً baz(myNum).bar().foo() هر دوی آن‌ها بی‌معنا هستند، و با پیچیده‌تر شدن همه چیز، رمزگشایی آنها دشوارتر می‌شود. همانطور که در لیست ۳ نشان داده شده است، می توانید همان منطق را در Civet با عملگر لوله اجرا کنید.

let foo = function(){ … }
let bar = function(){ … }
let baz = function(x){ … }

let myVar = “some value”;

myVar |> baz |> bar |> foo;

اپراتور لوله انجام چندین عملیات را با هم خواناتر می کند.

سوئیچ قدرتمندتر

یکی دیگر از ویژگی‌های پیشنهادی ECMAScript که می‌توانید زودتر با Civet از آن استفاده کنید، تطبیق الگو است. در پیشنهاد TC39 چیزهای زیادی وجود دارد، که هدف آن رفع نواقص بیانیه سوئیچ ECMAScript. در حال حاضر، همانطور که پیشنهاد بیان می کند، سوئیچ “شامل یک انبوهی از تفنگ‌ها مانند سقوط تصادفی کیس و محدوده مبهم.» همچنین به شدت فاقد قابلیت تطبیق است.

در حالی که پیشنهاد یک کلمه کلیدی جدید به نام مطابق را معرفی می کند، Civet بسیاری از بهبودهای تطبیق پیشنهادی را مستقیماً در عبارت switch اعمال می کند. به عنوان مثال، در Civet، می‌توانید همانطور که در فهرست ۴ نشان داده شده است، انجام دهید و یک رشته را با استفاده از تطبیق پیشرفته‌تر روشن کنید.

فهرست ۴. جابجایی با الگوها در Civet

let s = [{type:"text", content:"foobar"},'test2'];
switch s
  ""
    console.log "nothing"
  /\s+/
    console.log "whitespace"
  "hi"
    console.log "greeting"
  [{type: "text", content}, ...rest]
    console.log("leading text", content)

// outputs “leading text foobar”

عبارت switch Civet بسیار قدرتمند است و فراتر از افزودن الگوهای regex است. در واقع می‌تواند (در مورد چهارم بالا) آرگومان check را به‌عنوان یک آرایه تایپ کند، عنصر اول را به‌عنوان یک شی بررسی کند، و از ویژگی‌های شی برای انجام کار خود استفاده کند. بسیار پیچیده.

همچنین توجه داشته باشید که عبارت switch دستورات break را حذف کرده است، همانطور که در پیشنهاد TC39 توصیه شده است. به‌طور پیش‌فرض، اجرا به حالت بعدی نمی‌رود.

حلقه ها

بیایید به مبحث حلقه‌ها برگردیم، Civet توانایی ساده‌سازی نحو حلقه‌ای را در برخی موارد دارد. به عنوان یک نگاه سریع، لیست ۵ را ببینید، که روی آرایه ای از اعداد صحیح حلقه می زند تا یک آرایه جدید از مربع های آنها ایجاد کند. حلقه در سه سبک اجرا می شود: Civet، JavaScript برنامه نویسی، و JavaScript تابعی.

const list =[1,2,3,4,5,6,7];
// Civet
squares :=
  for item of list
    item * item

// programmatic JS
const squares = (() => {
  const results = [];
  for (const item of list) {
    results.push(item * item);
  }
  return results;
})();

// functional JS
squares = list.map((x) => { return x*x }));

خلاصه برای توابع تک آرگومان

Civet شامل یک “خلاصه تابع تک آرگومان” برای جایگزینی (x) => { } است. فهرست ۶ چند نمونه را در کنار معادل های معمولی جاوا اسکریپت آنها نشان می دهد.

let x = [{name:'test123'},{name:'Another name'}];

console.log(x.map .name);
console.log(x.map &.name?.slice(0,4));

console.log(x.map((x) => x.name));
console.log(x.map((x) => { return x.name?.slice(0, 4)}));

// output is the same in both groups:
[  "test123",  "Another name" ]
[  "test",  "Anot" ]

فهرست ۶ به شما نشان می دهد که چگونه یک آرگومان تابع واحد را بدون پرانتز و فلش اعلام کنید. کاراکتر آمپرسند در مثال دوم اجازه ارجاع به آرگومان را می دهد.

برش آرایه ها و رشته ها

Civet تعداد انگشت شماری میانبر برای برش آرایه ها و رشته ها دارد. این به شما امکان می دهد از براکت های مربع مانند آرگومان های تابع در یک آرایه استفاده کنید و آرگومان ها همانطور که انتظار دارید به slice() ارسال می شوند. به عنوان مثال، در لیست ۷، چندین عملیات برش را روی یک رشته انجام می دهیم. به راحتی بیشتر براکت ها توجه کنید.

let s = "Words are flowing out like endless rain";

console.log(s[10..16]); // outputs “flowing”
// equivalent to console.log(s.slice(10, 1 + 16 || 1 / 0));
console.log(s[-4..]); // output “rain”
// equivalent to console.log(s.slice(-4));
console.log(s[...5]); // outputs “Words”
// equivalent to console.log(s.slice(0, 5));

در اینجا، می‌توانید ببینید که چگونه نحو استفاده از slice() را کمی ساده‌تر می‌کند. توجه داشته باشید که نحو دو نقطه و سه نقطه به ترتیب به معنای انحصاری و شامل عنصر نهایی است.

پیکربندی

Civet دارای پیکربندی بسیار کمی برای تنظیم دقیق نحوه کار است، و این می تواند در انتقال پروژه ها، به ویژه پروژه هایی که از CoffeeScript استفاده می کنند، کمک کند. جزئیات بیشتر در مورد گزینه‌های پیکربندی را می‌توانید اینجا پیدا کنید.

نتیجه گیری

چیزهای بیشتری برای Civet وجود دارد، اما این یک نمونه خوب است. چهت شیت Civet را برای یک نمای کلی از نحو Civet در مقایسه با TypeScript ببینید. برای نگاهی عمیق تر به Civet به پروژه Civet در GitHub مراجعه کنید.

Civet ممکن است به عنوان آزمایشگاهی از ایده‌ها بیشترین معنا را داشته باشد. اگر می‌خواهید ویژگی‌های جدیدی را که برای مشخصات ECMAScript پیشنهاد شده است، قبل از انتشار بپذیرید و آزمایش کنید، این ابزار خوبی است. این نقطه ورود به لبه پیشرو توسعه در این فضا است.