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
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ố 8Lỗ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