Tại sao ứng dụng React Native của tôi xây dựng thành công mặc dù lỗi trình biên dịch TypeScript?

Gần đây tôi đã bắt đầu sử dụng TypeScript với Expo. Tôi đã thực hiện tất cả các tích hợp linter / formatter như typescript-eslintvậy để tôi có thể bắt được hầu hết các lỗi trong quá trình mã hóa. Để kiểm tra xem mã có biên dịch hay không, tôi thỉnh thoảng chạy npx tscvà sửa.

Một điều mà tôi chưa hoàn toàn nắm bắt được là tại sao ứng dụng của tôi xây dựng thành công ngay cả khi có nhiều lỗi biên dịch. Tôi hy vọng (và thích) sẽ thấy một lỗi màn hình đỏ cho mỗi lỗi biên dịch thay vì xây dựng ứng dụng thành công và tôi sẽ tìm ra nó sau. Ví dụ,

function square<T>(x: T): T {
  console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'.
  return x * x;
}

là một lỗi TypeScript điển hình mà (tôi tin?) có thể dễ dàng kiểm tra tại thời điểm biên dịch. Tôi muốn nó dẫn đến một lỗi màn hình lớn màu đỏ và quá trình xây dựng bị lỗi.

Tôi khá mới với TypeScript nên có thể tôi đang thiếu một thứ rất quan trọng. Chính xác thì điều gì gây ra sự khoan hồng này và có cách nào để thực thi kiểm tra chặt chẽ hơn không?

— anar
nguồn

Bằng cách "xây dựng thành công", bạn có nghĩa là dù sao thì JS cũng là đầu ra hoặc không có thông báo lỗi trình biên dịch nào được hiển thị?

— ecraig12345

Ý tôi là dù sao thì JS cũng là đầu ra và tôi có thể chạy ứng dụng ở chế độ dev và thậm chí có thể xây dựng ứng dụng sản xuất mà không gặp vấn đề gì. Tôi đã mong đợi TypeScript sẽ ngăn chặn điều này tại thời gian biên dịch. Thông báo lỗi trình biên dịch luôn được hiển thị khi tôi chạy npx tscnhưng tôi muốn có màn hình màu đỏ cho mọi lỗi TypeScript giống như tôi làm với các lỗi JS bình thường như thế const n = 23; n.reverse();dẫn đến màn hình màu đỏ với thông báo "n.reverse không phải là một chức năng. (Trong 'n.reverse ()', 'n.reverse' không xác định) "

— anar

Tôi thấy điều này thật kỳ lạ. Tôi cũng không thể tìm thấy một giải pháp thích hợp cho nó.

— Simon Bengtsson

Điều đầu tiên cần hiểu là Typecript là một superset của Javascript và trong trường hợp này nó không thực sự được kiểm tra kiểu trong quá trình biên dịch.

Về cơ bản những gì xảy ra là Babel chỉ cần loại bỏ Bản mô tả và chuyển đổi nó thành Javascript, sau đó được biên dịch thành các gói js.

Bạn có thể xem dòng đầu tiên của các tài liệu Babel sau đây cũng như các cảnh báo: https://babeljs.io/docs/en/next/babel-plugin-transform-typescript

Vì Babel không kiểm tra kiểu, mã đúng về mặt cú pháp, nhưng sẽ thất bại trong việc kiểm tra kiểu TypeScript có thể được chuyển đổi thành công và thường theo những cách không mong muốn hoặc không hợp lệ.

Những gì tôi muốn đề xuất là mở rộng lệnh xây dựng của bạn trước tiên bao gồm tschoặc thay vào đó là trình biên dịch noEmittypecript , được đặt thành true trong tsconfig của bạn.

Cập nhật : Tôi đã tìm thấy một trường hợp khác, nơi điều này áp dụng gần đây khi thêm jestvà typescriptvào một dự án. Ở dưới cùng của tài liệu Jest họ thực sự nêu điều tương tự:

https://jestjs.io/docs/en/getting-started#USE-typescript

Tuy nhiên, có một số lưu ý khi sử dụng TypeScript với Babel. Vì hỗ trợ TypeScript trong Babel là dịch mã, Jest sẽ không kiểm tra kiểu của bạn khi chúng được chạy. Nếu bạn muốn điều đó, bạn có thể sử dụng ts-jest.

— Đánh dấu Atkinson
nguồn