Javascript xây dựng công cộng

Rốt cuộc, chúng là các khối xây dựng để thêm kiểm tra thời gian biên dịch tĩnh vào mã của bạn và chúng đảm bảo bạn đang sử dụng hợp lý các loại tập thể/tùy chỉnh mà bạn xác định trong mã của mình

Cú pháp giao diện rất đơn giản và các giao diện mang lại nhiều lợi thế khi được sử dụng trong mã của bạn, chẳng hạn như

• Tạo các thông báo lỗi đơn giản, dễ hiểu
• Đôi khi biên dịch nhanh hơn định nghĩa

  let computer = new Greeter("world");         // Hello world
  let farewell = new Greeter("and goodbye!");  // Hello and goodbye!
  

  6
• Được cộng đồng TypeScript sử dụng nhiều, vì vậy chúng là phương pháp hay nhất phổ biến, (tài liệu TypeScript cũng sử dụng chúng rất nhiều)
• Nhóm TypeScript cũng xác nhận các giao diện. Daniel Rosenwasser, người quản lý chương trình của TypeScript, đã chứng thực các giao diện trên

  let computer = new Greeter("world");         // Hello world
  let farewell = new Greeter("and goodbye!");  // Hello and goodbye!
  

  6

Hãy cùng tìm hiểu thêm về hàm tạo và cách chúng ta sẽ sử dụng hàm tạo trong giao diện

nhà xây dựng

Trình xây dựng cũng là một tính năng mã được sử dụng nhiều trong các cơ sở mã TypeScript

Các tài liệu TypeScript có một ví dụ tuyệt vời về cách sử dụng hàm tạo

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}

let greeter = new Greeter("world");

Các nhà xây dựng về cơ bản cho phép tạo các đối tượng từ các lớp

Các lớp hoạt động giống như một bản thiết kế để nhập các đối tượng bạn tạo với các thuộc tính và phương thức cần thiết

Constructor tiêm phụ thuộc

Các nhà xây dựng thường sử dụng một kỹ thuật mã được gọi là nội xạ phụ thuộc - đó là chìa khóa để tận dụng tối đa tiềm năng của chúng

Đây là nơi các phụ thuộc cần thiết cho đối tượng mà chúng ta sẽ tạo được chuyển vào hàm tạo

Trong ví dụ trên, chúng ta thấy chúng ta chuyển đối số

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

1 vào hàm tạo để cho phép tùy chỉnh duy nhất đối tượng

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

Khả năng cho cùng một lớp (lớp

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

2) cung cấp các kết quả khác nhau từ một lệnh gọi phương thức thường được gọi là tính đa hình

Nhiều hàm tạo

Điều quan trọng cuối cùng cần nhớ khi sử dụng hàm tạo là bạn không thể sử dụng nhiều cách triển khai hàm tạo — giống như bạn có thể làm trong các ngôn ngữ hướng đối tượng khác

An sẽ như vậy

class Animal {

  constructor() {
  }

  constructor() {
  }
}

Đoạn mã trên sẽ không biên dịch và ghi lại lỗi

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

3

Nếu bạn cần sử dụng nhiều hàm tạo để cung cấp các chức năng khác nhau từ một lớp cơ sở, thì có nhiều cách để thực hiện việc này, nhưng bạn chỉ có thể sử dụng một cách triển khai

Nếu bạn cần các hàm tạo khác nhau — tuy nhiên, có nhiều cách để giải quyết vấn đề này, bạn có thể nhập nhiều hàm tạo — bạn không thể triển khai chúng

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Một ví dụ trong thế giới thực sẽ giống như

class DemoClassTest {
  constructor(x : string, y:string);
  constructor(x : number);
  constructor(x : number, y:string, z:string);
  constructor(...myarray: any[]) {

    if (myarray.length === 2) {
      console.log('two argument constructor called here !!');
      return;
    }
    if (myarray.length === 3) {
      console.log('three argument constructor called here !!');
      return;
    }
    if (myarray.length === 1) {
        console.log('one argument constructor called here !!');
        return;
      }
  }
}
let a = new DemoClassTest('hello', 'bye');
let b = new DemoClassTest(1);
let c = new DemoClassTest(100, 'str1', 'str2');

Sử dụng hàm tạo trên giao diện

Chúng tôi đã thảo luận về các trường hợp sử dụng phổ biến hơn để sử dụng hàm tạo, nhưng chức năng của chúng không kết thúc ở đó

Đôi khi, như một phần của mẫu thiết kế hoặc đối với một số trường hợp sử dụng nhất định, nhà phát triển có thể muốn tạo cụ thể một biến thể hiện từ một giao diện

Một ví dụ đơn giản về giao diện mà chúng ta có thể muốn xây dựng có thể là

interface Animal {
  numLegs: number,
  wings: boolean
}

Nhưng làm thế nào chúng ta thêm một hàm tạo vào loại này thì không rõ ràng

Khó hiểu hơn nữa, trong JavaScript được biên dịch, giao diện thậm chí sẽ không tồn tại. Nó chỉ tồn tại để kiểm tra các loại của chúng tôi và sau đó sẽ là nhờ một quá trình gọi là xóa loại

Vì vậy, hãy bắt đầu với a và giải nó lặp đi lặp lại

________số 8

Lỗi chúng tôi hiện đang gặp phải là

- Class 'ConfigClass' incorrectly implements interface 'InterfaceWithConsturctor'.
- Types of property 'constructor' are incompatible.
- Type 'Function' is not assignable to type '(config: string) => { config: string; }'.
- Type 'Function' provides no match for the signature '(config: string): { config: string; }'.

