TypeScript의 FileReader를 구하면

TypeScript 2.7에서 FileReader 코드를 사용할 때 유형 정보가 부족할까 봐 Microsoft/TSJS-lib-generator에서 PR #398 제출(45ypeScript 2.9).
사건의 시작은 Type Script 2.7로 작성된 이런 코드였다.

const reader = new FileReader()
reader.onload = (event) => {
  // Property 'result' does not exist on type 'EventTarget'.
  const url = event.target.result
}
reader.readAsFileURL(file)

MDN용 FileReaderonload 위와 같은 간단한 파일로 읽기는 하지만 이걸 쓰면'없다event.target.result'는 소리를 듣는다.
같은 질문Type Script의 issue도 있었기 때문에 입을 다물고 타입 스크립트 자신의 FileReader를 입수하도록 하기로 했다.

어디서 구하다

FileReader.onload는 node_modules/typescript/lib/lib.dom.d.ts에서 이렇게 정의했다.
node_modules/typescript/lib/lib.dom.d.ts

interface FileReader extends EventTarget {
    // ...
    onload: ((this: FileReader, ev: ProgressEvent) => any) | null;
    // ...
}

이것ev은 길다target: EventTarget | null.그것target에서 태어났다면result 썼다event.target.result도 뭐라고 하지 않았을 것이다.인상으로는 이런 형식이었으면 좋겠어요.

interface FileReader extends EventTarget {
    // ...
    onload: ((this: FileReader, ev: FileReaderProgressEvent) => any) | null;
    // ...
}

interface FileReaderProgressEvent extends ProgressEvent {
    result: FileReader | null;
}

이렇게 하려면 타입 스크립트lib.dom.d.ts를 구해야 한다.어떻게 하면 좋을까?
Type Script의 README의 Contribute 항목에서 CONTRIBUTING.md까지의 링크를 붙여 넣습니다.여기 적힌 대로 하면 돼.
lib로 이 자료를 검색하면 곧 Contributing lib.d.ts fixes 항목에 걸릴 것입니다.저기 있다

라이브러리의 원본 파일은 src/lib에 있습니다

src/lib/dom.generated.d.ts는 자동으로 생성되기 때문에 변경하고 싶은 경우https://github.com/Microsoft/TSJS-lib-generator에 PR

을 보냅니다.
위에 쓰여 있다.lib/README.md src/lib/dom.generated.d.ts는 생성lib/lib.dom.d.ts에 사용되는 파일입니다.
따라서 다시 쓰기lib.dom.d.ts는 다시 쓰기src/lib/dom.generated.d.ts가 필요하고, 다시 쓰기 위해서는 TSJS-lib-generator를 수정해야 한다.응, 길어.

TSJS-lib-generator란

TSJS-lib-generator는 창고에서 설명한 대로 DOM과 관련된 Type Script 및 JavaScript 라이브러리 파일을 생성하는 도구입니다.이 Contribution Guidelines에는 해야 할 일이 진지하게 적혀 있다.짧기 때문에 일본어로 번역된 것을 먼저 넣습니다.

Contribution Guidelines

TypeScript 창고의 dom.generated.d.ts, webworker.generated.d.ts, dom.iterable.generated.d.ts 파일을 베이스라인으로 사용합니다.초대장마다 스크립트를 실행하고 생성된 파일과 기선의 파일을 비교합니다.테스트를 통과하기 위해 신청 시 기선을 갱신해 주십시오.
일반적인 변경은 json 파일만 변경하면 됩니다.유형의 생성은 주로 addedTypes.json, overridingTypes.json, removedTyes.json 세 개의 파일을 사용한다.comments.json 파일 유형에 주석을 추가할 수 있습니다.마지막으로knownWorkerTypes.json WebWorker 환경에서 사용할 유형을 결정합니다.
각 파일의 형식을 컨텐트에서 살펴보십시오.
초대 요청을 보내는 일반적인 단계는 다음과 같습니다.

제작 여부TypeScript 웨어하우스의 issue

참조

inputfiles/addedTypes.json에 부족한 요소를 추가하고inputfiles/overridingTypes.json에서 덮어쓰고inputfiles/removedTypes.json에서 요소를 삭제

로컬에서 구축 스크립트를 실행하여 새 dom.generated.d.ts 및 webworker.generated.d.ts

작성

generated 폴더로 출력된 파일baselines을 사용하여 폴더를 업데이트하는 파일npm run baseline-accept

