https://virgool.io/feed/@ali909392 fa 2026-04-15 02:56:38 https://files.virgool.io/upload/users/2943355/avatar/BPdoJV.jpg?height=120&width=120 https://virgool.io/@ali909392 https://virgool.io/@ali909392/%D9%BE%D8%B1%D9%88%DA%98%D9%87-%DB%8C-aim-lab-ts-yz4eu43xmlqe سلام، من تو یک ماه گذشته رو یه پروژه به اسم Aim-Lab-TS کار کردم و بالاخره تموم شده!پروژه نوعی بازی تمرین Aim هستش. با بازکردن نسخه ی لایو با منوی تنظیمات اولیه ی پروژه رو به رو میشی. تو صفحه ی تنظیمات میتونی هر تغییری که به ذهنت میرسه رو تو بازی اعمال کنی، تعداد Target ها، تعداد Bomb ها، سرعت حرکتشون، اندازه ی هرکدوم، رفتار هرکدوم و... با زدن دکمه ی Apply & Start بازی شروع میشه. تو تنظیمات دیفالت، زمان هر Round مقدار 10 ثانیه تعریف شده. هدف بازی سرعت و دقت در کلیک کردن رو دایره های سبز (Targets) و نرفتن رو دایره های قرمز (Bombs) هستش. بعد از تموم شدم زمان Round، صفحه ی Analyze Round نشون داده میشه. تو این صفحه میتونی اطلاعات Round ای که بازی کردی رو ببینی. پایین صفحه یه جدول هست که اطلاعات تمام بازی هایی که تاحالا کردی رو نشون میده و میتونی بفهمی نسبت به قبل چقدر پیشرفت یا پسرفت داشتی🤓این پروژه برام خیلی با ارزشه چون نهایت تلاشم رو کردم فوق العاده بی نقص و پرفکت باشه. پروژه تو مدت یک ماه آروم آروم ساخته شده. من تقریبا تمام ثانیه هایی که روش کار کردم رو ضبط کردم. بعد که همه کار های پروژه تموم شد، دیدم 36 ساعت فوتج دارم. این 36 ساعت رو تو 2 دقیقه فشرده کردم (یعنی هر 3 ثانیه که تو فیلم میگذره برای من 1 ساعت گذشته!) و به صورت تایم لپس با آهنگ و جلوه های باحال رو یوتیوب گذاشتم. میتونی ساخته شدن پروژه 36 ساعته رو تو 2 دقیقه ببینی و دنبال کنی چی شده که پروژم تونسته جون بگیره و به اینی که الان هست تبدیل بشه🥹تازه پروژم کلی نکته و سورپرایز دیگه هم داره. اگه میخوای بیشتر با ویژگی های پروژم آشنا شی، میتونی داکیومنت گیت هابش رو مطالعه کنی😌🌎 Live Demo: https://ali-sdg90.github.io/Aim-Lab-TS/🔗 GitHub Repo: https://github.com/Ali-Sdg90/Aim-Lab-TS🎥 YouTube Time-Laps: https://www.youtube.com/watch?v=GUWZojIEkEgامیدوارم ازش کلللی لذت ببرین❤️#cs_internship#step9#web Ali-Sdg90 Ali-Sdg90 Fri, 22 Dec 2023 20:47:39 +0330 https://virgool.io/@ali909392/%D8%AD%D8%A7%D9%84%D8%AA-%D9%87%D8%A7%DB%8C-%D8%AE%D8%A7%D8%B5-interface-%D8%AF%D8%B1-typescript-vnf3lsbb5w8r سلام، تو این پست میخوام بیشتر راجب interface ها توضیح بدم.تو پست قبل (https://vrgl.ir/3i8s1) با مقدمات interface آشنا شدیم و کارکردش تو کلاس هارو دیدیم. تو این پست میخوام حالت های خاص استفاده از interface رو معرفی کنم که بیشتر باهاش آشنا بشیم.🔸 استفاده Nested interface: قابلیت جالب Nested Interface به ما امکان قرار دادن interface ها در یکدیگر رو میده. بریم تو مثال ببینیم:interface CSIntern { step: number; course: string; } interface Person { fullName: string; age: number; csintern?: CSIntern; } const ali: Person = { fullName: &quotAli Sadeghi&quot, age: 22, csintern: { step: 9, course: &quotWeb&quot, }, }; console.log(ali.csintern?.step); // 9تو این مثال ما دو interface با اسم های CSIntern و Person تعریف کردیم و در interface Person متغیر اختیاری csintern رو ساختیم و خواستیم تایپش از نوع interface CSIntern باشه. جلوتر متغیر ali رو با تایپ interface Person ساختیم و بهش متغیر اختیاری csintern رو دادیم. در متغیر ali میتونیم مقدار های step و course رو اضافه کنیم چون interface CSIntern در متغیر csintern در interface Person استفاده شده. در نهایت با لاگ گرفتن ali.csintern?.step عدد 9 در کنسول نشون داده میشه.🔸 استفاده از interface های همنام: میتونیم چند interface با نام های مثل هم داشته باشیم و کامپایلر TypeScript همه ی این interface هارو با هم merge میکنه درنهایت یک interface با اون اسم میشناسه. بریم تو مثال ببینیم:interface CSIntern { step: number; course: string; } interface Person { fullName: string; age: number; csintern?: CSIntern; } const ali: Person = { fullName: &quotAli Sadeghi&quot, age: 22, csintern: { step: 9, course: &quotWeb&quot, }, }; console.log(ali.csintern?.step); // 9تو این مثال دو interface با اسم های CSIntern تعریف کردیم و جلوتر متغیر ali رو با تایپ interface CSIntern ساختیم. میبینیم کامپایلر TypeScript اروری به کدمون نمیگیره و میتونیم در متغیر ali از هر دو متغیر step و course استفاده کنیم. انگار هر دو interface با هم merge شدن و ما یک interface با دو متغیر step و course داریم. در نهایت با لاگ گرفتن ali.step عدد 9 در کنسول نشون داده میشه.#cs_internship#step9#web Ali-Sdg90 Ali-Sdg90 Thu, 14 Dec 2023 21:48:57 +0330 https://virgool.io/@ali909392/%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%DA%A9%D8%A7%D8%B1%DA%A9%D8%B1%D8%AF-interface-%D9%88-class-%D8%AF%D8%B1-typescript-hh3xqisputpw سلام، در این پست می‌خوام راجب Interface و چگونگی کارکردش تو Class ها در TypeScript توضیح بدم.ساختار Interface یک ساختار منحصر به TypeScript هستش که ما با استفاده ازش یک ساختار تایپی برای تعریف کردن متغیرها می‌سازیم و عموما کاربردش در Class ها هستش. بریم با مثال ببینیم چجوری ازش میشه استفاده کرد:interface Intern { fullName: string; course: string; step: number; showInternData(): void; } class CreateNewIntern implements Intern { fullName: string; course: string; step: number; constructor(fullName: string, course: string, step: number) { this.fullName = fullName; this.course = course; this.step = step; } showInternData = (): void => { console.log( `${this.fullName} is in ${this.course} course at Step ${this.step}.` ); }; } const ali: Intern = new CreateNewIntern(&quotAli Sadeghi&quot, &quotWeb&quot, 8); console.log(ali.showInternData());تو این مثال اول ما یک Interface با اسم Intern تعریف کردیم و داخلش اسم متغیر و تایپشون رو تعریف کردیم.جلوتر یک Class با اسم CreateNewIntern تعریف کردیم و ازش خواستیم که ساختار متغیرهاش شبیه Interface Intern باشه. تعریف Class در TypeScript یکم خاص هستش، اول باید تایپ متغیرهایی که قرار هست در Constructor ساخته بشن رو مشخص کنیم و بعد تو Constructor تعریفشون کنیم و دقیقا باید همون متغیرهایی رو تعریف کنیم که تو ساختار Interface تعریف کردیم و به Class گفتیم از این قالب پیروی کن. داخل Class یک function با اسم showInternData با تایپ void تعریف شده. این function هم مثل بقیه متغیرها چون در قالب Interface قبلا تعریف شده، باید اینجا هم حضور داشته باشه. تایپ function هم void هستش چون فقط اطلاعات کلاس رو لاگ می‌گیره و چون return ای نداره، تایپش رو باید void بذاریم.جلوتر متغیر ali رو با تایپ Intern (میشد برای تایپ CreateNewIntern هم گذاشت) از کلاس CreateNewIntern تعریف کردیم و تو خط آخر وقتی تابع showInternData رو روی متغیر ali صدا میزنیم، این عبارت برامون لاگ گرفته میشه:Ali Sadeghi is in Web course at Step 8.#cs_internship#step8#web Ali-Sdg90 Ali-Sdg90 Mon, 27 Nov 2023 23:51:37 +0330 https://virgool.io/@ali909392/%DA%86%DA%AF%D9%88%D9%86%D9%87-ts-%D8%B1%D9%88-%D9%86%D8%B5%D8%A8-%D9%88-%D8%A7%D8%AC%D8%B1%D8%A7-%DA%A9%D9%86%DB%8C%D9%85-uyafyjeuof4v سلام در این پست میخوام مراحل نصب TS و چگونگی تبدیل فایل با پسوند .ts به .js رو توضیح بدم.1. ابتدا Node.js رو از سایت https://nodejs.org/en/ دانلود کنید.2. در ترمینال سیستم عامل عبارت زیر را بنویسید (اگه سیستم عاملتون macOS هست، لازمه اولش sudo بنویسین):npm install -g typescriptبا ران کردن این کد، TS به صورت Global در سیستمتون نصب میشه.3. یک پوشه ی پروژه بسازید و در ترمینال پوشه این عبارت رو وارد کنید:tsc --initبا به اتمام رسیدن مراحل --init، یک فایل tsconfig.json در پوشه ی پروژه ساخته میشه. در این فایل json دستورات نحوه ی عملکرد کامپایلر TS برای تبدیل فایل با پسوند .ts به .js وجود داره. اگه فایل رو باز کنیم میبینیم کلللی تنظیمات مختلف برای کامپایلر وجود داره. ما فقط با چندتاش کار داریم:&quottarget&quot: &quotES6&quot => به کدام ورژن جاوااسکریپت کدمون ترجمه بشه &quotrootDir&quot: &quot./src&quot => کدهای تایپ اسکریپت در چه پوشه ای هستن &quotoutDir&quot: &quot./dist&quot => کد های جاوااسکریپت در کدام پوشه ساخته بشنتوصیه میکنم این موارد رو هم از کامنت در بیارید:&quotsourceMap&quot: true, &quotremoveComments&quot: true, &quotnoEmitOnError&quot: true, &quotnoUnusedLocals&quot: true, &quotnoUnusedParameters&quot: true, &quotnoImplicitReturns&quot: true,4. در پوشه ی rootDir فایل با پسوند .ts بسازید و توش کدتون رو بزنید.5. اگه در ترمینال پروژه عبارت tsc (مخفف Type Script Compiler) رو بنویسید، کامپایلر با توجه به تنظیماتی که براش ست کردین، کد JS رو در پوشه ی مقصد میسازه.6. (اختیاری) میتونید اکستنشن VS Code مثل TypeScript Auto Compiler با لینک https://marketplace.visualstudio.com/items?itemName=morissonmaciel.typescript-auto-compiler رو هم نصب کنید که به صورت خودکار بعد از هر تغییر کد، tsc رو اجرا کنه و دیگه نیاز به انجام کار دستی نباشه.#cs_internship #step8#web Ali-Sdg90 Ali-Sdg90 Thu, 16 Nov 2023 19:46:45 +0330 https://virgool.io/@ali909392/%D8%A7%D8%B1%D9%87-js-%D8%B2%DB%8C%D8%A7%D8%AF%DB%8C-%D8%B9%D8%AC%DB%8C%D8%A8-%D8%BA%D8%B1%DB%8C%D8%A8%D9%87-ajukatji62il تو استادی ایتم 2 با حالت های خاص و استثنا های JS بیشتر آشنا شدم. چند تا از این حالت ها برام خیلی جالب بود که جلوتر توضیحشون دادم:?شباهت ظاهری String و Array ها: در نگاه اول به نظر میاد ساختار دو تایپ String و Array یکی هستن فقط از نظر نحوه تعریف شدن با هم فرق دارن. String به نظر میاد نوعی Array of characters هستش، این دو شباهت های کدی زیادی هم با هم دارن:let a = &quotHello&quot let b = [&quotH&quot, &quote&quot, &quotl&quot, &quotl&quot, &quoto&quot]; console.log(a.length); // 5 console.log(b.length); // 5 console.log(a.indexOf(&quote&quot)); // 1 console.log(b.indexOf(&quote&quot)); // 1 console.log(a.concat(&quot!&quot)); // &quotHello!&quot console.log(b.concat([&quot!&quot])); //[&quotH&quot, &quote&quot, &quotl&quot, &quotl&quot, &quoto&quot, &quot!&quot]ولی این شباهت فقط از نوع ظاهری هستش. اگه بیشتر ریز بشیم میبینیم تفاوت های ساختاری مهمی با هم دارن.تو Array اجازه داریم مقدار متغیر وسط زنجیره رو تغییر بدیم ولی تو String چنین اجازه ای نداریم، باید String جدیدی بسازیم و اون رو جایگذین String قبلی بکنیم تا مقدار متغیر وسط زنجیره رو بتونیم عوض کنیم:a[1] = &quota" b[1] = &quota" console.log(a); // &quotHello&quot console.log(b); // [&quotH&quot, &quota&quot, &quotl&quot, &quotl&quot, &quoto&quot]این تفاوت ساختاری مهم و نحوه ی رفتار متفاوتشون نسبت به هم، باعث شناخته شدنشون به عنوان دو تایپ مجزا از هم میشه.?تو JS روابط زیر برقرار هستش:23.toFixed(3); //syntaxError 23..toFixed(3); //23.000 23 .toFixed(3); //23.000‌- وقتی نقطه ای سمت راست عدد میذاریم، کامپایلر نقطه رو ممیز حساب میکنه و بعدش انتظار عدد داره، وقتی به جای عدد عبارت toFixed رو میبینه، به ما ارور syntaxError تحویل میده.- رابطه دومی بدون مشکل اجرا میشه. کامپایلر اولین نقطه جلوی 23 رو نماد اعشار میخونه و چون بعد نقطه اول عددی گذاشته نشده و دستور غیر متعارفی هم جلوش نیستش (مثل toFixed قبلی)، JS خودش یه صفر بعد نقطه میذاره و در واقع چنین کدی رو اجرا میکنه:23.0.toFixed(3); //23.000‌- رابطه سوم هم بدون مشکل اجرا میشه چون با قرار دادن فاصله، انگار داریم به JS نشون میدیم که عددی که میخوام روش toFixed اعمال کنی، فقط عدد صحیح 23 هستش.?تو JS روابط عجیب غریب زیر برقرار هستش:const a = 10 / &quotali" console.log(a); // NaN console.log(typeof a); // number !!! console.log(a === NaN); // false !!! console.log(a == NaN); // false !!! console.log(NaN == NaN); // false !!!‌تو زبان JS تایپ NaN (مخفف Not a Number) Number هستش و دو تا NaN هم هیچوقت برابر با هم نیستن!#cs_internship#step7#web Ali-Sdg90 Ali-Sdg90 Tue, 07 Nov 2023 22:05:46 +0330 https://virgool.io/@ali909392/%D9%85%D8%B9%D8%A7%D8%AF%D9%84%D9%87-type-%D8%AF%D8%B1-js-rgrryfnafcxt سلام، تو استادی ایتم 1 با مفهموم تایپ تو JS آشنا شدم، یه مسعله ی باحال با ترکیب تایپ ها ساختم، ببینم کی میتونه بدون اینکه جواب رو بخونه درست حل بکنتش ?کد زیر چه چیزی رو تو کنسول نشون میده؟console.log(+(!!typeof null === !!!null) == (typeof null === typeof []));......جواب : trueراه حل:برای ساده سازی console.log رو کنار میذاریم:+(!!typeof null === !!!null) == (typeof null === typeof [])میبینیم کد از دو قسمت تشکیل شده، اول بریم سمت چپ رو بررسی کنیم:+(!!typeof null === !!!null)میدونیم وقتی پشت نوشته ای !! میذاریم، درواقع میخوایم بر اساس falsy/truthy بسنجیمش. typeof null در زبان JS به ما عبارت Object رو میده و Object چون یه مقداری داره، truthy حساب میشه پس سمت چپ به ما true میده.سمت راست null!!! رو داریم. این درواقع این عبارت null!! ! هستش. اول null رو بر اساس falsy/truthy میسنجیم. چون null در واقع هیچی نیست، پس مقدار false رو به ما میده و به عبارت false! میرسیم. وقتی ! پشت عبارتی میاد یعنی میخوایم معکوسش کنیم، معکوس false هم true میشه.پس عبارت سمت چپ در نهایت اینجوری میشه:+(true === true)دو تا true هم با هم برابر هستند و عبارت true از پرانتز خارج میشه. پشت پرانتز + هستش. میدونیم وقتی پشت عبارتی + میذاریم، در واقع میخوایم به عدد تبدیلش بکنیم، مقدار عددی true هم 1 هستش پس کل عبارت سمت چپ به ما عدد 1 رو میده.بریم حالا سمت راست رو ببینیم:(typeof null === typeof [])عبارت سمت راست از دو typeof تشکیل شده. میدونیم typeof null در زبان JS مقدار Object رو به ما میده. سمت چپ هم همینطور، میدونیم array در واقع نوعی Object هستش، پس عبارت (Object === Object) رو داریم که به ما مقدار true رو میده.در کل ساختار کد به صورت 1 == trueدر میاد و میدونیم جواب این عبارت هم مقدار true هستش چون داریم از == استفاده میکنیم و true بدون توجه به نوع داده درواقع همون عدد 1 هستش (و برعکس)، پس در نهایت در کنسول عبارت true نشون داده میشه :)#cs_internship #step7#web Ali-Sdg90 Ali-Sdg90 Wed, 01 Nov 2023 23:12:00 +0330