정적 분석

정적 분석은 통계의 결과를 자동으로 점검하고 코드를 실제로 실행하거나 자동화된 테스트를 작성하지 않아도 됩니다. 이미 이러한 유형의 테스트는 VSCode와 같은 IDE를 사용하는 경우 이미 확인되었을 것입니다. TypeScript로 수행하는 검사는 일종의 정적 분석으로서 오류 또는 경고 아래에 구불구불한 선으로 표시됩니다.

ESLint

ESLint는 개발 환경에서 발생할 수 있는 문제에 대한 피드백을 제공합니다 이러한 문제는 유형에 안전할 수 있지만 오류 또는 비표준 동작일 수 있습니다. 책임을 물을 수 있습니다 ESLint를 사용하면 온전히 체크하는 여러 규칙을 '권장' 섹션에 있는 다수를 포함하여 설정합니다.

ESLint 규칙의 좋은 예는 no-unsafe-finally 있습니다. 이렇게 하면 프로그램의 finally 블록 내에서 제어 흐름을 개선할 수 있습니다. 이렇게 하면 는 따라하기 어려운 JavaScript를 작성하는 흔하지 않은 방법입니다. 하지만 정상 코드 검토 프로세스에서 감지할 수 있어야 하는 문제이기도 합니다.

  try {
    const result = await complexFetchFromNetwork();
    if (!result.ok) {
      throw new Error("failed to fetch");
    }
  } finally {
    // warning - this will 'overrule' the previous exception!
    return false;
  }

