이 게시물 시리즈의 이전 부분에서는 안전한 null 허용 여부에 대해 논의했습니다.

이제 TypeScript 기본 동작의 세 번째이자 마지막 문제인 동적 타이핑이 남아 있습니다.

우리가 다룰 내용:

• 동적 입력의 남은 부분
• 실제 동등성 검사
• 조건에 암시적 변환이 없습니다.
• 조건 약칭 표기
• 문자열과 숫자를 혼합하면 안 됩니다.

동적 타이핑의 유적

TypeScript는 입력이 매우 동적인 JavaScript와 달리 "정적 유형 검사기"로 간주됩니다.

그러나 이 게시물 시리즈의 이전 부분에서는 TypeScript가 JavaScript의 상위 집합으로 구축되었다고 설명했습니다.

문제는 다음과 같습니다. JavaScript 동적 타이핑 시스템의 일부가 TypeScript에 남아 있습니다. 따라서 우리는 전체 정적 타이핑을 달성하기 위해 이러한 나머지 동작을 억제하는 방법을 설명할 것입니다.

실제 동등성 검사

• ESLint: eqeqeq
• 생물군계: 의심스러운.noDoubleEquals(권장)

문제의 가장 좋은 예는 동등성 검사입니다. JavaScript에서 ==는 엄밀히 말하면 동등성 검사가 아니라 동등성 검사입니다:

1 == "1"; // true

유형이 다르지만 일부 변환 규칙이 실행되어 JavaScript가 값을 비교할 수 있습니다. 규칙 세부 사항은 기억하기 어렵고 때로는 상당히 이상하며 모든 동적 언어(예: PHP 등)에서 정확히 동일하지 않기 때문에 많은 오류가 발생할 수 있습니다.

이러한 동등성 검사는 JavaScript와 같은 동적으로 유형이 지정된 언어에서만 의미가 있습니다. TypeScript에서 작업하기로 결정한 순간부터 실제 동등성 검사(유형 및 값)만 사용해야 합니다.

1 === "1"; // false

eqeqeq 린트 규칙이 이를 시행합니다.

Java, C# 또는 Rust와 같은 언어를 사용하는 사람들은 이 문제에 특히 주의해야 합니다. 왜냐하면 JavaScript 또는 TypeScript에서 ==는 이러한 언어에서와 동일한 의미가 아니기 때문입니다. JavaScript 및 TypeScript에서는 동일한 동작을 달성하려면 세 번째 =가 필요합니다.

조건에 암시적 변환이 없습니다.

• ESLint: @typescript-eslint/strict-boolean-expressions
• 생물군계: 규칙 누락

이제 상황이 안전하다고 생각하시나요? 불행하게도 변환은 암시적일 수 있으므로 그렇지 않습니다.

let tax: number | undefined = 0;

if (tax) {
  console.log("Process payment");
}
if (!tax) {
  throw new Error();
}

위의 예는 다음과 같습니다.

let tax: number | undefined = 0;

if (tax == true) {
  console.log("Process payment");
}
if (tax == false) {
  throw new Error();
}

보시다시피 암시적 ==가 있으므로 변환은 계속 발생합니다. 0은 true와 동일하지 않고 false와 동일합니다. 따라서 세금이 유효한 값임에도 불구하고 오류가 발생합니다.

strict-boolean-expressions 린트 규칙은 이러한 암시적 조건을 허용하지 않으며 실제 검사를 시행합니다.

let tax: number | undefined = 0;

if (tax !== undefined) {
  console.log("Process payment");
}
if (tax === undefined) {
  throw new Error();
}

JavaScript의 빠른 조건에 익숙한 사람들이 따라야 할 가장 지루한 규칙 중 하나일 수 있지만, 관점에서 보면 이는 Java, C# 또는 Rust와 같은 다른 언어에서 작업을 수행하는 일반적인 방법일 뿐입니다.

구성 부분에서 볼 수 있듯이 모든 오류를 방지하려면 AllowNumber 및 AllowString 하위 옵션을 비활성화하는 것이 중요합니다.

허용되는 유일한 예외는 객체와 배열입니다. 이러한 경우는 문자열과 숫자와 달리 잘못된 값을 가지지 않기 때문에 안전합니다. 따라서 다음은 여전히 ​​괜찮습니다:

let movie: Movie | undefined;
if (movie) {}
if (!movie) {}

참고: 스위치 문은 내부적으로 ===를 사용하므로 이미 안전합니다.

조건 약칭 표기법

• ESLint: @typescript-eslint/prefer-nullish-coalescing(스타일 유형 확인)
• 생물군계: 규칙 누락

strict-boolean-expressions 린트 규칙은 조건 검사가 유형에 안전한지 확인하지만 if:
이외의 다른 조건 구문도 있습니다.

const movieRating = userRating || 5;

// Which is a shorter version of:
const movieRating = userRating == true ? userRating : 5;

사용자가 0점을 준 경우 0은 false와 동일하므로 평점은 0이 아닌 5가 됩니다.

최신 JavaScript를 사용하면 다음과 같이 피할 수 있습니다.

const movieRating = userRating ?? 5;

// Which is a shorter version of:
const movieRating = userRating !== undefined && userRating !== null
  ? userRating
  : 5;

prefer-nullish-coalescing 린트 규칙에 의해 시행될 수 있습니다.

참고하세요 ?? 모든 곳에서 사용하면 안 됩니다: || 부울로 작업할 때 여전히 관련이 있습니다.

문자열과 숫자가 섞이지 않습니다.

• ESLint:
  • 선호 템플릿
  • @typescript-eslint/restrict-plus-operands (권장 유형 확인)
  • @typescript-eslint/restrict-template-expressions (권장 유형 확인)
• 생물군계:
  • style.useTemplate(권장)
  • 기타 규칙 누락

JavaScript에서 연산자는 숫자의 수학적 추가 또는 문자열 연결에 모두 사용될 수 있습니다. 오류가 발생합니다.

"There is "   3   1   "Matrix movies"; // 31
"There is "   (3   1)   "Matrix movies"; // 4

연산자는 수학적 덧셈을 위해 예약되어야 합니다. 또는 최소한 제한 플러스 피연산자 린트 규칙이 적용되는 동일한 유형의 데이터에만 사용해야 합니다.

최신 JavaScript의 템플릿 문자열은 문자열 연결에 사용해야 하며, 이는 선호 템플릿 린트 규칙이 적용합니다.

const movie = `Everything everywhere all at once`;
`${movie} is the best movie!`;

반대로, strict-template-expressions 린트 규칙이 적용되는 템플릿 문자열에는 문자열만 사용해야 합니다.

혼합 유형이 실제로 원하는 경우 변환은 명시적이어야 합니다.

const total = 3;
`There is ${total.toFixed()} Matrix movies`;

템플릿 문자열은 중첩될 수 있습니다.

const total = 3;
`There is ${total.toFixed()} Matrix movie${total > 1 ? "s" : ""}`;

결론

이번 포스팅은 이것으로 끝입니다. 내 계정(이 페이지 오른쪽 상단에 있는 버튼)을 팔로우하면 TypeScript 또는 Angular와 같은 다른 주제에 대한 다른 게시물이 언제 게시되는지 알 수 있습니다.

나에게 연락하시겠습니까? 지침은 요약에서 확인할 수 있습니다.