เมื่อใดจึงควรใช้ส่วนต่อประสานและรุ่นใน TypeScript / Angular2

198

ฉันเพิ่งดูการสอนเกี่ยวกับ Angular 2 กับ TypeScript แต่ไม่แน่ใจว่าเมื่อใดที่จะใช้อินเทอร์เฟซและเมื่อใช้โมเดลเพื่อเก็บโครงสร้างข้อมูล

ตัวอย่างของอินเทอร์เฟซ:

export interface IProduct {
    ProductNumber: number;
    ProductName: string;
    ProductDescription: string;
}

ตัวอย่างของโมเดล:

export class Product {
    constructor(
        public ProductNumber: number,
        public ProductName: string,
        public ProductDescription: string
    ){}
}

ฉันต้องการโหลดข้อมูล JSON จาก URL และผูกไว้กับส่วนต่อประสาน / โมเดล บางครั้งฉันต้องการวัตถุข้อมูลเดียวเวลาอื่นฉันต้องการเก็บและอาร์เรย์ของวัตถุ

ฉันควรใช้อันไหนและเพราะอะไร

angular typescript

— I_LIKE_FOO
แหล่งที่มา

14

ใช้คลาสเมื่อคุณต้องการ init ลอจิกแบบกำหนดเองมิฉะนั้นจะใช้อินเทอร์เฟซเนื่องจากจะมีให้เฉพาะในเวลารวบรวม อินเทอร์เฟซ typescript ไม่ได้ถูกคอมไพล์ไปยัง javascript เนื่องจากไม่มีอยู่ใน javascript

— Dieterg

6

โปรดทราบว่าอินเทอร์เฟซจะไม่ทำงานกับการฉีดพึ่งพาใน Angular 2 ที่นี่คุณจะต้องใช้คลาส

— 2560

137

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

this.http.get('...')
    .map(res => <Product[]>res.json());

ดูคำถามเหล่านี้:

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

this.http.get('...')
    .map(res => {
      var data = res.json();
      return data.map(d => {
        return new Product(d.productNumber,
          d.productName, d.productDescription);
      });
    });

— Thierry Templier
แหล่งที่มา

27

ขอบคุณสำหรับคำตอบโดยละเอียดของคุณ หากอินเตอร์เฟสถูกใช้ในเวลาคอมไพล์เท่านั้นคอมไพเลอร์จะตรวจสอบโครงสร้างของไฟล์ JSON โดยไม่ตรวจสอบ http get ได้อย่างไร? หากไม่สามารถทำได้สิ่งที่เป็นจุดรบกวนของอินเทอร์เฟซคืออะไร

— I_LIKE_FOO

7

@I_LIKE_FOO คอมไพเลอร์ไม่จำเป็นต้องตรวจสอบการโทร เพียงแค่ใส่ใจในการตรวจสอบประเภทที่รู้และจัดเรียงไว้อย่างถูกต้อง var data = res.json();มันจะคอมไพเลอร์เพื่อให้เราสูญเสียทุกประเภทการตรวจสอบในvar data: any = res.json(); dataสิ่งที่จะมีประโยชน์มากขึ้นที่นี่จะเป็นสิ่งที่ต้องการvar data: ProductDto[] = res.json();ด้วยProductDtoการเป็นส่วนต่อประสานที่โมเดลโครงสร้างข้อมูลใน json กลับ

— GFoley83

3

เพิ่มเติม: Angular style guide says not to use interfaces.Always use classes.ดูangular.io/guide/styleguide#style-03-03

— Sampath

4

ใช่ แต่ปัญหาคือพวกเขาไม่ใช่เทพผู้ปรมาจารย์ที่ได้รับการออกแบบให้พิมพ์ดีด นั่นจะเป็น Microsoft และ บริษัท พวกเขามักจะชอบอินเตอร์เฟสและคลาสเมื่อเหมาะสม นอกจากนี้คะแนนโบนัส ... อีกอย่างหนึ่งคือเวลาทำงานและอีกอย่างรวมอยู่ด้วย

— Tom Stickel

11

@Sampath บางทีคู่มือสไตล์เชิงมุมได้รับการอัปเดตเมื่อฉันเห็น "พิจารณาใช้ส่วนต่อประสานสำหรับแบบจำลองข้อมูล" โดยนัยต้องการอินเตอร์เฟสมากกว่าคลาสสำหรับตัวแบบข้อมูล

— Mikezx6r

40

อินเตอร์เฟซอธิบายทั้งสัญญาสำหรับระดับหรือใหม่ประเภท มันเป็นองค์ประกอบของ typescript แท้ๆดังนั้นจึงไม่มีผลกับ Javascript

โมเดลและคลาสคือฟังก์ชัน JS จริงซึ่งใช้เพื่อสร้างวัตถุใหม่

ฉันต้องการโหลดข้อมูล JSON จาก URL และผูกไว้กับส่วนต่อประสาน / โมเดล

ใช้เป็นโมเดลมิฉะนั้นจะยังคงเป็น JSON ใน Javascript ของคุณ

— pietro909
แหล่งที่มา

4

ดังที่ @ThierryTemplier กล่าวว่าสำหรับการรับข้อมูลจากเซิร์ฟเวอร์และการส่งรูปแบบระหว่างส่วนประกอบ (เพื่อเก็บรายการภายในและทำให้เกิดข้อผิดพลาดในการออกแบบเวลา) มันก็ดีที่จะใช้อินเตอร์เฟส แต่ฉันคิดว่าการส่งข้อมูลไปยังเซิร์ฟเวอร์ (DTO) ข้อดีของการทำแผนที่อัตโนมัติ DTO จากรุ่น

— M_Farahmand
แหล่งที่มา

-22

ใช้ Class แทน Interfaceนั่นคือสิ่งที่ฉันค้นพบหลังจากการวิจัยทั้งหมดของฉัน

ทำไม? คลาสเพียงอย่างเดียวนั้นมีโค้ดน้อยกว่าคลาส -plus-interface (อย่างไรก็ตามคุณอาจต้องการคลาสสำหรับโมเดลข้อมูล)

ทำไม? คลาสสามารถทำหน้าที่เป็นอินเทอร์เฟซ (ใช้เครื่องมือแทนการขยาย)

ทำไม? อินเตอร์เฟสคลาสสามารถเป็นโทเค็นการค้นหาของผู้ให้บริการในการฉีดแบบพึ่งพาเชิงมุม

จาก Guide Style เชิงมุม

โดยพื้นฐานแล้ว Class สามารถทำทุกอย่างได้สิ่งที่ Interface จะทำ ดังนั้นอาจไม่จำเป็นต้องใช้การเชื่อมต่อ

— Sajith Mantharath
แหล่งที่มา

10

ขณะนี้คู่มือสไตล์เชิงมุมพูดว่า " ลองใช้ส่วนต่อประสานสำหรับแบบจำลองข้อมูล ”

— อเล็กซ์ปีเตอร์ส

@AlexPeters โปรดระบุลิงก์ที่แท้จริง ขอบคุณล่วงหน้า

— Anand Phadke

@ AnandPhadke แน่ใจว่านี่คือลิงค์ของWayback Machineไปยัง Angular Style Guide จากประมาณเวลาที่ความคิดเห็นของฉันด้านบน

— Alex Peters