TypeScript 엄격한 형식 - 부분 전체 정적 유형

이번 게시물 시리즈의 이전 부분에서는 안전한 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) {}

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

조건 약칭 표기법

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

strict-boolean-expressions lint 규칙은 조건 검사가 유형에 안전한지 확인하지만 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

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

Template strings from modern JavaScript should be used for string concatenation, which the prefer-template lint rule enforces:

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

Conversely, only strings should be used in template strings, which the restrict-template-expressions lint rule enforces.

If mixing types is what is actually wanted, conversions should be explicit:

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

Note that template strings can be nested:

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

Conclusion

This is the end of this posts series. You can follow my account (button on top right of this page) to know when other posts about TypeScript or other topics like Angular are published.

You want to contact me? Instructions are available in the summary.

위 내용은 TypeScript 엄격한 형식 - 부분 전체 정적 유형의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!