Mặc dù hai hàm tạo của chúng ta khớp nhau (trong giao diện so với trong lớp triển khai giao diện), nó vẫn báo lỗi và không biên dịch được

Bạn có thể thấy trong hai mã ví dụ rằng chúng đang sử dụng cùng một loại và, nhìn bề ngoài, sẽ biên dịch tốt

Thêm một hàm tạo vào giao diện TypeScript

Bao gồm một ví dụ bao gồm kịch bản chính xác này

Các ví dụ trước của chúng tôi không thành công vì theo các tài liệu, “khi một lớp triển khai một giao diện, chỉ phần thể hiện của lớp được kiểm tra. Bởi vì hàm tạo nằm ở phía tĩnh, nên nó không được đưa vào kiểm tra này. ”

Điều này nghe thật kỳ lạ, nhưng về cơ bản nó có nghĩa là

Theo phương pháp loại đối tượng, chúng ta đang đề cập đến một hàm “bình thường” sẽ được gọi với

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

4 tồn tại trên đối tượng, là kết quả của việc sử dụng từ khóa

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

5. Hàm tạo thực sự thuộc về kiểu tĩnh

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

Trong trường hợp này, kiểu tĩnh có nghĩa là kiểu mà nó thuộc về, mà không khởi tạo nó, e. g. ,

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

6

Để khắc phục điều này, chúng ta cần tạo hai giao diện. một cho các phương thức/thuộc tính kiểu tĩnh và một cho các phương thức kiểu cá thể

Ví dụ của chúng tôi, lấy cảm hứng từ trưởng nhóm kỹ thuật của TypeScript, trông như thế này

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

3

Điều này bây giờ đăng nhập như

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

7

Lợi ích khi sử dụng các hàm tạo giao diện TypeScript

Bằng cách sử dụng tính năng ngôn ngữ này, bạn có thể tạo nhiều đối tượng có thể kết hợp hơn mà không dựa vào tính kế thừa để chia sẻ mã

Với một hàm tạo trên giao diện, bạn có thể chỉ định rằng tất cả các loại của bạn phải có các phương thức/thuộc tính nhất định (tuân thủ giao diện thông thường) nhưng cũng có thể kiểm soát cách các loại được tạo bằng cách nhập giao diện giống như bạn làm với bất kỳ phương thức/thuộc tính nào khác

Chúng tôi đang dựa vào sự trừu tượng hơn là sự cụ thể hóa. Có từ cũ để làm nổi bật điều này

Các tài liệu cũ vẫn hợp lệ TypeScript và chúng là một ví dụ thực sự rõ ràng về những gì chúng ta đang thảo luận – vì vậy tôi đã giữ nguyên URL cũ để làm rõ

let computer = new Greeter("world");         // Hello world
let farewell = new Greeter("and goodbye!");  // Hello and goodbye!

5

Ở đây, chúng tôi đang tạo một hàm xây dựng được nhập đúng với các đối số mà chúng tôi cần các lớp khác sử dụng, nhưng đồng thời, cho phép nó đủ chung chung để phù hợp với nhiều trường hợp sử dụng

Nó cũng đảm bảo rằng chúng tôi đang duy trì mức độ liên kết thấp, sự gắn kết cao trong mã của chúng tôi

Phần kết luận

Tôi hy vọng điều này đã giải thích không chỉ cách thêm một hàm tạo vào một giao diện, mà còn giải thích một số trường hợp sử dụng phổ biến về thời điểm và lý do có thể được thực hiện, cũng như cú pháp về cách bạn có thể đạt được nó

Một điều khá phổ biến là các tài liệu thậm chí còn giải thích cách tiếp cận cơ bản và thật hữu ích khi hiểu được hai mặt của phạm vi tĩnh so với phiên bản trong thế giới JavaScript/TypeScript cơ bản

Đăng NhậpTên Lửa. Khả năng hiển thị đầy đủ vào web và ứng dụng dành cho thiết bị di động của bạn

LogRocket là một giải pháp giám sát ứng dụng giao diện người dùng cho phép bạn phát lại các sự cố như thể chúng đã xảy ra trong trình duyệt của chính bạn. Thay vì đoán tại sao xảy ra lỗi hoặc yêu cầu người dùng chụp ảnh màn hình và kết xuất nhật ký, LogRocket cho phép bạn phát lại phiên để nhanh chóng hiểu điều gì đã xảy ra. Nó hoạt động hoàn hảo với bất kỳ ứng dụng nào, bất kể khung công tác nào và có các plugin để ghi lại ngữ cảnh bổ sung từ Redux, Vuex và @ngrx/store

Ngoài việc ghi nhật ký các hành động và trạng thái Redux, LogRocket còn ghi nhật ký bảng điều khiển, lỗi JavaScript, dấu vết ngăn xếp, yêu cầu/phản hồi mạng với tiêu đề + nội dung, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Nó cũng cung cấp công cụ cho DOM để ghi lại HTML và CSS trên trang, tạo lại các video hoàn hảo về pixel của ngay cả các ứng dụng dành cho thiết bị di động và trang đơn phức tạp nhất

Một nhà xây dựng công cộng là gì?

Chúng ta có thể công khai một hàm tạo không?

JavaScript phương thức công khai là gì?

CHÚNG TÔI CÓ THỂ công khai hàm tạo trong Java không?