@babel/parser7.14 새 기능 TypeScript 플러그인에 대한 dts 옵션을 사용하지 않을 수도 있습니다

며칠 전에 Babel 7.14.0이 발표되었습니다.이와 함께 바벨의 파르@babel/parser도 7.14.0을 발표했다.
본고는 @babel/parser 7.14.0의 Type Script 플러그인에 설치된 새로운 기능 dts 옵션을 소개한다.
자기가 설치한 그거지만 아마 아무도 이 옵션을 사용하지 않을 거예요.만약 이 옵션에 도움이 된다면 저에게 연락 주세요.
한편 이 기사의 전반부는 모르는 사람@babel/parser을 겨냥한 해설이다.@babel/parser 플러그인 기능을 알고 있다면, dts 옵션만 알고 싶으면 typescript 플러그인의 dts 옵션을 건너뛰십시오.

베보의 파사를 직접 사용해

많은 웹 개발자들이 베벨을 써봤죠.
나는 그것이 대부분 컨베이어 벨트로 이용된다고 생각한다.새로운 프로포 원숭이를 사용하거나 타입 스크립트나 플로우 등 AltJS를 사용하거나 공식 환경에서 오래된 자바스크립트를 실행하고 싶을 때 Babel을 웹 브라우저(또는 Node.js)로 변환해 실행할 수 있는 형식이라는 것이다.
그게 베벨의 주된 목적이야.
그러나 일부 소프트웨어는 Babel의 Parer만 사용합니다.Babel의 Perzer@babel/parser는 패키지로 따로 사용할 수 있습니다.
예를 들어, Pretier에서는 JavaScript, Flow, TypeScript를 지우기 위해 @babel/parser가 사용됩니다.@babel/parser는 다음과 같은 API에 사용할 수 있습니다.

const { parse } = require("@babel/parser");
const ast = parse(`const foo = "foo"`);

@babel/parser 플러그인 기능

@babel/parser에 플러그인 기능이 있습니다.
플러그인을 사용하면 지울 수 없었던 문법을 지울 수 있습니다.

const { parser } = require("@babel/parser");

const code = `const foo: string = "foo"`;

parse(code); // 構文エラー、型注釈の構文をパースできない
parse(code, { plugins: ["typescript"] }); // typescript プラグインを有効にしているため型注釈の構文をパースできる

현재 설치된 플러그 인은 https://babeljs.io/docs/en/babel-parser#plugins에서 확인할 수 있습니다.
플러그인이라고 불리지만 제3자는 플러그인을 설치할 수 없습니다.@babel/parser 방침인데 앞으로도 그런 대책은 없겠죠.
그래서 실제로는 플러그인이라기보다는 옵션이다.

플러그인 옵션

일부 플러그인에는 옵션이 있습니다.
예를 들어 @babel/parser 플러그인에는 pipelineOperator 옵션이 있습니다.이 글은 이 점을 상세하게 설명하지 않는다. 간단하게 말하자면, 파이프라인 연산자의 서문은 세 가지가 있는데, 당신은 어떤 건의를 사용할 것인지 선택할 수 있다.

const { parse } = require("@babel/parser");

parse(`x |> await f`, { plugins: [["pipelineOperator", { proposal: "fshap" }]] });

proposal 플러그인의 typescript 옵션

다음은 본론.dts 7.14.0에서 Type Script에 대응하는 문법에 사용되는 @babel/parser 플러그인에 typescript라는 새로운 옵션이 생성되었습니다.
다음과 같이 사용합니다.

const { parse } = require("@babel/parser");

parse(`const foo: string = "foo"`, { plugins: [["typescript", { dts: true }]] });
parse(`const foo: string = "foo"`, { plugins: [["typescript", { dts: false }]] });

이 boolean 옵션은 TypeScript의 유형 정의 파일을 올바르게 해석하는 옵션입니다.즉, dts 이것은 파일을 정확하게 해석하는 옵션이다.dts 일반적으로 파일과 일반적인 TypeScript의 문법은 완전히 같다고 생각하지만 실제로는 미묘한 차이점이 있다*.d.ts는 옵션을 사용하여 전환할 수 있다.
현재 Babel팀이 알고 있는 *.d.ts와 일반적인 Type Script의 문법 차이는 하나뿐이다.함수 매개변수의 마지막이 Rest Parameters인 경우 끝 쉼표가 허용되는지 여부입니다.
일반적인 Type Script에서 함수 매개변수의 마지막이 Rest Parameters인 경우 끝 쉼표를 붙이면 구문 오류가 발생합니다.그러나 dts에서는 문법 오류가 발생하지 않습니다.
index.ts

// 構文エラーが発生する
function foo(...rest,): string {}

index.d.ts

// 構文エラーは発生しない
function foo(...rest,): string;

https://github.com/microsoft/TypeScript/issues/23070에 따르면 이 행위는 의도적인 것이다.
원래 TypeScript에서 Rest Parameters의 끝에 쉼표를 붙이는 것은 문법적으로 문제가 없다.그러나 https://github.com/microsoft/TypeScript/pull/22262에 의해 금지되었다.단, 영향 범위가 커진다고 가정*.d.ts하기 때문에 문서에 대해서는 금지하지 않는다.
한 마디로 하면, 적어도 현재*.d.ts의 *.d.ts 플러그인의 @babel/parser 옵션은Rest Parameters의 끝 쉼표를 허용할지 여부를 결정하는 옵션입니다(엄밀히 말하면 Ambient Context에서만 발생하는 문법 오류도 있고 typescript 옵션이 유효할 때도 이러한 오류가 발생할 수 있습니다.
자세한 내용은 이 기능이 추가된 PRhttps://github.com/babel/babel/pull/13113을 참조하십시오.

Q. dts 옵션이 작동하지 않는 이유는 무엇입니까?

A.dts 파일을 직접 사용하려는 사람이 없기 때문에dts 파일을 지웁니다.