TypeScript 컴파일러 오류에도 불구하고 왜 React Native 앱이 성공적으로 빌드됩니까?


15

최근에 Expo와 함께 TypeScript를 사용하기 시작했습니다. typescript-eslint코딩하는 동안 대부분의 오류를 잡을 수 있도록 모든 linter / formatter 통합을 수행했습니다 . 코드가 컴파일되는지 확인하기 위해 가끔씩 실행 npx tsc하고 적절하게 수정합니다.

아직 완전히 파악하지 못한 한 가지 이유는 수많은 컴파일 오류가 있어도 앱이 성공적으로 빌드되는 이유입니다. 앱 빌드가 아닌 모든 컴파일 오류에 대해 빨간색 화면 오류가 표시되는 것을 기대하고 선호하며 나중에 찾아야합니다. 예를 들어

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

컴파일 타임에 쉽게 확인할 수있는 전형적인 TypeScript 오류입니다. 큰 빨간색 화면 오류가 발생하고 빌드가 실패하기를 원합니다.

TypeScript를 처음 접했기 때문에 매우 중요한 내용이 누락되었을 수 있습니다. 이 절제를 일으키는 원인은 무엇이며보다 엄격한 검사를 수행 할 수있는 방법이 있습니까?


"빌드가 성공적으로 이루어졌다"는 것은 어쨌든 JS가 출력되는 것을 의미합니까, 아니면 어느 시점에 컴파일러 오류 메시지가 표시되지 않습니까?
ecraig12345

2
어쨌든 JS가 출력되고 개발자 모드로 앱을 실행할 수 있으며 문제없이 프로덕션 앱을 빌드 할 수도 있습니다. 컴파일 할 때 TypeScript가 이것을 막을 것으로 예상했을 것입니다. 컴파일러 오류 메시지는 실행할 때 항상 표시 npx tsc되지만 일반적인 JS 오류와 마찬가지로 const n = 23; n.reverse();"n.reverse는 함수가 아닙니다. 'n.reverse ()', 'n.reverse'는 정의되지 않음) "
anar

2
나는 이것도 너무 이상하다고 생각한다. 나는 그것에 대한 적절한 해결책을 찾을 수 없습니다.
Simon Bengtsson

답변:


2

가장 먼저 이해해야 할 것은 Typescript는 Javascript의 상위 집합이며,이 경우 실제로 컴파일하는 동안 형식 검사를받지 않습니다.

기본적으로 Babel은 Typescript를 제거하고 Javascript로 변환 한 다음 js 번들로 컴파일합니다.

https://babeljs.io/docs/en/next/babel-plugin-transform-typescript 와 같은 Babel 문서의 첫 번째 줄을 살펴볼 수 있습니다.

Babel은 형식 검사가 아니기 때문에 구문 상 올바른 코드이지만 TypeScript 형식 검사에 실패한 코드는 성공적으로 변환 될 수 있으며 종종 예기치 않은 또는 잘못된 방식으로 변환 될 수 있습니다.

내가 제안하는 것은 tsconfig에서 true tscnoEmit설정하고 먼저 Typescript 컴파일을 포함 하거나 오히려 컴파일 하도록 빌드 명령을 확장하는 것 입니다.

업데이트 : 프로젝트를 추가 jest하거나 typescript프로젝트에 추가 할 때 최근에 적용되는 다른 인스턴스를 발견 했습니다. Jest 문서의 맨 아래에 실제로 동일한 내용이 있습니다.

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

그러나 Babel과 함께 TypeScript를 사용하는 경우 몇 가지주의 사항이 있습니다. Babel의 TypeScript 지원은 코드 변환이므로 Jest는 테스트가 실행될 때 형식을 확인하지 않습니다. 원하는 경우 ts-jest를 사용할 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.