เผยแพร่โดย Matt Turnbull ที่ medium.com
ค้นพบ สี่เหตุผลที่ TypeScript และ Babel เป็นคู่ที่สมบูรณ์แบบ และติดตาม คำแนะนำทีละขั้นตอนเพื่ออัปเกรดโปรเจ็กต์ของคุณด้วย TypeScript ใน 10 นาที
ฮะ? อะไร? ทำไม?
ฉันไม่เข้าใจความจำเป็นของพรีเซ็ตใหม่นี้ในตอนแรก
Babel และ TypeScript เป็นสองสิ่งที่แตกต่างกันโดยสิ้นเชิงใช่หรือไม่ Babel สามารถจัดการกับการตรวจสอบประเภท TypeScript ได้อย่างไร? TypeScript สามารถส่งออกไปยัง ES5 ได้เช่นเดียวกับ Babel แล้วประเด็นคืออะไร การรวม Babel และ TypeScript เข้าด้วยกันไม่ใช่เรื่องซับซ้อนใช่ไหม
หลังจากการวิจัยหลายชั่วโมง ข้อสรุปของฉัน:
TypeScript และ Babel เป็นการแต่งงานที่สวยงาม
ให้ผมแสดง.
1) คุณใช้ Babel แล้ว (หรือควร)
คุณอยู่ในหนึ่งในสามหมวดหมู่เหล่านี้:
- คุณใช้บาเบลอยู่แล้ว หากไม่ใช่โดยตรง การกำหนดค่า Webpack ของคุณจะป้อนไฟล์ *.js ลงใน Babel (กรณีนี้สำหรับสำเร็จรูปส่วนใหญ่ รวมถึง create-react-app ).
- คุณใช้ typescript ปราศจาก บาเบล. ลองเพิ่ม Babel ลงในคลังแสงของคุณ เพราะมีคุณสมบัติพิเศษมากมาย อ่านต่อ.
- คุณไม่ได้ใช้ Babel? ได้เวลากระโดดขึ้นเรือแล้ว
เขียน JavaScript ที่ทันสมัยโดยไม่ทำลายสิ่งใด
รหัส JavaScript ของคุณต้องทำงานในเบราว์เซอร์เก่าหรือไม่ ไม่มีปัญหา Babel แปลงรหัสและทำให้ทุกอย่างเรียบร้อย ใช้คุณสมบัติล่าสุดและดีที่สุดโดยไม่ต้องกังวล
คอมไพเลอร์ TypeScript มีคุณลักษณะที่คล้ายกัน ซึ่งเปิดใช้งานโดยการตั้งค่าเป้าหมายเป็น 'ES5' หรือ 'ES6' แต่การกำหนดค่า Babel ปรับปรุงสิ่งนี้ด้วย babel-preset-env . แทนที่จะล็อกในชุดคุณลักษณะเฉพาะของ JavaScript (ES5, ES6 ฯลฯ) คุณต้องระบุสภาพแวดล้อมที่คุณต้องการสนับสนุน:
'targets': { 'browsers': ['last 2 versions', 'safari >= 7'], 'node': '6.10' }
บาเบลใช้ compat-table เพื่อตรวจสอบคุณสมบัติ JavaScript ที่จะแปลงและ polyfill สำหรับสภาพแวดล้อมเป้าหมายเฉพาะเหล่านั้น
ใช้เวลาสักครู่ชื่นชมอัจฉริยะที่ตั้งชื่อโครงการนี้ ' compat-table '.
เทคนิคที่น่าสนใจที่ใช้โดย create-react-app : คอมไพล์ด้วยเบราว์เซอร์ล่าสุดระหว่างการพัฒนา (เพื่อความรวดเร็ว) และคอมไพล์ด้วยเบราว์เซอร์จำนวนมากขึ้นในเวอร์ชันที่ใช้งานจริง (เพื่อความเข้ากันได้) ดี.
Babel สามารถกำหนดค่าได้ดีเยี่ยม
ต้องการตอบโต้กับ JSX หรือไม่? ไหล? TypeScript? ใหม่เงาวับ โซ่เสริม ข้อเสนอ? เพียงติดตั้งปลั๊กอินและให้ Babel จัดการ
@babel/plugin-proposal-optional-chaning
นอกจากนี้ยังมีปลั๊กอิน Babel ของบุคคลที่สามให้เลือกมากมาย ใช้องค์ประกอบที่มีสไตล์? ทำให้ดีขึ้น การเรนเดอร์ฝั่งเซิร์ฟเวอร์ . ใช้แรมด้า? เขียนฟังก์ชันได้อย่างง่ายดาย . ต้องการมากขึ้น? จัดการแฟล็กคุณลักษณะ , ปรับปรุงการนำเข้า lodash , ปรับปรุง console.log , หรือ strip console.log . อะไรก็ตามที่ลอยเรือของคุณ คุณจะพบมันในรายการเด่นนี้: Awesome-babel .
ดีกว่า console.log: babel-plugin-console
มาโคร!
คุณรู้ Kent C Dodds ? เขาได้สร้างปลั๊กอิน Babel ที่เปลี่ยนเกม: babel-plugin-มาโคร .
แทนที่จะเพิ่มปลั๊กอินลงในไฟล์กำหนดค่า Babel คุณนำเข้ามาโครโดยตรงในโค้ด JavaScript ของคุณ เมื่อถึงเวลาสร้าง มาโครจะเริ่มทำงานและแก้ไขโค้ด เช็คเอาท์ โพสต์นี้ สำหรับรายละเอียดเพิ่มเติม
ฉันคิดว่ามาโคร Babel จะระเบิดในปีนี้ ไม่เพียงแต่เป็นแนวคิดที่น่าทึ่ง แต่ยังรวมเข้ากับ create-react-app v2.0 (เบต้า) ซึ่งผลักดันการสนับสนุนจากชุมชน
2) ง่ายต่อการจัดการคอมไพเลอร์ ONE
TypeScript ต้องการคอมไพเลอร์ของตัวเอง — เป็นสิ่งที่ให้พลังพิเศษในการตรวจสอบประเภทที่น่าทึ่ง
ในวันที่มืดมน (ก่อนบาเบล 7)
การรวมคอมไพเลอร์สองตัวแยกกัน (TypeScript และ Babel) เข้าด้วยกันไม่ใช่เรื่องง่าย ขั้นตอนการรวบรวมกลายเป็น: TS > TS Compiler > JS > Babel > JS (อีกครั้ง)
Webpack มักใช้เพื่อแก้ปัญหานี้ ปรับแต่งการกำหนดค่า Webpack ของคุณเพื่อป้อน *.ts ลงใน TypeScript จากนั้นป้อนผลลัพธ์ลงใน Babel แต่คุณใช้ตัวโหลด TypeScript ตัวใด สองตัวเลือกยอดนิยมคือ ts-loader และ Awesome-typescript-loader . README.md สำหรับ Awesome-typescript-loader บอกว่ามันอาจจะช้าลงสำหรับภาระงานบางอย่างและแนะนำ ts-loader กับ HappyPack หรือ ตัวโหลดเธรด . README.md สำหรับ ts-loader แนะนำให้รวมกับ fork-ts-checker-webpack-plugin , HappyPack , ตัวโหลดเธรด , และ / หรือ ตัวโหลดแคช .
อุ้ย. ไม่ นี่คือที่ที่คนส่วนใหญ่รู้สึกท่วมท้นและใส่ TypeScript ลงในตะกร้าที่แข็งเกินไป ฉันไม่โทษพวกเขา
วันที่มีแดดจ้า (กับ Babel 7)
จะดีกว่าไหมถ้ามี หนึ่ง คอมไพเลอร์จาวาสคริปต์? ไม่ว่าโค้ดของคุณจะมีฟีเจอร์ ES2015, JSX, TypeScript หรืออะไรก็ตามที่กำหนดเอง คอมไพเลอร์รู้ว่าต้องทำอะไร
ฉันเพิ่งอธิบายบาเบล หน้าด้าน
การอนุญาตให้ Babel ทำหน้าที่เป็นคอมไพเลอร์ตัวเดียว ไม่จำเป็นต้องจัดการ กำหนดค่า หรือรวมคอมไพเลอร์สองตัวเข้ากับเวทมนตร์ของ Webpack ที่ซับซ้อน
นอกจากนี้ยังช่วยลดความซับซ้อนของระบบนิเวศ JavaScript ทั้งหมด แทนที่จะใช้ linters, test runners, build system และ boilerplates ที่รองรับคอมไพเลอร์ที่แตกต่างกัน พวกเขาเพียงแค่ต้องสนับสนุน Babel จากนั้นคุณกำหนดค่า Babel เพื่อจัดการกับความต้องการเฉพาะของคุณ บอกลา ts-node , ts-is , ts-karma , create-react-app-typescript ฯลฯ และใช้การสนับสนุน Babel แทน การสนับสนุน Babel มีอยู่ทุกที่ ชำระเงินที่ การตั้งค่า Babel หน้าหนังสือ:
3) คอมไพล์เร็วกว่า
คำเตือน! คุณอาจต้องการนั่งลงสำหรับบิตนี้
Babel จัดการกับรหัส TypeScript อย่างไร มันเอาออก
ใช่ มันแยก TypeScript ออกทั้งหมด เปลี่ยนเป็น JavaScript ปกติ และดำเนินต่อไปอย่างมีความสุข
ฟังดูไร้สาระ แต่วิธีการนี้มีข้อดีสองประการ
ข้อได้เปรียบแรก: ️⚡️ รวดเร็วทันใจ ⚡️.
นักพัฒนา typescript ส่วนใหญ่ประสบปัญหาเวลาในการรวบรวมช้าระหว่างการพัฒนา / โหมดดู คุณกำลังเข้ารหัส คุณบันทึกไฟล์ และ… จากนั้น… มันมา… anninnnd… ในที่สุด คุณจะเห็นการเปลี่ยนแปลงของคุณ อ๊ะ พิมพ์ผิด แก้ไข บันทึก บันทึก แอนน์... เออ มันคือ แค่ ช้าพอที่จะสร้างความรำคาญและทำลายโมเมนตัมของคุณ
เป็นการยากที่จะตำหนิคอมไพเลอร์ TypeScript ซึ่งทำงานเยอะมาก กำลังสแกนหาไฟล์คำจำกัดความประเภท (*.d.ts) รวมถึงภายใน node_modules และตรวจสอบว่ารหัสของคุณถูกใช้อย่างถูกต้อง นี่คือเหตุผลที่หลาย ๆ คนแยกประเภท typescript ตรวจสอบเป็นกระบวนการที่แยกจากกัน อย่างไรก็ตาม คอมโบ Babel + TypeScript ยังคงให้การรวบรวมที่เร็วขึ้น ต้องขอบคุณการแคชที่เหนือกว่าของ Babel และสถาปัตยกรรมการปล่อยไฟล์เดียว
ดังนั้น ถ้า Babel ถอดโค้ด TypeScript ออก จะมีประโยชน์อะไรในการเขียน TypeScript? นั่นนำเราไปสู่ข้อได้เปรียบที่สอง ...
4) อยู่ในโซนตามที่คุณเข้ารหัส
คุณกำลังแฮ็ครหัสร่วมกัน ทำลายโซลูชันอย่างรวดเร็วเพื่อดูว่าความคิดของคุณมีขาหรือไม่ คุณบันทึกไฟล์และ TypeScript กรีดร้องที่คุณ:
เลขที่! ฉันจะไม่รวบรวมสิ่งนี้! รหัสของคุณเสียใน 42 ไฟล์ที่แตกต่างกัน!
ใช่คุณ ทราบ มันแตก. คุณอาจทำการทดสอบหน่วยผิดไปบ้างเช่นกัน แต่คุณกำลังทดลองอยู่ ณ จุดนี้ หมั่นตรวจสอบอย่างต่อเนื่อง ทั้งหมด รหัสของคุณเป็นประเภท safe ทั้งหมด เวลา.
นี่เป็นข้อได้เปรียบประการที่สองของ Babel ในการตัดโค้ด TypeScript ออกระหว่างการรวบรวม คุณเขียนโค้ด บันทึก และคอมไพล์ (เร็วมาก) ปราศจาก ตรวจสอบความปลอดภัยประเภท ทำการทดลองกับโซลูชันของคุณต่อไปจนกว่าคุณจะพร้อมที่จะตรวจสอบโค้ดเพื่อหาข้อผิดพลาด เวิร์กโฟลว์นี้ช่วยให้คุณอยู่ในโซนขณะที่คุณกำลังเขียนโค้ด
คุณจะตรวจสอบข้อผิดพลาดประเภทได้อย่างไร เพิ่มสคริปต์ตรวจสอบประเภทการรัน npm ที่เรียกใช้คอมไพเลอร์ TypeScript ฉันปรับแต่งคำสั่งการทดสอบ npm เพื่อตรวจสอบประเภทก่อนแล้วจึงทำการทดสอบหน่วยต่อไป
มันไม่ใช่การแต่งงานที่สมบูรณ์แบบ
ให้เป็นไปตาม โพสต์ประกาศ มีคุณลักษณะของ TypeScript สี่ประการที่ไม่ได้คอมไพล์ใน Babel เนื่องจากสถาปัตยกรรมการปล่อยไฟล์เดียว
ไม่ต้องกังวลมันไม่เลวร้ายนัก และ TypeScript จะเตือนปัญหาเหล่านี้เมื่อเปิดใช้งานการตั้งค่าสถานะ isolatedModules
1) เนมสเปซ
วิธีแก้ปัญหา: อย่าใช้มัน! พวกเขาล้าสมัย ใช้โมดูล ES6 มาตรฐานอุตสาหกรรม (นำเข้า / ส่งออก) แทน NS กฎ tslint ที่แนะนำ ตรวจสอบให้แน่ใจว่าเนมสเปซเป็น ไม่ ใช้แล้ว.
2) การแคสต์ประเภทด้วยไวยากรณ์ x
วิธีแก้ไข: ใช้ x เป็นประเภทใหม่แทน
3) Enums ที่ครอบคลุมหลายการประกาศ (เช่น enum merges)
ฉันไม่แน่ใจว่านี่คืออะไร ฉันค้นหาออนไลน์เพื่อรวม enum และไม่พบอะไรเลย ใครสามารถช่วย? โปรดแจ้งให้เราทราบในความคิดเห็น!
4) รูปแบบการนำเข้า / ส่งออกแบบเดิม
ตัวอย่าง: import foo = require(...) และ export = foo.
ตลอดหลายปีที่ผ่านมาของ TypeScriptin ฉันไม่เคยเจอสิ่งนี้ ใครเข้ารหัสด้วยวิธีนี้? หยุดนะ!
ตกลง ฉันพร้อมที่จะลองใช้ TypeScript กับ Babel แล้ว!
เริ่มทำสิ่งนี้กัน! ควรใช้เวลาประมาณ 10 นาทีเท่านั้น
ฉันสมมติว่าคุณมีการตั้งค่า Babel 7 ถ้าไม่ดู คู่มือการย้ายถิ่นของ Babel .
1) เปลี่ยนชื่อไฟล์ .js เป็น .ts
สมมติว่าไฟล์ของคุณอยู่ใน /src:
ค้นหา src -name '*.js' -exec sh -c 'mv ' เผยแพร่โดย Matt Turnbull ที่ medium.com ค้นพบ สี่เหตุผลที่ TypeScript และ Babel เป็นคู่ที่สมบูรณ์แบบ และติดตาม คำแนะนำทีละขั้นตอนเพื่ออัปเกรดโปรเจ็กต์ของคุณด้วย TypeScript ใน 10 นาที ฉันไม่เข้าใจความจำเป็นของพรีเซ็ตใหม่นี้ในตอนแรก Babel และ TypeScript เป็นสองสิ่งที่แตกต่างกันโดยสิ้นเชิงใช่หรือไม่ Babel สามารถจัดการกับการตรวจสอบประเภท TypeScript ได้อย่างไร? TypeScript สามารถส่งออกไปยัง ES5 ได้เช่นเดียวกับ Babel แล้วประเด็นคืออะไร การรวม Babel และ TypeScript เข้าด้วยกันไม่ใช่เรื่องซับซ้อนใช่ไหม หลังจากการวิจัยหลายชั่วโมง ข้อสรุปของฉัน: TypeScript และ Babel เป็นการแต่งงานที่สวยงาม ให้ผมแสดง. คุณอยู่ในหนึ่งในสามหมวดหมู่เหล่านี้: รหัส JavaScript ของคุณต้องทำงานในเบราว์เซอร์เก่าหรือไม่ ไม่มีปัญหา Babel แปลงรหัสและทำให้ทุกอย่างเรียบร้อย ใช้คุณสมบัติล่าสุดและดีที่สุดโดยไม่ต้องกังวล คอมไพเลอร์ TypeScript มีคุณลักษณะที่คล้ายกัน ซึ่งเปิดใช้งานโดยการตั้งค่าเป้าหมายเป็น 'ES5' หรือ 'ES6' แต่การกำหนดค่า Babel ปรับปรุงสิ่งนี้ด้วย babel-preset-env . แทนที่จะล็อกในชุดคุณลักษณะเฉพาะของ JavaScript (ES5, ES6 ฯลฯ) คุณต้องระบุสภาพแวดล้อมที่คุณต้องการสนับสนุน: บาเบลใช้ compat-table เพื่อตรวจสอบคุณสมบัติ JavaScript ที่จะแปลงและ polyfill สำหรับสภาพแวดล้อมเป้าหมายเฉพาะเหล่านั้น ใช้เวลาสักครู่ชื่นชมอัจฉริยะที่ตั้งชื่อโครงการนี้ ' compat-table '. เทคนิคที่น่าสนใจที่ใช้โดย create-react-app : คอมไพล์ด้วยเบราว์เซอร์ล่าสุดระหว่างการพัฒนา (เพื่อความรวดเร็ว) และคอมไพล์ด้วยเบราว์เซอร์จำนวนมากขึ้นในเวอร์ชันที่ใช้งานจริง (เพื่อความเข้ากันได้) ดี. ต้องการตอบโต้กับ JSX หรือไม่? ไหล? TypeScript? ใหม่เงาวับ โซ่เสริม ข้อเสนอ? เพียงติดตั้งปลั๊กอินและให้ Babel จัดการ @babel/plugin-proposal-optional-chaning นอกจากนี้ยังมีปลั๊กอิน Babel ของบุคคลที่สามให้เลือกมากมาย ใช้องค์ประกอบที่มีสไตล์? ทำให้ดีขึ้น การเรนเดอร์ฝั่งเซิร์ฟเวอร์ . ใช้แรมด้า? เขียนฟังก์ชันได้อย่างง่ายดาย . ต้องการมากขึ้น? จัดการแฟล็กคุณลักษณะ , ปรับปรุงการนำเข้า lodash , ปรับปรุง console.log , หรือ strip console.log . อะไรก็ตามที่ลอยเรือของคุณ คุณจะพบมันในรายการเด่นนี้: Awesome-babel . ดีกว่า console.log: babel-plugin-console คุณรู้ Kent C Dodds ? เขาได้สร้างปลั๊กอิน Babel ที่เปลี่ยนเกม: babel-plugin-มาโคร . แทนที่จะเพิ่มปลั๊กอินลงในไฟล์กำหนดค่า Babel คุณนำเข้ามาโครโดยตรงในโค้ด JavaScript ของคุณ เมื่อถึงเวลาสร้าง มาโครจะเริ่มทำงานและแก้ไขโค้ด เช็คเอาท์ โพสต์นี้ สำหรับรายละเอียดเพิ่มเติม ฉันคิดว่ามาโคร Babel จะระเบิดในปีนี้ ไม่เพียงแต่เป็นแนวคิดที่น่าทึ่ง แต่ยังรวมเข้ากับ create-react-app v2.0 (เบต้า) ซึ่งผลักดันการสนับสนุนจากชุมชน TypeScript ต้องการคอมไพเลอร์ของตัวเอง — เป็นสิ่งที่ให้พลังพิเศษในการตรวจสอบประเภทที่น่าทึ่ง การรวมคอมไพเลอร์สองตัวแยกกัน (TypeScript และ Babel) เข้าด้วยกันไม่ใช่เรื่องง่าย ขั้นตอนการรวบรวมกลายเป็น: TS > TS Compiler > JS > Babel > JS (อีกครั้ง) Webpack มักใช้เพื่อแก้ปัญหานี้ ปรับแต่งการกำหนดค่า Webpack ของคุณเพื่อป้อน *.ts ลงใน TypeScript จากนั้นป้อนผลลัพธ์ลงใน Babel แต่คุณใช้ตัวโหลด TypeScript ตัวใด สองตัวเลือกยอดนิยมคือ ts-loader และ Awesome-typescript-loader . README.md สำหรับ Awesome-typescript-loader บอกว่ามันอาจจะช้าลงสำหรับภาระงานบางอย่างและแนะนำ ts-loader กับ HappyPack หรือ ตัวโหลดเธรด . README.md สำหรับ ts-loader แนะนำให้รวมกับ fork-ts-checker-webpack-plugin , HappyPack , ตัวโหลดเธรด , และ / หรือ ตัวโหลดแคช . อุ้ย. ไม่ นี่คือที่ที่คนส่วนใหญ่รู้สึกท่วมท้นและใส่ TypeScript ลงในตะกร้าที่แข็งเกินไป ฉันไม่โทษพวกเขา จะดีกว่าไหมถ้ามี หนึ่ง คอมไพเลอร์จาวาสคริปต์? ไม่ว่าโค้ดของคุณจะมีฟีเจอร์ ES2015, JSX, TypeScript หรืออะไรก็ตามที่กำหนดเอง คอมไพเลอร์รู้ว่าต้องทำอะไร ฉันเพิ่งอธิบายบาเบล หน้าด้าน การอนุญาตให้ Babel ทำหน้าที่เป็นคอมไพเลอร์ตัวเดียว ไม่จำเป็นต้องจัดการ กำหนดค่า หรือรวมคอมไพเลอร์สองตัวเข้ากับเวทมนตร์ของ Webpack ที่ซับซ้อน นอกจากนี้ยังช่วยลดความซับซ้อนของระบบนิเวศ JavaScript ทั้งหมด แทนที่จะใช้ linters, test runners, build system และ boilerplates ที่รองรับคอมไพเลอร์ที่แตกต่างกัน พวกเขาเพียงแค่ต้องสนับสนุน Babel จากนั้นคุณกำหนดค่า Babel เพื่อจัดการกับความต้องการเฉพาะของคุณ บอกลา ts-node , ts-is , ts-karma , create-react-app-typescript ฯลฯ และใช้การสนับสนุน Babel แทน การสนับสนุน Babel มีอยู่ทุกที่ ชำระเงินที่ การตั้งค่า Babel หน้าหนังสือ: คำเตือน! คุณอาจต้องการนั่งลงสำหรับบิตนี้ Babel จัดการกับรหัส TypeScript อย่างไร มันเอาออก ใช่ มันแยก TypeScript ออกทั้งหมด เปลี่ยนเป็น JavaScript ปกติ และดำเนินต่อไปอย่างมีความสุข ฟังดูไร้สาระ แต่วิธีการนี้มีข้อดีสองประการ ข้อได้เปรียบแรก: ️⚡️ รวดเร็วทันใจ ⚡️. นักพัฒนา typescript ส่วนใหญ่ประสบปัญหาเวลาในการรวบรวมช้าระหว่างการพัฒนา / โหมดดู คุณกำลังเข้ารหัส คุณบันทึกไฟล์ และ… จากนั้น… มันมา… anninnnd… ในที่สุด คุณจะเห็นการเปลี่ยนแปลงของคุณ อ๊ะ พิมพ์ผิด แก้ไข บันทึก บันทึก แอนน์... เออ มันคือ แค่ ช้าพอที่จะสร้างความรำคาญและทำลายโมเมนตัมของคุณ เป็นการยากที่จะตำหนิคอมไพเลอร์ TypeScript ซึ่งทำงานเยอะมาก กำลังสแกนหาไฟล์คำจำกัดความประเภท (*.d.ts) รวมถึงภายใน node_modules และตรวจสอบว่ารหัสของคุณถูกใช้อย่างถูกต้อง นี่คือเหตุผลที่หลาย ๆ คนแยกประเภท typescript ตรวจสอบเป็นกระบวนการที่แยกจากกัน อย่างไรก็ตาม คอมโบ Babel + TypeScript ยังคงให้การรวบรวมที่เร็วขึ้น ต้องขอบคุณการแคชที่เหนือกว่าของ Babel และสถาปัตยกรรมการปล่อยไฟล์เดียว ดังนั้น ถ้า Babel ถอดโค้ด TypeScript ออก จะมีประโยชน์อะไรในการเขียน TypeScript? นั่นนำเราไปสู่ข้อได้เปรียบที่สอง ... คุณกำลังแฮ็ครหัสร่วมกัน ทำลายโซลูชันอย่างรวดเร็วเพื่อดูว่าความคิดของคุณมีขาหรือไม่ คุณบันทึกไฟล์และ TypeScript กรีดร้องที่คุณ: ใช่คุณ ทราบ มันแตก. คุณอาจทำการทดสอบหน่วยผิดไปบ้างเช่นกัน แต่คุณกำลังทดลองอยู่ ณ จุดนี้ หมั่นตรวจสอบอย่างต่อเนื่อง ทั้งหมด รหัสของคุณเป็นประเภท safe ทั้งหมด เวลา. นี่เป็นข้อได้เปรียบประการที่สองของ Babel ในการตัดโค้ด TypeScript ออกระหว่างการรวบรวม คุณเขียนโค้ด บันทึก และคอมไพล์ (เร็วมาก) ปราศจาก ตรวจสอบความปลอดภัยประเภท ทำการทดลองกับโซลูชันของคุณต่อไปจนกว่าคุณจะพร้อมที่จะตรวจสอบโค้ดเพื่อหาข้อผิดพลาด เวิร์กโฟลว์นี้ช่วยให้คุณอยู่ในโซนขณะที่คุณกำลังเขียนโค้ด คุณจะตรวจสอบข้อผิดพลาดประเภทได้อย่างไร เพิ่มสคริปต์ตรวจสอบประเภทการรัน npm ที่เรียกใช้คอมไพเลอร์ TypeScript ฉันปรับแต่งคำสั่งการทดสอบ npm เพื่อตรวจสอบประเภทก่อนแล้วจึงทำการทดสอบหน่วยต่อไป ให้เป็นไปตาม โพสต์ประกาศ มีคุณลักษณะของ TypeScript สี่ประการที่ไม่ได้คอมไพล์ใน Babel เนื่องจากสถาปัตยกรรมการปล่อยไฟล์เดียว ไม่ต้องกังวลมันไม่เลวร้ายนัก และ TypeScript จะเตือนปัญหาเหล่านี้เมื่อเปิดใช้งานการตั้งค่าสถานะ isolatedModules 1) เนมสเปซ วิธีแก้ปัญหา: อย่าใช้มัน! พวกเขาล้าสมัย ใช้โมดูล ES6 มาตรฐานอุตสาหกรรม (นำเข้า / ส่งออก) แทน NS กฎ tslint ที่แนะนำ ตรวจสอบให้แน่ใจว่าเนมสเปซเป็น ไม่ ใช้แล้ว. 2) การแคสต์ประเภทด้วยไวยากรณ์ x วิธีแก้ไข: ใช้ x เป็นประเภทใหม่แทน 3) Enums ที่ครอบคลุมหลายการประกาศ (เช่น enum merges) ฉันไม่แน่ใจว่านี่คืออะไร ฉันค้นหาออนไลน์เพื่อรวม enum และไม่พบอะไรเลย ใครสามารถช่วย? โปรดแจ้งให้เราทราบในความคิดเห็น! 4) รูปแบบการนำเข้า / ส่งออกแบบเดิม ตัวอย่าง: import foo = require(...) และ export = foo. ตลอดหลายปีที่ผ่านมาของ TypeScriptin ฉันไม่เคยเจอสิ่งนี้ ใครเข้ารหัสด้วยวิธีนี้? หยุดนะ! เริ่มทำสิ่งนี้กัน! ควรใช้เวลาประมาณ 10 นาทีเท่านั้น ฉันสมมติว่าคุณมีการตั้งค่า Babel 7 ถ้าไม่ดู คู่มือการย้ายถิ่นของ Babel . 1) เปลี่ยนชื่อไฟล์ .js เป็น .ts สมมติว่าไฟล์ของคุณอยู่ใน /src: ค้นหา src -name '*.js' -exec sh -c 'mv '$0' '${0%.js}.ts'' {} ; 2) เพิ่ม TypeScript ให้กับ Babel การพึ่งพาเล็กน้อย: ในไฟล์กำหนดค่า Babel ของคุณ (.babelrc หรือ babel.config.js): TypeScript มีคุณสมบัติพิเศษสองสามอย่างที่ Babel ต้องการทราบ (ผ่านปลั๊กอินสองตัวที่ระบุไว้ด้านบน) Babel ค้นหาไฟล์ .js ตามค่าเริ่มต้น และน่าเศร้าที่ไฟล์กำหนดค่า Babel นี้ไม่สามารถกำหนดค่าได้ หากคุณใช้ Babel CLI ให้เพิ่ม --extensions '.ts' หากคุณใช้ Webpack ให้เพิ่ม 'ts' เพื่อแก้ไขอาร์เรย์ของส่วนขยาย 3) เพิ่มคำสั่ง 'check-types' ใน package.json: คำสั่งนี้เพียงเรียกใช้คอมไพเลอร์ TypeScript (tsc) tsc มาจากไหน? เราจำเป็นต้องติดตั้ง TypeScript: ในการกำหนดค่า TypeScript (และ tsc) เราจำเป็นต้องมีไฟล์ tsconfig.json ในไดเรกทอรีราก: เสร็จแล้ว. อืม ติดตั้ง เสร็จแล้ว ตอนนี้ให้รัน npm run check-types (โหมดดู: npm run check-types --watch) และตรวจสอบให้แน่ใจว่า TypeScript พอใจกับโค้ดของคุณ โอกาสที่คุณจะพบข้อบกพร่องบางอย่างที่คุณไม่ทราบว่ามีอยู่ นี้เป็นสิ่งที่ดี! NS กำลังย้ายจาก Javascript คู่มือจะช่วยที่นี่ Microsoft's TypeScript-Babel-Starter คู่มือประกอบด้วยคำแนะนำการตั้งค่าเพิ่มเติม รวมถึงการติดตั้ง Babel ตั้งแต่เริ่มต้น การสร้างไฟล์คำจำกัดความประเภท (d.ts) และการใช้งานกับ React มันเที่ยวยุ่งยิ่งเล็กน้อย แต่ก็ยังเป็นไปได้! อันดับแรก, อัปเกรดเป็น create-react-app v2.0 (เบต้า) . จากนั้นตั้งค่า react-app-rewired ซึ่งให้คุณแทนที่ส่วนต่างๆ ของการกำหนดค่าได้ และสุดท้าย ติดตั้งปลั๊กอินที่เดินสายใหม่นี้: react-app-rewire-typescript-babel-preset . ใช้ tslint . สร้างไฟล์ tslint.json ในไดเร็กทอรีรูท: ตั้งค่าคำสั่ง lint ในไฟล์ package.json: แค่นั้นแหละ! ตอนนี้เรียก npm run lint เพื่อพับโปรเจ็กต์ของคุณ หากคุณกำลังใช้ VS Code ให้ติดตั้ง vscode-tslint ส่วนขยายสำหรับเส้นหยักสีแดง ถ้าคุณใช้ สวยขึ้น หากต้องการจัดรูปแบบโค้ดของคุณโดยอัตโนมัติ ให้ใช้ต่อไป! มีการรองรับไฟล์ TypeScript ในตัว ผสานกับผ้าสำลีโดยใช้ tslint-config-prettier . หากคุณใช้ React คุณอาจสนุกกับกฎ React ที่จัดทำโดย tslint-react . หรือคุณสามารถเก็บ สลิง และใช้ typescript-eslint-parser กับ eslint-plugin-typescript เพื่อเพิ่มกฎ TypeScript ฉันยังไม่ได้ลองใช้ชุดค่าผสมนี้ โปรดแจ้งให้เราทราบในความคิดเห็นหากวิธีนี้ใช้ได้ผลดีกว่า tslint นอกจากนี้ยังมี สไตล์ Google TypeScript โปรเจ็กต์ที่รวม config linting และการจัดรูปแบบเป็นศูนย์ (เช่น Prettier แต่ใช้รูปแบบเสียงดังกราว) ฉันไม่ได้ลองสิ่งนี้และชอบที่จะทราบความคิดของคุณในความคิดเห็น Babel เป็นคอมไพเลอร์ JavaScript หนึ่งเดียวที่คุณต้องการ สามารถกำหนดค่าให้จัดการอะไรก็ได้ ไม่จำเป็นต้องต่อสู้กับคอมไพเลอร์ JavaScript ที่แข่งขันกันสองตัว ลดความซับซ้อนของการกำหนดค่าโครงการของคุณและใช้ประโยชน์จากการผสานรวมที่น่าทึ่งของ Babel กับ linters ตัวดำเนินการทดสอบ ระบบสร้าง และสำเร็จรูป คอมโบ Babel และ TypeScript นั้นคอมไพล์ได้เร็วมาก และให้คุณอยู่ในโซนตามที่คุณเขียนโค้ด และตรวจสอบประเภทเมื่อคุณพร้อมเท่านั้น ตามที่ล่าสุด แบบสำรวจนักพัฒนา Stack Overflow JavaScript เป็นภาษาที่ได้รับความนิยมมากที่สุด โดยมี TypeScript ต่อท้ายที่ #12 นี่ยังคงเป็นความสำเร็จที่ยอดเยี่ยมสำหรับ TypeScript ที่เอาชนะ Ruby, Swift และ Go ฉันคาดการณ์ว่า TypeScript จะแตก 10 อันดับแรกภายในปีหน้า คุณสามารถเริ่มต้นด้วย vanilla JavaScript และอัปเกรดเป็น TypeScript ได้อย่างง่ายดายหากต้องการ อุปสรรคในการเข้าได้ถูกทุบด้วยบาเบล ทีมงาน TypeScript กำลังทำงานอย่างหนักเพื่อเผยแพร่ความรัก พรีเซตของ Babel นี้เป็นการทำงานร่วมกันมาเป็นเวลาหนึ่งปีแล้ว และพวกเขาก็มีส่วนสนับสนุนอย่างมากต่อ typescript-eslint-parser ซึ่งอำนาจ สวยกว่า รองรับ TypeScript ด้วยความนิยมที่เพิ่มขึ้นของ รหัส VS นักพัฒนาซอฟต์แวร์ได้รับการตั้งค่าด้วยสภาพแวดล้อม TypeScript ที่น่าทึ่งแล้ว การเติมข้อความอัตโนมัติบนสเตียรอยด์จะทำให้น้ำตาไหล ก็ยัง มีแนวโน้มที่จะบูรณาการ เข้าไปข้างใน create-react-app ต้องขอบคุณการสนับสนุนจาก จาเร็ด พาลเมอร์ (ผู้สร้าง มด , Razzle , และ กระเป๋าเป้สะพายหลัง ). มี กำลังรอคำขอดึง และหากยอมรับ TypeScript จะทำให้ผู้ชมดาวน์โหลด 200,000 ครั้งต่อเดือน หากคุณเคยชินกับ TypeScript เนื่องจากตั้งค่าได้ยาก นี่ไม่ใช่ข้อแก้ตัวอีกต่อไป ถึงเวลาที่จะให้มันไป คุณกำลังไล่ตามทุกโอกาสที่คุณได้รับ เลื่อน… อ่าน… สดชื่น… การอ่านผ่านๆ คุณหายไปใน 42 แท็บเบราว์เซอร์ของบทความ บทช่วยสอน และที่เก็บ GitHub คุณคั่นหน้าไว้เพื่อเช็คเอาท์ในภายหลัง (หรือไม่เคยเลย) เผยแพร่โดย Matt Turnbull ที่ medium.com ========================================== ขอบคุณที่อ่าน :heart: ถ้าคุณชอบโพสต์นี้ แบ่งปันกับเพื่อนการเขียนโปรแกรมของคุณ! ติดตามผมได้ที่ Facebook | ทวิตเตอร์ ☞ Svelte.js - คู่มือฉบับสมบูรณ์ ☞ หลักสูตร JavaScript ฉบับสมบูรณ์ 2019: สร้างโครงการจริง! ☞ มาเป็นนักพัฒนา JavaScript - เรียนรู้ (React, Node, Angular) ☞ JavaScript: ทำความเข้าใจกับส่วนแปลก ๆ ☞ JavaScript: Coding Challenges Bootcamp - 2019 ☞ หลักสูตรนักพัฒนา Node.js ฉบับสมบูรณ์ (ฉบับที่ 3) ☞ Angular & NodeJS - The MEAN Stack Guide ☞ NodeJS - คู่มือฉบับสมบูรณ์ (รวมถึง MVC, REST API, GraphQL) ☞ Node.js Absolute Beginners Guide - เรียนรู้ Node From Scratch #javascript #reactjs #typescript TypeScript ไม่เคยง่ายอย่างนี้มาก่อนด้วยปลั๊กอิน TypeScript สำหรับ Babel(@babel/preset-typescript) ซึ่งเป็นการทำงานร่วมกันอย่างเป็นทางการตลอดทั้งปีระหว่างทีม TypeScript และ Babelฮะ? อะไร? ทำไม?
1) คุณใช้ Babel แล้ว (หรือควร)
เขียน JavaScript ที่ทันสมัยโดยไม่ทำลายสิ่งใด
'targets': { 'browsers': ['last 2 versions', 'safari >= 7'], 'node': '6.10' }
Babel สามารถกำหนดค่าได้ดีเยี่ยม
มาโคร!
2) ง่ายต่อการจัดการคอมไพเลอร์ ONE
ในวันที่มืดมน (ก่อนบาเบล 7)
วันที่มีแดดจ้า (กับ Babel 7)
3) คอมไพล์เร็วกว่า
4) อยู่ในโซนตามที่คุณเข้ารหัส
เลขที่! ฉันจะไม่รวบรวมสิ่งนี้! รหัสของคุณเสียใน 42 ไฟล์ที่แตกต่างกัน!
มันไม่ใช่การแต่งงานที่สมบูรณ์แบบ
ตกลง ฉันพร้อมที่จะลองใช้ TypeScript กับ Babel แล้ว!
npm install --save-dev @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
{ 'presets': [ '@babel/typescript' ], 'plugins': [ '@babel/proposal-class-properties', '@babel/proposal-object-rest-spread' ] }
'scripts': { 'check-types': 'tsc' }
npm install --save-dev typescript
{ 'compilerOptions': { // Target latest version of ECMAScript. 'target': 'esnext', // Search under node_modules for non-relative imports. 'moduleResolution': 'node', // Process & infer types from .js files. 'allowJs': true, // Don't emit; allow Babel to transform files. 'noEmit': true, // Enable strictest settings like strictNullChecks & noImplicitAny. 'strict': true, // Disallow features that require cross-file information for emit. 'isolatedModules': true, // Import non-ES modules as default imports. 'esModuleInterop': true }, 'include': [ 'src' ] }
ฉันใช้แอป create-react-app
สิ่งที่เกี่ยวกับผ้าสำลี?
npm install --save-dev tslint
{ 'defaultSeverity': 'error', 'extends': [ 'tslint:latest', ], 'jsRules': {}, 'rules': {}, 'rulesDirectory': [], 'linterOptions': { 'exclude': ['**/node_modules/**'] } }
'scripts': { 'lint': 'tslint '**/*.ts'' }
Babel + TypeScript = การแต่งงานที่สวยงาม
การคาดการณ์: TypeScript จะเพิ่มขึ้น
เป็นไปไม่ได้ที่จะติดตาม JavaScript
เรียนรู้เพิ่มเติม
medium.com
TypeScript กับ Babel: การแต่งงานที่สวยงาม
' '${0%.js}.ts'' {} ;
2) เพิ่ม TypeScript ให้กับ Babel
การพึ่งพาเล็กน้อย:
npm install --save-dev @babel/preset-typescript @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
ในไฟล์กำหนดค่า Babel ของคุณ (.babelrc หรือ babel.config.js):
{ 'presets': [ '@babel/typescript' ], 'plugins': [ '@babel/proposal-class-properties', '@babel/proposal-object-rest-spread' ] }
TypeScript มีคุณสมบัติพิเศษสองสามอย่างที่ Babel ต้องการทราบ (ผ่านปลั๊กอินสองตัวที่ระบุไว้ด้านบน)
Babel ค้นหาไฟล์ .js ตามค่าเริ่มต้น และน่าเศร้าที่ไฟล์กำหนดค่า Babel นี้ไม่สามารถกำหนดค่าได้
หากคุณใช้ Babel CLI ให้เพิ่ม --extensions '.ts'
หากคุณใช้ Webpack ให้เพิ่ม 'ts' เพื่อแก้ไขอาร์เรย์ของส่วนขยาย
3) เพิ่มคำสั่ง 'check-types'
ใน package.json:
'scripts': { 'check-types': 'tsc' }
คำสั่งนี้เพียงเรียกใช้คอมไพเลอร์ TypeScript (tsc)
tsc มาจากไหน? เราจำเป็นต้องติดตั้ง TypeScript:
npm install --save-dev typescript
ในการกำหนดค่า TypeScript (และ tsc) เราจำเป็นต้องมีไฟล์ tsconfig.json ในไดเรกทอรีราก:
{ 'compilerOptions': { // Target latest version of ECMAScript. 'target': 'esnext', // Search under node_modules for non-relative imports. 'moduleResolution': 'node', // Process & infer types from .js files. 'allowJs': true, // Don't emit; allow Babel to transform files. 'noEmit': true, // Enable strictest settings like strictNullChecks & noImplicitAny. 'strict': true, // Disallow features that require cross-file information for emit. 'isolatedModules': true, // Import non-ES modules as default imports. 'esModuleInterop': true }, 'include': [ 'src' ] }
เสร็จแล้ว.
อืม ติดตั้ง เสร็จแล้ว ตอนนี้ให้รัน npm run check-types (โหมดดู: npm run check-types --watch) และตรวจสอบให้แน่ใจว่า TypeScript พอใจกับโค้ดของคุณ โอกาสที่คุณจะพบข้อบกพร่องบางอย่างที่คุณไม่ทราบว่ามีอยู่ นี้เป็นสิ่งที่ดี! NS กำลังย้ายจาก Javascript คู่มือจะช่วยที่นี่
Microsoft's TypeScript-Babel-Starter คู่มือประกอบด้วยคำแนะนำการตั้งค่าเพิ่มเติม รวมถึงการติดตั้ง Babel ตั้งแต่เริ่มต้น การสร้างไฟล์คำจำกัดความประเภท (d.ts) และการใช้งานกับ React
ฉันใช้แอป create-react-app
มันเที่ยวยุ่งยิ่งเล็กน้อย แต่ก็ยังเป็นไปได้! อันดับแรก, อัปเกรดเป็น create-react-app v2.0 (เบต้า) . จากนั้นตั้งค่า react-app-rewired ซึ่งให้คุณแทนที่ส่วนต่างๆ ของการกำหนดค่าได้ และสุดท้าย ติดตั้งปลั๊กอินที่เดินสายใหม่นี้: react-app-rewire-typescript-babel-preset .
สิ่งที่เกี่ยวกับผ้าสำลี?
ใช้ tslint .
npm install --save-dev tslint
สร้างไฟล์ tslint.json ในไดเร็กทอรีรูท:
{ 'defaultSeverity': 'error', 'extends': [ 'tslint:latest', ], 'jsRules': {}, 'rules': {}, 'rulesDirectory': [], 'linterOptions': { 'exclude': ['**/node_modules/**'] } }
ตั้งค่าคำสั่ง lint ในไฟล์ package.json:
'scripts': { 'lint': 'tslint '**/*.ts'' }
แค่นั้นแหละ! ตอนนี้เรียก npm run lint เพื่อพับโปรเจ็กต์ของคุณ หากคุณกำลังใช้ VS Code ให้ติดตั้ง vscode-tslint ส่วนขยายสำหรับเส้นหยักสีแดง
ถ้าคุณใช้ สวยขึ้น หากต้องการจัดรูปแบบโค้ดของคุณโดยอัตโนมัติ ให้ใช้ต่อไป! มีการรองรับไฟล์ TypeScript ในตัว ผสานกับผ้าสำลีโดยใช้ tslint-config-prettier .
หากคุณใช้ React คุณอาจสนุกกับกฎ React ที่จัดทำโดย tslint-react .
หรือคุณสามารถเก็บ สลิง และใช้ typescript-eslint-parser กับ eslint-plugin-typescript เพื่อเพิ่มกฎ TypeScript ฉันยังไม่ได้ลองใช้ชุดค่าผสมนี้ โปรดแจ้งให้เราทราบในความคิดเห็นหากวิธีนี้ใช้ได้ผลดีกว่า tslint
นอกจากนี้ยังมี สไตล์ Google TypeScript โปรเจ็กต์ที่รวม config linting และการจัดรูปแบบเป็นศูนย์ (เช่น Prettier แต่ใช้รูปแบบเสียงดังกราว) ฉันไม่ได้ลองสิ่งนี้และชอบที่จะทราบความคิดของคุณในความคิดเห็น
Babel + TypeScript = การแต่งงานที่สวยงาม
Babel เป็นคอมไพเลอร์ JavaScript หนึ่งเดียวที่คุณต้องการ สามารถกำหนดค่าให้จัดการอะไรก็ได้
ไม่จำเป็นต้องต่อสู้กับคอมไพเลอร์ JavaScript ที่แข่งขันกันสองตัว ลดความซับซ้อนของการกำหนดค่าโครงการของคุณและใช้ประโยชน์จากการผสานรวมที่น่าทึ่งของ Babel กับ linters ตัวดำเนินการทดสอบ ระบบสร้าง และสำเร็จรูป
คอมโบ Babel และ TypeScript นั้นคอมไพล์ได้เร็วมาก และให้คุณอยู่ในโซนตามที่คุณเขียนโค้ด และตรวจสอบประเภทเมื่อคุณพร้อมเท่านั้น
การคาดการณ์: TypeScript จะเพิ่มขึ้น
ตามที่ล่าสุด แบบสำรวจนักพัฒนา Stack Overflow JavaScript เป็นภาษาที่ได้รับความนิยมมากที่สุด โดยมี TypeScript ต่อท้ายที่ #12 นี่ยังคงเป็นความสำเร็จที่ยอดเยี่ยมสำหรับ TypeScript ที่เอาชนะ Ruby, Swift และ Go
ฉันคาดการณ์ว่า TypeScript จะแตก 10 อันดับแรกภายในปีหน้า
คุณสามารถเริ่มต้นด้วย vanilla JavaScript และอัปเกรดเป็น TypeScript ได้อย่างง่ายดายหากต้องการ อุปสรรคในการเข้าได้ถูกทุบด้วยบาเบล
ทีมงาน TypeScript กำลังทำงานอย่างหนักเพื่อเผยแพร่ความรัก พรีเซตของ Babel นี้เป็นการทำงานร่วมกันมาเป็นเวลาหนึ่งปีแล้ว และพวกเขาก็มีส่วนสนับสนุนอย่างมากต่อ typescript-eslint-parser ซึ่งอำนาจ สวยกว่า รองรับ TypeScript
ด้วยความนิยมที่เพิ่มขึ้นของ รหัส VS นักพัฒนาซอฟต์แวร์ได้รับการตั้งค่าด้วยสภาพแวดล้อม TypeScript ที่น่าทึ่งแล้ว การเติมข้อความอัตโนมัติบนสเตียรอยด์จะทำให้น้ำตาไหล
ก็ยัง มีแนวโน้มที่จะบูรณาการ เข้าไปข้างใน create-react-app ต้องขอบคุณการสนับสนุนจาก จาเร็ด พาลเมอร์ (ผู้สร้าง มด , Razzle , และ กระเป๋าเป้สะพายหลัง ). มี กำลังรอคำขอดึง และหากยอมรับ TypeScript จะทำให้ผู้ชมดาวน์โหลด 200,000 ครั้งต่อเดือน
หากคุณเคยชินกับ TypeScript เนื่องจากตั้งค่าได้ยาก นี่ไม่ใช่ข้อแก้ตัวอีกต่อไป ถึงเวลาที่จะให้มันไป
lunyr (ลูน)
เป็นไปไม่ได้ที่จะติดตาม JavaScript
คุณกำลังไล่ตามทุกโอกาสที่คุณได้รับ เลื่อน… อ่าน… สดชื่น… การอ่านผ่านๆ คุณหายไปใน 42 แท็บเบราว์เซอร์ของบทความ บทช่วยสอน และที่เก็บ GitHub คุณคั่นหน้าไว้เพื่อเช็คเอาท์ในภายหลัง (หรือไม่เคยเลย)
เผยแพร่โดย Matt Turnbull ที่ medium.com
==========================================
ขอบคุณที่อ่าน :heart: ถ้าคุณชอบโพสต์นี้ แบ่งปันกับเพื่อนการเขียนโปรแกรมของคุณ! ติดตามผมได้ที่ Facebook | ทวิตเตอร์
เรียนรู้เพิ่มเติม
☞ Svelte.js - คู่มือฉบับสมบูรณ์
☞ หลักสูตร JavaScript ฉบับสมบูรณ์ 2019: สร้างโครงการจริง!
☞ มาเป็นนักพัฒนา JavaScript - เรียนรู้ (React, Node, Angular)
☞ JavaScript: ทำความเข้าใจกับส่วนแปลก ๆ
☞ JavaScript: Coding Challenges Bootcamp - 2019
☞ หลักสูตรนักพัฒนา Node.js ฉบับสมบูรณ์ (ฉบับที่ 3)
☞ Angular & NodeJS - The MEAN Stack Guide
☞ NodeJS - คู่มือฉบับสมบูรณ์ (รวมถึง MVC, REST API, GraphQL)
☞ Node.js Absolute Beginners Guide - เรียนรู้ Node From Scratch
#javascript #reactjs #typescript
medium.com
TypeScript กับ Babel: การแต่งงานที่สวยงาม
TypeScript ไม่เคยง่ายอย่างนี้มาก่อนด้วยปลั๊กอิน TypeScript สำหรับ Babel(@babel/preset-typescript) ซึ่งเป็นการทำงานร่วมกันอย่างเป็นทางการตลอดทั้งปีระหว่างทีม TypeScript และ Babel