따라서 ESLint는 건전한 리뷰 절차 (및 이 가이드가 있어야 합니다. 개발자가 도입할 수 있는 모든 비전문적인 접근 방식을 포착하여 삽입해야 합니다 Google의 엔지니어링 관행 가이드에는 '단순한 유지'에 대한 간단한 섹션이 있습니다.

ESLint를 사용하면 규칙을 깨고 코드에 '허용됨' 주석을 달 수 있습니다. 예를 들어 다음과 같이 주석을 달아 이전 로직을 허용할 수 있습니다.

  finally {
    // eslint-disable-next-line no-unsafe-finally
    return false;
  }

계속해서 규칙을 어기는 경우 사용 중지를 고려해 보세요. 이러한 특정 방식으로 코드를 작성하도록 장려하지만 여러분의 팀은 코드를 다른 방식으로 작성하는 것에 해당할 수 있는 위험을 이미 인식하고 있어야 합니다. 접근하는 것입니다.

마지막으로, 대규모 코드베이스에 정적 분석 도구를 사용 설정하면 다른 방법으로는 작동되던 코드에 대해 유용하지 않은 노이즈 (및 리팩터링해야 하는 잡무)가 많음 좋습니다. 따라서 프로젝트의 수명 주기 초기에 사용 설정하는 것이 더 쉽습니다.

브라우저 지원을 위한 ESLint 플러그인

널리 사용되지 않는 API 사용을 신고하는 플러그인을 ESLint에 추가할 수 있습니다. 대상 브라우저 목록에서 지원되지 않는지 여부를 지정합니다. 이 eslint-plugin-compat 패키지에서 사용자가 API를 사용할 수 없을 수도 있다는 것을 경고할 수 있으므로 스스로 추적하지 않아도 됩니다.

정적 분석을 위한 유형 확인

자바스크립트를 배울 때 일반적으로 새로운 개발자는 약한 타이핑 언어임을 나타낼 수 있습니다. 즉, 포드의 상태를 변수를 하나의 유형으로 만든 다음 완전히 동일한 위치에 동일한 위치를 사용하세요. 다릅니다. Python 및 기타 스크립트 언어와 비슷하지만 C/C++ 및 Rust와 같은 컴파일된 언어

이런 종류의 언어는 시작하는 데 도움이 될 수 있습니다. 아마도 단순함으로 인해 JavaScript가 큰 인기를 끌게 되었지만, 이는 종종 실패 지점이 되기도 합니다. 또는 적어도 혼란스러운 오류를 허용하여 코드를 복잡하게 만들거나 있습니다. 예를 들어 string 또는 객체 유형이 있는 number를 전달합니다. 잘못 입력된 값이 다양한 범위 안에서 최종적으로 혼란을 일으키는 TypeError을 유발합니다.

TypeScript

TypeScript는 JavaScript의 입력 부족에 대한 가장 주류 솔루션입니다. 확인할 수 있습니다 이 과정에서는 이를 광범위하게 사용합니다. 비록 이 과정은 TypeScript와 같은 특수키를 제공하므로 정적 분석입니다.

간단한 예로, 이 코드는 이름 string개 및 연령 number개:

const callback = (name: string, age: string): void => {
  console.info(name, 'is now', age, 'years old!');
};
onBirthday(callback);

TypeScript를 통해 실행하거나 마우스를 가져가면 다음 오류를 생성합니다. 를 사용해 보세요.

bad.ts:4:12 - error TS2345: Argument of type '(name: string, age: string) => void' is not assignable to parameter of type '(name: string, age: number) => void'.
  Types of parameters 'age' and 'age' are incompatible.
    Type 'number' is not assignable to type 'string'.

4 onBirthday(callback);
             ~~~~~~~~

Found 1 error in bad.ts:4

</ph>

궁극적으로 TypeScript를 사용하는 목표는 다음과 같은 오류를 방지하는 것입니다. age는 string이 아닌 number여야 합니다. 프로젝트로 들어옵니다. 이 종류의 오류는 다른 유형의 테스트를 사용하여 감지하기 어려울 수 있습니다. 또한 유형 시스템은 테스트가 작성되기도 전에 피드백을 제공할 수 있습니다. 그러면 조기에 피드백을 받아 코드 작성 과정이 더 쉬워집니다. 유형 오류에 대한 자세한 정보를 결국 실행됩니다

TypeScript를 사용할 때 가장 어려운 부분은 올바르게 설정하는 것입니다. 매회 프로젝트에는 tsconfig.json 파일이 필요하며 이 파일은 주로 tsc에서 사용합니다. 명령줄 도구 자체는 VSCode와 같은 IDE에서도 읽히며 빌드 도구 및 도구를 포함합니다. 이 파일에는 수백 개의 설정에 대한 유용한 리소스는 다음에서 찾을 수 있습니다.

• tsconfig.json이란 무엇인가요?
• TypeScript 기반에 대한 중앙 집중식 추천
• TS에서 JS 확인

일반적인 TypeScript 팁

tsconfig.json 파일을 통해 TypeScript를 설정하고 사용할 때 다음 사항에 유의하세요.

• 소스 파일이 실제로 포함되어 있고 확인되었는지 확인합니다. 파일이 오류가 없는 이유는 오류가 없는 것일 수 있습니다.
• .d.ts 파일 내의 유형과 인터페이스를 명시적으로 설명하는 대신 함수를 작성할 때 암시적으로 설명하면 테스트할 수 있습니다 모의와 '가짜'를 작성하기가 더 쉽습니다. 버전 코딩을 할 수 없습니다. .

TypeScript 암시적 any

TypeScript의 가장 강력하고 유용한 구성 옵션 중 하나는 noImplicitAny 플래그. 하지만 보통 사용 설정하는 것이 가장 어렵기 때문에 특히 이미 큰 코드베이스가 있는 경우에 그렇습니다. noImplicitAny 플래그는 strict 모드에서는 기본적으로 사용 설정되지만 그렇지 않은 경우에는 사용 설정되지 않습니다.

다음 플래그를 사용하면 이 함수가 오류를 반환합니다.

export function fibonacci(n) {
  if (n <= 1) {
    return 0;
  } else if (n === 2) {
    return 1;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

독자로서 n는 숫자여야 함은 매우 분명하지만 TypeScript에서 이를 확인할 수 없습니다. VSCode를 사용하는 경우 함수는 이를 다음과 같이 설명합니다.

function fibonacci(n: any): any

이 함수의 호출자는 any 유형의 값을 전달할 수 있습니다. (number만이 아닌 다른 유형을 허용하는 유형) 사용 설정 시 noImplicitAny 플래그를 사용하면 개발 중에 이러한 종류의 코드를 보호할 수 있습니다. 코드 전달을 위한 광범위한 비즈니스 로직 테스트를 작성할 필요 없이 특정 위치에서 잘못된 데이터 유형을 찾을 수 있습니다.

간단한 해결 방법은 n 인수와 fibonacci의 반환 유형을 모두 number로 표시하는 것입니다.

noImplicitAny 플래그는 any를 명시적으로 작성하는 것을 차단하지 않습니다. 제공합니다 여전히 any 유형. 단지 모든 변수에 유형을 부여하도록 합니다.