ES2018과 같은 TypeScript에서 최신 JavaScript 기능 사용
나는 그들의 구성에 대한 TypeScripts 문서를 검색해 보았지만 무엇이 간단한 질문이어야 하는지에 대한 답을 찾을 수 없는 것 같다.
간단히 말해서, 우리가 사용하고 있는 JavaScript 기능 세트가 무엇인지 알 수 있도록 어떻게 형식 컴파일러를 구성할 것인가?
예를 들어, ES2019는 '오, 나에게 그 중 일부를 가져다 주고 싶다'고 생각한다.그런 상황에서 컴파일러가 필요한 것을 트랜스파일링하고 폴리필할 수 있도록 하려면 무엇을 업그레이드해야 하는가?
tsconfig의 lib 옵션은 나를 혼란스럽게 하고 문서는 사용 가능한 라이브러리에 대해 별로 설명하지 않는다.그들에 대해서도 직접적으로 아무것도 찾을 수가 없다.
그래서 ES2019가 나오고 거기에 lib 옵션을 추가한다고 하자(하나 있다고 가정하면)그럼 이제 ES2019 기능을 사용할 수 있다는 말씀이세요?ES2019의 모든 것을 지원하려면 아래의 다른 버전마다 libs를 추가해야 하는가?아니면 ES2019 lib를 추가하는 것이 내가 필요한 모든 것을 제공하는가?
그 도서관들은 어디서 온 거지?그들이 핵심 TypeScript 도서관의 일부라서 더 많은 것을 업그레이드해야 하는가, 아니면 단순히 분리형 패키지를 업그레이드하면 모든 것이 작동될 것인가?
마지막으로 그러한 lib는 그 규격의 버전을 완전히 지원하는 데 필요한 모든 것을 제공한다.아니면 특징의 부분집합인가?
우리의 프로젝트에서 우리는 현재 TypeScript 버전 2.5.3을 사용하고 있다.
나는 그것이 많은 질문이기 때문에 어떤 것에 대한 정보나 문서로의 링크에 대한 어떤 정보라도 매우 감사할 것이라는 것을 안다.
이야기는 좀 더 복잡하고, 언어적 특성과 런타임 특성의 두 가지로 구분하는 것부터 시작해야 한다.
ES 언어 특징
우리가 언어 기능을 말할 때 우리는 핵심 자바스크립트 언어 구문의 변경을 의미한다.예를 들어,ES 2015
클래스, 화살표 기능 지원 추가(=>
(), 그리고for-of
반복
Typecript는 모든 안정적 언어 특징 제안들을 가능한 한 빨리 실행하려고 시도하며, 그것들을 다음 항목으로 지정된 ES 버전에 압축할 것이다.target
컴파일러에 대한 옵션즉, 최신 Typecript 컴파일러가 있으면 새로운 기능을 추가할 수 있으며ES 2019
언어적 특징, 당신은 그것을 아래로 내려갈 수 있을 것이다.ES3
타자기록은 당신이 목표로 하는 ES의 어떤 버전에서든 그러한 기능이 작동하도록 하는 데 필요한 코드를 방출할 것이다.
그리고 지금 여러분은 이것을 실제로 볼 수 있다.만약 당신이 목표한다면ES5
, 화살표 함수를 정규 함수로 컴파일함function
s를 사용하고 a를 사용하다_this
할 수 있는 this
. 수업은 함수에 편성되어 있고, 학내의 수용분야에 편성되어 있다.prototype
세트
ES 런타임 기능
언어 기능 외에도 어떤 기본 제공 개체 유형을 사용할 수 있는지, 그리고 해당 런타임 개체에 어떤 방법과 필드가 있는지 설명하는 특정 런타임 기능이 있다.최근 버전의 의 의 개체 in의 new object 의 예ES
되지요Promise
또는Proxy
.
활자 설명서는 그러한 특징에 대해 폴리필드를 제공하지 않으며, 런타임으로 이러한 기능을 지원하지 않는 경우, 당신은 그것들을 사용하려면 자신의 폴리필 구현과 함께 와야 할 것이다.
그러나 활자 설명서는 런타임에 존재하는 기본 제공 객체와 그 방법/필드가 무엇인지 알 필요가 있다, 이것이 바로lib
환경이 할 수 그것은 당신이 런타임 환경이 어떤 모습일지 지정할 수 있게 해준다.
로 들 수 .es5
그러나 런타임에 모든 빌드인 객체가 다음 조건에 부합하도록 명시한다.es2015
표준(일부는 런타임 자체에 의해 구현될 수 있으며, 다른 일부는 폴리머를 통해 사용자가 추가할 수 있음)
두 사람의 교차점
위의 중분류는 일부 언어 특징이 특정 내장 대상과 방법의 존재에 의존한다는 점에서 단순화된다.
예를 들어,async/await
언어의 특징은 약속의 존재에 의존한다.그래서 만약 너가 사용한다면async/await
그리고 대상es5
당신은 에러를 얻을 것이다.Promise
생성자가 존재하지 않음.만약 당신이 목표한다면es5
하지만 당신은 명시한다.lib: [ 'es2015', 'dom' ]
컴파일러에게 컴파일을 다운받고 싶어도 더 이상 오류가 발생하지 않을 것이다.es5
, 런타임에Promise
건설업자는 다음과 같이 존재할 것이다.es2015
특정 lib에 표시된 런타임 규격(다중 결합 또는 내장 런타임 동작, 컴파일러의 문제가 아님)
일반적으로 그러한 의존성이 존재하는 경우, 형식 컴파일러는 특정 유형이 누락되어 lib를 업그레이드하거나 대상을 변경할 수 있다는 오류를 발생시키지만(사용되는 기본 lib가 변경됨) 런타임에 필요한 지원이 있는지 확인해야 한다.
예외는
언어 기능을 다운 컴파일하는 것이 항상 가능한 것은 아닐 것이다.es3
(런타임 기능이 누락되었거나, 기능 구현 비용이 높기 때문에 발생하는 문제는 컴파일러 팀의 우선순위가 되지 않는다.)예를 들어 자산 접근자가 있을 수 있다.get
/set
대상 지정 시 )es3
는 지원되지 않는다.그러나 지원되지 않는 언어 기능/대상 조합을 사용하는 경우 컴파일러가 경고해야 한다.
'IT이야기' 카테고리의 다른 글
사용자 지정 후크에 대응하여 preventDefault 사용 (0) | 2022.03.20 |
---|---|
Vue 구성 요소 프로펠러 변경이 리렌더를 트리거하지 않음 (0) | 2022.03.20 |
단일 페이지 앱 react hot reload 웹 팩 사용 (0) | 2022.03.20 |
자체 npm 패키지에서 react useEffect 관련 문제 (0) | 2022.03.20 |
vue의 형식 지정 - 속성 'validate'가 'Vue | 요소 | 부[] | 요소[]'에 존재하지 않음 (0) | 2022.03.20 |