TypeScript: TSConfig 옵션 시작하기

타입스크립트란 무엇입니까?

TypeScript는 JavaScript의 상위 집합입니다. 즉, TypeScript에서 JavaScript 구문을 사용할 수 있으므로 TypeScript를 시작하기 전에 JavaScript를 배우는 것이 가장 좋습니다. 면책조항을 통해 TypeScript가 무엇인지, 그리고 TypeScript용 프로젝트를 설정하는 방법에 대해 이야기해 보겠습니다.

TypeScript 문서에 따르면 "TypeScript는 JavaScript를 기반으로 하는 강력한 형식의 프로그래밍 언어입니다."[1] TypeScript 언어는 개발 중에 초기에 오류를 포착하는 데 도움이 되는 형식 구문을 추가하고 개발 팀이 성장하는 동안 보호 장치를 유지합니다. 프로젝트 규모에 따라. TypeScript를 사용하면 변수의 데이터 유형과 객체의 인터페이스를 정의할 수 있습니다. TypeScript는 이러한 정의를 사용하여 컴파일할 때 코드에 오류가 있는지 확인하고 미리 설정한 정의를 따르지 않을 때 이를 알려줍니다.

"애초에 좀 더 주의할 수 있는데 왜 TypeScript를 사용하기 위해 더 많은 코드를 작성해야 합니까?"라고 생각하신다면? 당신이 틀린 것은 아니지만, 인간은 실수를 할 수 있고, 우리는 오랜 시간 동안 일할 때 종종 그런 일을 합니다. 이와 같은 생각이 건축에도 적용된다면 추가적인 비계 및 안전 절차에 더 많은 작업과 시간이 소요될 것이며, 작업 현장에서 주의를 기울이는 것만으로도 시간을 절약할 수 있습니다.

보셨나요? 이 지붕 수리공은 시간을 절약하기 위해 더 많은 시간과 자원을 낭비했을 수도 있습니다. 이것은 단지 한 명의 노동자입니다. 더 많은 팀원이 추가되면서 프로젝트를 진행하는 작업자 팀을 상상해 보십시오. 이것이 소프트웨어 개발의 현실입니다. 이러한 실수를 잡을 계획을 세우는 것은 장기적으로 귀하와 귀하의 팀에 도움이 될 것입니다.

타입스크립트 예제

다음 예는 TypeScript 문서[2]에서 가져온 것이지만 설명은 제가 작성한 것입니다.

타입스크립트:

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

Greet이 호출되면 TypeScript가 오류를 포착합니다. 우리는 person과 date라는 두 개의 인자를 받기 위해 Greeting을 정의했고, person만 제공했습니다. TypeScript는 코드를 컴파일할 때 이 오류를 포착하고 두 번째 인수가 필요하다는 것을 알려줍니다. 어떤 면에서 TypeScript는 작업하는 동안 코드에서 이러한 오류를 포착하는 린터로 간주될 수 있지만 유형 구문을 활용하면 더 많은 도움을 받을 수 있습니다.

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

이제 두 인수에 유형을 추가합니다. person은 문자열이어야 하고, date는 toDateString 메소드에 대한 Date 객체여야 합니다. 두 번째 인수인 Date() 앞에 new 키워드 없이 Greeting이 호출되면 TypeScript는 날짜 매개변수에 대해 Date 대신 문자열을 수신했음을 알려줍니다. 이제 추가 개발을 하기 전에 오류를 수정할 수 있으며 테스트 중에 예상치 못한 출력이 수신되면 이 오류를 다시 추적해야 합니다.

이제 TypeScript의 작동 모습을 살펴보았으므로 TypeScript를 사용하기 위한 프로젝트 설정의 다음 단계를 살펴보겠습니다.

TypeScript 컴파일러 구성: tsconfig.json

기본 TypeScript 컴파일은 원하는 것이 아닐 수 있으며, Linter를 사용하는 것과 유사하게 필요에 맞게 TypeScript를 사용자 정의할 수 있는 방법이 있지만 훨씬 더 많은 일을 할 수 있습니다.

