Angular Academy · บทเรียน

API สาธารณะและจุดนำเข้า

ออกแบบส่วนติดต่อไลบรารีที่สะอาดและเป็นระเบียบ

API สาธารณะและจุดนำเข้า เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

พื้นผิว API สาธารณะ

ไลบรารีควรเปิดเผยเฉพาะสิ่งที่ผู้ใช้มีไว้ใช้งานเท่านั้น API สาธารณะ คือชุดการส่งออกที่คัดสรรแล้ว ส่วนอื่นทั้งหมดจะเก็บไว้ภายใน สำหรับไลบรารี Angular พื้นผิวนี้กำหนดโดย public-api.ts

public-api.ts ในฐานะบาร์เรล

public-api.ts จะส่งออกสัญลักษณ์ที่ต้องการให้ผู้ใช้เข้าถึงอีกครั้ง หากไม่ได้ส่งออกสิ่งใดผ่านไฟล์นี้ สิ่งนั้นจะถือว่าเป็นส่วนตัวโดยพฤตินัย แม้ว่าจะมีอยู่ในซอร์สก็ตาม

// projects/ui-kit/src/public-api.ts
export * from './lib/button/button.component';
export * from './lib/theme.service';
// internal helpers are intentionally NOT exported

เหตุผลที่ควรซ่อนส่วนภายใน

การเก็บตัวช่วยไว้เป็นส่วนตัวทำให้คุณปรับโครงสร้างได้อย่างอิสระโดยไม่ทำให้ผู้ใช้เสียหาย API สาธารณะที่มีขนาดเล็กและออกแบบอย่างตั้งใจจะจัดทำเอกสาร กำกับรุ่น และดูแลรักษาได้ง่ายกว่าการส่งออกทุกอย่าง

การส่งออกชนิดข้อมูลและโทเค็น

API สาธารณะไม่ได้มีเพียงคอมโพเนนต์ แต่ยังรวมถึงอินเทอร์เฟซ ชนิดข้อมูล และโทเค็นการฉีดที่ผู้ใช้จำเป็นต้องใช้คอมโพเนนต์เหล่านั้นอย่างถูกต้อง

export { ButtonComponent } from './lib/button/button.component';
export type { ButtonVariant } from './lib/button/button.types';
export { THEME_CONFIG } from './lib/theme.tokens';

จุดนำเข้ารอง

ไลบรารีขนาดใหญ่จะแบ่งออกเป็น จุดนำเข้ารอง เพื่อให้ผู้ใช้นำเข้าเฉพาะสิ่งที่ต้องการเท่านั้น (ช่วยตัดโค้ดที่ไม่ได้ใช้ได้ดีขึ้น) ตัวอย่างเช่น ui-kit/testing แยกจาก ui-kit

import { ButtonComponent } from 'ui-kit';
import { provideUiKitTesting } from 'ui-kit/testing';

การสร้างจุดนำเข้ารอง

จุดนำเข้ารองคือโฟลเดอร์ย่อยที่มี ng-package.json และ public-api.ts ของตัวเอง ng-packagr จะค้นพบจุดนี้โดยอัตโนมัติและสร้างเป็นเส้นทางการนำเข้าแยกต่างหาก

projects/ui-kit/
  testing/
    ng-package.json   # marks a secondary entry point
    src/public-api.ts

การกำหนดจุดนำเข้าหลัก

ng-package.json ของไลบรารีจะชี้ entryFile ไปยัง public-api.ts เพื่อบอกกระบวนการสร้างว่าไฟล์ใดคือพื้นผิวสาธารณะหลัก

// projects/ui-kit/ng-package.json
{
  "lib": { "entryFile": "src/public-api.ts" }
}

การออกแบบเพื่อความเสถียร

ถือว่า API สาธารณะเป็นสัญญา การลบหรือเปลี่ยนชื่อสิ่งที่ส่งออกถือเป็นการเปลี่ยนแปลงที่ทำให้ใช้งานร่วมกันไม่ได้ คุณสามารถเพิ่มสิ่งที่ส่งออกใหม่ได้อย่างอิสระ แต่ควรทำเครื่องหมายว่าเลิกใช้ก่อนลบ เพื่อให้ผู้ใช้มีเวลาย้ายการใช้งาน

หลีกเลี่ยงการนำเข้าแบบเจาะลึก

เนื่องจากมีเพียง public-api.ts ที่เป็นสัญญา ผู้ใช้จึงไม่ควรนำเข้าเส้นทางภายในแบบเจาะลึก เช่น ui-kit/lib/button/internal การส่งออกผ่านบาร์เรลช่วยให้มีพื้นผิวการนำเข้าที่เสถียรเพียงจุดเดียว

การส่งออกชนิดข้อมูลจากแพ็กเกจภายนอกอีกครั้ง

หากเมธอด API ของคุณส่งคืนชนิดข้อมูลจากแพ็กเกจอื่น ให้ส่งออกชนิดข้อมูลนั้นอีกครั้ง เพื่อให้ผู้ใช้ไม่ต้องเพิ่มการพึ่งพาแยกต่างหากเพียงเพื่ออ้างชื่อชนิดข้อมูล วิธีนี้ทำให้พื้นผิวสาธารณะใช้งานได้ครบด้วยตัวเอง

การจัดทำเอกสารสำหรับพื้นผิวสาธารณะ

เพิ่มความคิดเห็น JSDoc ให้กับสัญลักษณ์ที่ส่งออก เนื่องจากผู้ใช้จะมองเห็นเฉพาะรายการใน public-api การจัดทำเอกสารให้รายการเหล่านี้จึงช่วยให้ผู้ใช้ได้รับ IntelliSense และคำแนะนำการใช้งานที่ชัดเจน

ตรวจสอบความเข้าใจอย่างรวดเร็ว

สิ่งใดเป็นตัวกำหนดว่าผู้ใช้สามารถนำเข้าอะไรได้บ้าง

สรุปทบทวน

API สาธารณะได้รับการคัดสรรใน public-api.ts ซึ่งส่งออกคอมโพเนนต์ ชนิดข้อมูล และโทเค็นอีกครั้ง ส่วนอื่นทั้งหมดจะเป็นส่วนตัวและปรับโครงสร้างได้ ใช้จุดนำเข้ารองสำหรับไลบรารีขนาดใหญ่ ชี้ ng-package.json ไปยังไฟล์นำเข้า หลีกเลี่ยงการนำเข้าแบบเจาะลึก และถือว่าพื้นผิวนี้เป็นสัญญาที่เสถียรและมีเอกสารกำกับ

คำถามที่พบบ่อย

บทเรียน “API สาธารณะและจุดนำเข้า” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “API สาธารณะและจุดนำเข้า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “API สาธารณะและจุดนำเข้า”

ออกแบบส่วนติดต่อไลบรารีที่สะอาดและเป็นระเบียบ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “API สาธารณะและจุดนำเข้า” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy