VS Code를 사용하여 HTML`<script>`의 TypeScript 정의 파일 참조

Question

HTML JSDoc의 script태그에서 사용할 수 있지만 유형 정의 파일 ( .d.ts) 을 참조 할 수 없습니다 . 나는 VS Code. 가능합니까? 그렇다면 어떻게해야합니까? 다음은 몇 가지 예제 코드입니다.

tsconfig.json파일 (나는 확실히 확실히 내 테스트에서 이것을 사용하는 방법을 모르겠어요, 필요하지 않는 것 같습니다.)

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "myLib": ["types/MyLib/index.d.ts"],
            "myLib2": ["types/MyLib/index2.d.ts"]
        }
    }
}

시도 1 :

에서 types/MyLib/index.d.ts:

declare namespace myLib {
  function makeGreeting(s: string): string
  let numberOfGreetings: number
}

JS 파일에서 index.js잘 작동합니다.

/// <reference path="./types/MyLib/index.d.ts" />
// @ts-check

var result = myLib.makeGreeting("Cheese")
console.log(result)

HTML 파일에서 (이러한 작업 없음) index.html:

<script>
    /// <reference path="./types/MyLib/index.d.ts" />
    // @ts-check
    var result = myLib.makeGreeting("Cheese")
</script>

<script>
    // @ts-check
    /** @type {import("./types/MyLib/index").myLib} */
    var myLib = Window.myLib
    var result = myLib.makeGreeting("Orange")
</script>

<script>
    // @ts-check
    /** @typedef {import("./types/MyLib/index").myLib} myLib */
    /** @type {myLib} */
    var myLib = Window.myLib
    var result = myLib.makeGreeting("Orange")
</script>

시도 2 :

에서 types/MyLib/index2.d.ts:

export declare module myLib {
  export function makeGreeting(s: string): string
}

JS 파일에서 index2.js잘 작동합니다.

/// <reference path="./types/MyLib/index2.d.ts" />
// @ts-check

var result = myLib.makeGreeting("Cheese")
console.log(result)

HTML 파일에서 (이러한 작업 없음) index2.html:

<script>
    /// <reference path="./types/MyLib/index2.d.ts" />
    // @ts-check
    var result = myLib.makeGreeting("Cheese")
</script>

<script>
    // @ts-check
    /** @type {import("./types/MyLib/index2").myLib} */
    var myLib = Window.myLib
    var result = myLib.makeGreeting("Orange")
</script>

<script>
    // @ts-check
    /** @typedef {import("./types/MyLib/index2").myLib} myLib */
    /** @type {myLib} */
    var myLib = Window.myLib
    var result = myLib.makeGreeting("Orange")
</script>

Answer 1

몇 가지 조사를하고 소스 코드 를 조사한 결과 HTML 내부 에 포함 된 언어 서비스<script> 가 독립 실행 형 .js/.ts파일에 사용되는 언어 서비스 와 완전히 다르다는 것을 알게되었습니다 .

관심이 있으시면 위 링크를 확인하십시오. 당신이 보는 것, 그것은 다른 내장 확장의 "html-language-features"반대는 "typescript-language-features". 따라서 우선 두 사람이 똑같이 행동하는 것은 불가능합니다. 둘째, 사용되는 ts 언어 서비스 인스턴스는 ts.compilerOptions사용자 정의를 위해 사용자에게 노출되는 설정 API없이 고정되고 단순화 된으로 의도적으로 생성됩니다 .

귀하의 기능 요청은 실제로 오래 지속되는 것입니다. # 26338을 참조하십시오 . 2017 년으로 거슬러 올라가지 만 vscode 팀은 응답을 꺼리는 것 같습니다.

그래서 여기서 막 다른 골목 ... 공식 확장으로는 불가능합니다.

가능한 해결책 은 html-language-features 프로젝트 를 포크하여 사용자 지정 빌드를 만들어 원하는 기능을 포함하는 것입니다. 기본 제공 확장을 비활성화하고 사용자 지정 빌드로 바꿀 수 있습니다.

수정할 코드에 관해서는 TS 프로그래밍 API의 전문가는 아니지만 위의 github 문제에서 찾은 @shuaihuGao 녀석의 패치 를 참조 할 수 있습니다 . 패치는 포함 된 JS 스크립트의 유효성을 검사 할 때 포함될 파일 html.libDefinitionFiles목록을 가져 오는 설정 옵션 을 추가합니다 .d.ts.

전적으로 당신이 요구하는 것은 아니지만 그럼에도 불구하고 좋은 해결 방법입니다. 시도해보고 여기에서 링크를 다운로드하십시오 .