첫 번째 단계는 프로젝트의 루트 디렉터리에 tsconfig.json 파일을 만드는 것입니다. 이 파일은 컴파일 프로세스에 어떤 파일이 포함되어야 하는지 TypeScript에 알려줍니다. tsconfig.json에서 JSON 파일의 "includes" 키를 사용하여 더 구체적으로 원하는 경우 포함되어야 하는 루트의 디렉터리를 지정할 수 있습니다.

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

이제 "compilerOptions"에 대해 이야기해 보겠습니다. 선택할 수 있는 옵션이 엄청나게 많다고 말하면 저를 믿으세요. 이는 좋은 일이지만 TypeScript를 처음 사용하는 경우에는 두렵기도 합니다. 시작하는 데 도움이 되도록 인기 있는 몇 가지 선택 항목을 분석하겠습니다.

허용J

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

이 옵션을 사용하면 TypeScript만 가져오는 대신 JavaScript 파일을 프로젝트 내부로 가져올 수 있습니다. 일반적으로 TypeScript는 모든 가져오기가 TypeScript라고 가정하고 가져온 JavaScript 파일에 대해 오류를 제공하지만 이 옵션을 사용하면 해당 가져오기를 사용할 수 있으며 동일한 저장소에서 TypeScript 및 JavaScript로 작업할 때 도움이 될 수 있습니다.

esModuleInterop

{
  "include": ["src/**/*"]
}

ES6의 네임스페이스 가져오기는 객체만 가능하지만 이는 .default 없이 require를 사용하는 것과 동일하므로 TypeScript가 객체를 함수로 처리하도록 허용했습니다. 가져오기에 주의할 필요 없이 이 옵션을 사용하면 TypeScript가 코드를 JavaScript로 변환할 때 이 문제가 해결됩니다.

목표

{
  "compilerOptions": {
    "allowJs": true
  }
}

이 옵션은 TypeScript가 코드를 JavaScript로 변환할 때 다운그레이드되는 JS 기능과 그대로 유지되는 기능을 변경합니다. 대부분의 최신 브라우저는 ES6을 지원하므로 es6이 좋은 선택이지만 필요에 따라 이 옵션에 대해 ECMAScript의 모든 버전을 지정할 수 있습니다.

엄격한

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

이 플래그를 사용하면 다양한 유형 검사 동작이 가능합니다. 이렇게 하면 오류가 줄어들고 더 강력한 코드베이스가 생성됩니다. 특정 유형 검사 동작을 제외하려면 문서 [3]를 확인하고 해당 옵션을 false로 설정하십시오. 몇 가지 유형 검사 동작만 원한다면 strict를 사용하는 대신 해당 동작을 켜는 것이 좋습니다.

outDir

{
  "compilerOptions": {
    "target": "es6"
  }
}

TypeScript가 코드를 사용 가능한 JavaScript로 변환할 때 이 옵션은 해당 파일을 이 디렉터리로 내보냅니다.

방출하지 않음

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

이 옵션은 트랜스파일된 모든 JavaScript 파일이 내보내지는 것을 중지합니다. 방금 outDir에 대해 설명했기 때문에 어리석게 들릴 수도 있지만 TypeScript는 항상 파일을 내보내고 outDir은 파일을 올바른 위치로 보냅니다. noEmit은 이미 Babel 또는 Webpack과 같은 다른 도구를 사용하여 코드를 트랜스파일하고 번들링하는 경우 작동합니다. 이 경우 내보내면 쓸모없는 JavaScript 파일이 생성됩니다.

결론

여기 있습니다. TypeScript 구성을 설정하는 데 도움이 되는 7가지 옵션과 TypeScript가 보다 안정적인 코드 베이스를 만드는 데 어떻게 도움이 되는지 살펴보겠습니다. Matt Pocock의 "TSConfig 치트 시트"에서 tsconfig.json에 넣을 수 있는 더 인기 있는 옵션을 읽어보고 이러한 옵션을 구현하기 전에 항상 TSConfig의 TypeScript 문서를 참조하는 것이 좋습니다.

즐거운 코딩하세요!
타일러 메이어

출처:

[1] https://www.typescriptlang.org/

[2] https://www.typescriptlang.org/docs/handbook/2/basic-types.html

[3] https://www.typescriptlang.org/tsconfig/

[4] https://www.totaltypescript.com/tsconfig-cheat-sheet

위 내용은 TypeScript: TSConfig 옵션 시작하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!