3 Tips hữu dụng TypeScript cho Angular 4

832

Mình xin chia sẻ 3 tips mà mình thấy rất hữu dụng cho dev khi dùng Typescript.

  • Hạn chế import quá nhiều interfaces.
  • Sử dụng các thuộc tính của interface là optional
  • Stop throwing me error, I know what I’m doing Những tips này tôi đã phát hiện ra trong quá trình sử dụng angular nhưng nó áp dụng được cho typescript chứ không chỉ angular.

1. Hạn chế import quá nhiều interfaces.

Tôi thích sử dụng interface. Tuy nhiện tôi không thích import chúng mọi lúc. Mặc dù Visual Studio có chức năng auto import, nhưng tôi thực sự khó chịu khi thấy code có một đống lines import. Đây là ví dụ mà chúng ta thường sử dụng.

Solution 1: Using namespace

Bằng cách sử dụng namespace, chúng ra có thể hạn chế việc import interface nhiều.

Có vẻ tốt hơn nhỉ. Sử dụng namespace cũng giúp chúng ta tổ chức và quản lý các interface tốt hơn. Chú ý là bạn có thể chia thành nhiều namespace trên nhiều files khác nhau.

Giả sử bạn có một tệp khác là api.v2.model.ts. Bạn định nghĩa interfacem mới nhưng bạn muốn sử dụng cùng một namespace.

Để sử dụng interface mới vừa tạo, bạn sử dụng chúng giống như ví dụ trước như sau:

Có thể bạn quan tâm: 

  Có gì mới trong Angular 7.0 và làm sao để nâng cấp?

Solution 2: Using d file

Có một cách khác để loại bỏ việc import là tạo một file typescript với đuôi .d.ts. d được hiểu là sẽ tự động export và có thể dụng mọi chỗ trong project.

Và sau đó sử dụng chúng một cách bình thường.

Tôi khuyên bạn sử dụng cách 1 bởi vì:

  • d file thường sử dụng cho bên thứ 3
  • name space cho phép bạn sử dụng và tổ chức file rõ ràng hơn.

Video: AWS from zero to hero

2. Sử dụng các thuộc tính của interface là optional

Việc này khác phổ biến khi bạn dùng interface để mô tả cấu trúc cho các đối tượng, có thể là cho CRUD. Giả sử bạn có 1 interface Customer, khi tạo thì tất cả các trường là bắt buộc còn khi update thì không bắt buộc tất cả. Như vậy bạn có cần phải địng nghĩa 2 interface cho 2 trường hợp không, câu trả lời là không.

Đây là interface Customer.

Solution: Use Partial

Partial là một kiểu thuộc tính của đối tượng mang tính tùy chịn. Việc địng nghĩa này được tích hợp mặc địng trong file lib.es5.d.ts.

Chúng ta có thể sử dụng như sau:

3. Stop throwing me error, I know what I’m doing

Giống như Javascript, đôi khi lỗi xảy ra trên typescript khiến bạn cảm thấy bị phiển. Trong nhiều trường hợp, bạn muốn nói với Typescript: “hey, tôi biết tôi đang làm gì, làm ơn để tôi yên”.

Solution: Use @ts-ignore comment

Từ Typescript version 2.6, bạn có thể làm vậy bằng cách thêm comment @ts-ignore để tránh việc raise lỗi.

Ví dụ, Typescript sẽ throw lỗi “Unreachable code detected” trong đoạn code sau:

Bạn có thể cấm khẩu nó bằng cách thêm comment @ts-ignore.

Dĩ nhiên, tôi khuyến cáo bạn nên luôn luôn fix lỗi sau khi sử dụng chức năng này.

TopDev via Viblo

 

  Buils một ứng dụng thời tiết sử dụng AngularJS