원문은 0단계에서 시작하지만 Qita라면 1로 바꿀 것 같다)
이상은 일역입니다.따라서 이 절차를 따라 FileReader.onload의 매개 변수 유형을 고칩니다.

1. Type Script의 issue 제작 여부 참조

마치 쓴 바와 같다.이때 FileReader.onLoad/onLoadEnd event argument has no target.result property의issue가 있기 때문에 이 형식을 참조하세요.

2. json 파일 편집

FileReader.onload의 유형을 바꾸기 위해 편집inputfiles/overridingTypes.json.inputfiles/overridingTypes.json에서 찾아보면 FileReader에 대해 이렇게 적혀 있습니다.
inputfiles/overridingTypes.json

            "FileReader": {
                "name": "FileReader",
                "properties": {
                    "property": {
                        "result": {
                            "name": "result",
                            "override-type": "any"
                        }
                     }
                }
            },

이번에 onload를 (this: FileReader, ev: FileReaderProgressEvent) => any로 바꾸고 싶어서 이렇게 썼어요.
inputfiles/overridingTypes.json

            "FileReader": {
                "name": "FileReader",
                "properties": {
                    "property": {
                        "onload": {
                            "name": "onload",
                            "override-type": "(this: FileReader, ev: FileReaderProgressEvent) => any"
                        },
                        "result": {
                            "name": "result",
                            "override-type": "any"
                        }
                    }
                }
            }

여기에 관해서 나는 현재의 TSJS-lib-generator를 확인했는데, 쓰는 방법이 바뀐 것 같다.
또 이번에 새롭게FileReaderProgressEventinputfiles/addedTypes.json 추가된 내용은 다음과 같다.
inputfiles/addedTypes.json

{
    "interfaces": {
        "interface": {
            // ...
            "FileReaderProgressEvent": {
                "name": "FileReaderProgressEvent",
                "extends": "ProgressEvent",
                "properties": {
                    "property": {
                        "name": {
                            "name": "target",
                            "read-only": 1,
                            "override-type": "FileReader | null"
                        }
                    }
                },
                "no-interface-object": "1"
            },
            // ...
        }
    }
}

name에 추가된 유형, properties에 이 유형이 가지고 있는 속성을 지정하는 등 이 파일에 대한 정의는 없지만 그 뜻을 추측할 수 있다.주의해야 할 점이 하나 있다"no-interface-object": "1".홍보 게시 후 댓글에 지적돼 추가된 것으로, 이것이 없으면 불필요한 대상으로 선언된다.

3. 새로운dom.generated.d.ts 및 웹워커generated.제작 d.ts

정의 형식의 json을 썼기 때문에 구축 스크립트dom를 실행합니다.generated.d.ts 및 웹워커generated.d.ts를 제작합니다.구축 스크립트는 README에 있는 것처럼 npm run build 실행할 수 있습니다.
생성된 형식 정의 파일에 문제가 있으면 json을 조정합니다.유사한 유형 정의가 있으면 다음 단계로 넘어가세요.

4. 베이스라인 업데이트

TSJS-lib-generator는 생성된 유형 정의 파일을 베이스라인의 유형 정의와 비교하여 예기치 않은 변경을 감지합니다.형식 정의 파일을 다시 쓰려고 합니다. npm run baseline-accept이렇게 생성된 유형 정의 파일이 베이스라인에 반영됩니다.

PR 보내면 accept에서 해주세요.

여기까지의 절차를 거쳐 TSJS-lib-generator에 PR을 보내는 상태가 되었습니다!비슷한 내용을 적어서 PR을 내보낼게요.나는 Microsoft/TSJS-lib-generator#398를 낼 때 상당히 간단한 내용을 썼다.
PR을 보내면 Microsoft의 bot이 CLA에 서명을 요청하기 때문에 서명합니다.

여기까지만 하면 시청자 댓글이 달릴 것 같다.내용에 문제가 없으면 accept로 처리되고 머지않아 타입 스크립트 자체에 흡수되겠죠.

총결산

Type Script의 유형 정의를 수정하는 방법은 에 설명되어 있습니다.구조만 알면 누구나 접근할 수 있다는 걸 전할 수 있었으면 좋겠어요.
끝은 아니지만 실제로 이것FileReader.onload에 대한 변경은 타입 스크립트 3.0이유가 있다에서 취소됐다.나는 매우 편리하다고 생각한다.
11일째tsukakei.잘 부탁드립니다!