- vừa được xem lúc

Narrowing TypeScript

0 0 23

Người đăng: Nguyễn Thành Long

Theo Viblo Asia

1. Narrowing là gì?

  • Quá trình thu gọn các loại dữ liệu
  • Sử dụng các điều kiện để ràng buộc các loại dữ liệu
  • Giúp hiểu rõ hơn về kiểu dữ liệu => viết mã an toàn hơn và tránh lỗi thao tác

2. Các kĩ thuật :

Các kĩ thuật narrowing trong Typescript cho phép làm việc với các loại dữ liệu chính xác và cung cấp sự tự động hóa cho quá trình kiểm tra dữ liệu, giúp bạn phát hiện và sửa lỗi một cách nhanh chóng

2.1 Kiểm tra kiểu (Type guards)

Sử dụng điều kiện typeof, instanceof, in hoặc Array.isArray() để thu hẹp kiểu dữ liệu trả về

Báo lỗi do " ".repeat() nhận vào dữ liệu kiểu number, trong khi chúng ta truyền vào passing dữ liệu dạng number | string => Cách làm đúng

2.1.1 typeof Type Guard

  • Cách kiểm tra kiểu dữ liệu dựa trên typeof
  • TS thông báo lỗi nếu kiểu dữ liệu trả về không trùng với kiếu dữ liệu đã khai báo

Khi ta check điều kiện strs có phải kiểu dữ liệu object hay không để chọn ra được string[] là 1 mảng. Nhưng có 1 vấn đề là typeof null cũng là object . Do đó, Typescript chỉ thu hẹp được thành kiểu dữ liệu string[] | null thay vì null như mong muốn. Tuy nhiên, chúng ta cũng có một cách khác để cheking gọi là truthiness checking.

2.1.2 Truthiness narrowing

  • Đây là cách rút ngắn kiểu dựa trên giá trị truthy hoặc falsy
  • Có thể dẫn đến lỗi nếu không xử lí đầy đủ trường hợp
  • Giúp viết code an toàn và chính xác hơn

Ở đây, đã khắc phục được lỗi strsnull như khi chỉ sử dụng mỗi typeof bằng cách checking strs . Ngoài ra, ta có thể check với !

2.1.3 Equality narrowing

  • Sử dụng ===, !==, ==, !=
  • Rút ngắn kiểu dựa trên giá trị một biến
  • So sánh với một giá trị cụ thể
  • Dùng cho nhiều kiểu khác nhau như boolean, number, string hoặc literal type

Khi check giá trị x , y. TS biết rằng kiểu dữ liệu của chúng cũng phải bằng nhau. Do đó, TS cũng biết rằng xy phải là kiểu string trong nhánh đầu tiên

2.1.4 in operator

  • Kiểm tra xem một thuộc tính nhất định có tồn tại trong một đối tượng hay không

2.1.5 instanceof narrowing

  • sử dụng để kiểm tra xem một đối tượng có được tạo ra từ một lớp cụ thể hay không

2.1.6 Using type predicates

  • Giúp chúng ta xác định một biến hoặc giá trị có thuộc về một kiểu cụ thể hay không
  • Rút ngắn lại kiểu dữ liệu của biến hoặc giá trị đó, và có thể sử dụng biến hoặc giá trị đó với một kiểu dữ liệu chính xác hơn.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu cơ bản về TypeScript

TypeScript được xem là một phiên bản nâng cao hơn của JavaScript vì nó được bổ xung thêm nhiều chức năng tiện lợi hơn. Điển hình mình muốn nói đến ở đây là Static Typing.

0 0 145

- vừa được xem lúc

Xây dựng tính năng phân trang với Angular 13

1. Giới thiệu.

0 0 3.6k

- vừa được xem lúc

Một chút về TypeScript

TypeScript là gì. Trong bài viết này, mình sẽ cùng các bạn tìm hiểu các khái niệm cơ bản của TypeScript .

0 0 41

- vừa được xem lúc

Phần 1: Có nên yêu Typescript không cần cớ ?

Lời mở đầu. . . Sau cuộc cách mạng công nghiệp lần thứ ba có thanh niên mới nổi tên là Brendan Eich đến từ Netscape và là một dân cày chính hiệu.

0 0 37

- vừa được xem lúc

[eth-blockchain-helper] Toi đã publish npm package đầu tiên như thế làooo?

LỜI NÓI ĐẦU. Chào mọi người, đã lâu rồi không gặp và hôm nay tiếp tục với chuỗi bài chia sẻ kiến thức - kinh nghiệm mà mình gặp phải trong quá trình làm việc cá nhân.

0 0 24

- vừa được xem lúc

Cách đăng nhập SSO Keycloak với ReactJs và Typescript

Single Sign-On (SSO) là một kỹ thuật xác thực người dùng cho phép người dùng đăng nhập vào nhiều. ứng dụng khác nhau mà không cần phải nhập tên đăng nhập và mật khẩu cho mỗi ứng dụng.

0 0 25