TypeScript hỗ trợ các loại tùy chỉnh, có thể được xác định bằng cách sử dụng “ giao diện ' hoặc ' kiểu ”. Một giao diện có thể được triển khai bởi một lớp hoặc một đối tượng, trong khi một bí danh kiểu chỉ có thể được sử dụng để tạo một tên mới cho một kiểu hiện có hoặc để xác định một liên kết các kiểu. Mặc dù các loại và giao diện thường có thể hoán đổi cho nhau, nhưng có một số khác biệt nhất định về chức năng và cú pháp khiến chúng phù hợp hơn cho các tình huống cụ thể.
Blog này sẽ mô tả giao diện và kiểu TypeScript cũng như sự khác biệt của chúng.
Giao diện TypeScript so với Loại là gì?
“ giao diện ' Và ' kiểu ” được sử dụng để xác định các loại tùy chỉnh trong TypeScript. Nhưng có một số khác biệt trong chức năng và cú pháp của họ. Sự khác biệt chính giữa giao diện và loại là giao diện xác định loại mới, trong khi bí danh loại thì không.
Một giao diện có thể được triển khai bởi một lớp hoặc một đối tượng, trong khi các kiểu có thể xác định các kiểu phức tạp hơn bằng cách sử dụng các tính năng như hợp nhất và giao điểm. Nói chung, các giao diện được sử dụng phổ biến hơn để xác định hình dạng đối tượng và API, trong khi các loại được sử dụng phổ biến hơn để xác định các loại dữ liệu phức tạp và các loại tiện ích. Hãy hiểu cả hai điều này một cách riêng biệt.
Giao diện TypeScript là gì?
Giao diện TypeScript là một kỹ thuật để xác định hình dạng của đối tượng TypeScript. Nó được tạo bằng cách sử dụng từ khóa “ giao diện ” và nó chỉ định một tập hợp các thuộc tính và phương thức mà một đối tượng yêu cầu để được phân loại theo loại đó. Nó tương đương với một lớp trong lập trình hướng đối tượng; tuy nhiên, nó không xác định bất kỳ triển khai nào. Các giao diện chủ yếu được sử dụng để kiểm tra kiểu và đảm bảo rằng một đối tượng phù hợp với một cấu trúc cụ thể.
Trước khi tiếp tục, hãy nhớ rằng để thực thi tệp TypeScript, tệp đó phải được chuyển đổi thành tệp JavaScript và sau đó chạy mã JavaScript trên thiết bị đầu cuối bằng cách sử dụng các lệnh đã cho:
tên tệp tsc.tstên tệp nút.js
Ví dụ
Tạo một giao diện có tên “Người dùng” xác định ba thuộc tính và một phương thức “ nhận thông tin() ”:
giao diện người dùng {FirstName: chuỗi;
họ: chuỗi;
tuổi: số;
nhận thông tin ( ) : vô hiệu;
}
Tạo một lớp học ' Học sinh ” được kế thừa với một giao diện. Lớp định nghĩa các thuộc tính của nó, một hàm tạo sẽ gán các giá trị cho các thuộc tính và một phương thức “getInfo()” sẽ hiển thị các giá trị liên quan đến các thuộc tính:
FirstName: chuỗi;
họ: chuỗi;
tuổi: số;
người xây dựng ( FirstName: string, lastName: string, age: number ) {
this.firstName = firstName;
this.lastName = họ;
this.age = tuổi;
}
nhận thông tin ( ) : vô hiệu {
bảng điều khiển.log ( 'Thông tin học sinh:' )
bảng điều khiển.log ( '- Tên: ' + this.firstName + '' + this.lastName ) ;
bảng điều khiển.log ( '- Tuổi: ' + this.age ) ;
}
}
Tạo một đối tượng của “ Học sinh ” đặt tên “ tiêu chuẩn ' của ' Người dùng ” gõ bằng cách gọi hàm tạo với từ khóa “new” và sau đó, gọi phương thức getInfo() để in dữ liệu trên bàn điều khiển:
std.getInfo ( ) ;
đầu ra
Loại TypeScript là gì?
Các loại TypeScript chủ yếu được sử dụng để tạo bí danh cho các loại hiện có cũng như để tạo các loại phức tạp hơn. Nó đại diện cho một hình dạng hoặc cấu trúc cụ thể của dữ liệu. Nó có thể được xác định/khai báo với “ kiểu ” từ khóa. Các loại TypeScript có thể được sử dụng để làm cho mã dễ hiểu hơn và giảm sự lặp lại/trùng lặp.
Ví dụ
Đầu tiên, xác định một loại “ Người dùng ' sử dụng ' kiểu ” từ khóa được chỉ định với năm thuộc tính, một trong số chúng là thuộc tính tùy chọn đó là “ điện thoại ”:
kiểu Người dùng = {FirstName: chuỗi;
họ: chuỗi;
tuổi: số;
email: chuỗi;
điện thoại?: chuỗi;
} ;
Định nghĩa một chức năng có tên là “ getFullName ”, nhận tham số kiểu “ Người dùng ” và in dữ liệu bao gồm thông tin của người đó bao gồm “ tên ”, “ tuổi ”, “ e-mail ' Và ' số điện thoại ”:
bảng điều khiển.log ( 'Thông tin người dùng:' )
bảng điều khiển.log ( '- Tên: ' + người.tên + '' + người.họ ) ;
bảng điều khiển.log ( '- Tuổi: ' + người.tuổi ) ;
bảng điều khiển.log ( '- Email: ' + người.email ) ;
bảng điều khiển.log ( '-Điện thoại #: ' + người.điện thoại ) ;
}
Bây giờ, hãy tạo một đối tượng “ người ” thuộc loại “ Người dùng ” với các cặp khóa-giá trị:
tên đầu tiên: 'Mily' ,
họ: 'Michael' ,
tuổi: 28 ,
e-mail: 'mili124@yahoo.com' ,
điện thoại: '086-34581734'
} ;
Cuối cùng, in thông tin người dùng bằng cách gọi hàm getInfo():
đầu ra
Đó là tất cả về giao diện và kiểu TypeScript.
Phần kết luận
Trong TypeScript, “ giao diện ' Và ' kiểu ” được sử dụng để xác định các loại tùy chỉnh. Một giao diện có thể được triển khai bởi một lớp hoặc một đối tượng, trong khi các kiểu có thể xác định các kiểu phức tạp hơn bằng cách sử dụng các tính năng như hợp nhất và giao điểm. Đây là những tính năng mạnh mẽ có thể giúp viết mã có tổ chức hơn và có khả năng mở rộng. Blog này đã mô tả giao diện và loại TypeScript cũng như sự khác biệt của chúng.