기존 JavaScript 라이브러리에서 .d.ts "입력" 정의 파일을 어떻게 생성합니까?
-
12-12-2019 - |
문제
나는 내 라이브러리와 타사 라이브러리를 많이 사용하고 있습니다."typings" 디렉터리에 Jquery 및 WinRT에 대한 일부 내용이 포함되어 있는 것을 확인했습니다.하지만 그것들은 어떻게 만들어지나요?
해결책
문제의 라이브러리, 작성 방법, 원하는 정확도 수준에 따라 몇 가지 옵션을 사용할 수 있습니다.대략적으로 바람직함의 내림차순으로 옵션을 검토해 보겠습니다.
어쩌면 이미 존재할 수도 있습니다.
항상 DefinedTyped를 확인하세요(https://github.com/DefinitelyTyped/DefinitelyTyped) 첫 번째.이것은 말 그대로 수천 개의 .d.ts 파일로 가득 찬 커뮤니티 저장소이며, 사용 중인 파일이 이미 거기에 있을 가능성이 매우 높습니다.TypeSearch도 확인해야 합니다(https://microsoft.github.io/TypeSearch/) 이는 NPM 게시 .d.ts 파일에 대한 검색 엔진입니다.이는 DefinedTyped보다 약간 더 많은 정의를 갖습니다.몇몇 모듈은 NPM 배포판의 일부로 자체 정의를 제공하므로 직접 작성하기 전에 그러한 경우인지 확인하세요.
어쩌면 당신은 필요하지 않을 수도 있습니다
TypeScript는 이제 다음을 지원합니다. --allowJs
플래그를 지정하고 .js 파일에서 더 많은 JS 기반 추론을 수행합니다.다음과 함께 .js 파일을 컴파일에 포함시켜 볼 수 있습니다. --allowJs
이것이 충분한 유형 정보를 제공하는지 확인하기 위한 설정입니다.TypeScript는 이러한 파일에서 ES5 스타일 클래스 및 JSDoc 주석과 같은 항목을 인식하지만 라이브러리가 이상한 방식으로 자체적으로 초기화되면 문제가 발생할 수 있습니다.
시작하기 --allowJs
만약에 --allowJs
괜찮은 결과를 얻었고 더 나은 정의 파일을 직접 작성하고 싶다면 결합할 수 있습니다. --allowJs
~와 함께 --declaration
라이브러리 유형에 대한 TypeScript의 "최상의 추측"을 확인합니다.이는 적절한 출발점이 될 것이며, JSDoc 주석이 잘 작성되어 있고 컴파일러가 이를 찾을 수 있다면 손으로 작성한 파일만큼 좋을 수 있습니다.
dts-gen 시작하기
만약에 --allowJs
작동하지 않았습니다. dts-gen을 사용하고 싶을 수도 있습니다(https://github.com/Microsoft/dts-gen) 시작점을 얻으려면.이 도구는 개체의 런타임 형태를 사용하여 사용 가능한 모든 속성을 정확하게 열거합니다.장점으로는 이것이 매우 정확한 경향이 있지만 이 도구는 추가 유형을 채우기 위해 JSDoc 주석을 스크랩하는 것을 아직 지원하지 않습니다.다음과 같이 실행합니다.
npm install -g dts-gen
dts-gen -m <your-module>
이것은 생성됩니다 your-module.d.ts
현재 폴더에 있습니다.
스누즈 버튼을 누르세요
나중에 모든 작업을 수행하고 한동안 유형 없이 지내고 싶다면 TypeScript 2.0에서 이제 다음을 작성할 수 있습니다.
declare module "foo";
그러면 당신은 import
그만큼 "foo"
유형이 있는 모듈 any
.나중에 다루고 싶은 전역변수가 있다면 다음과 같이 작성하세요.
declare const foo: any;
그것은 당신에게 줄 것입니다 foo
변하기 쉬운.
다른 팁
다음 중 하나를 사용할 수 있습니다. tsc --declaration fileName.ts
Ryan이 설명한 것처럼 또는 지정할 수 있습니다. declaration: true
아래에 compilerOptions
당신의 tsconfig.json
당신이 이미 가지고 있다고 가정 tsconfig.json
귀하의 프로젝트에서.
이 문제를 다루는 가장 좋은 방법은 ( relinselytyped 에서 사용할 수없는 경우)는 다음과 같습니다.전체 라이브러리가 아닌 사용하는 것에 대해서만 선언을 작성하십시오.이렇게하면 작업이 많이 줄어들고 추가로 컴파일러가 누락 된 방법에 대해 불평함으로써 도움이됩니다.
Ryan이 말했듯이 tsc 컴파일러에는 스위치가 있습니다 --declaration
이는 .d.ts
의 파일 .ts
파일.또한 (버그 제외) TypeScript는 Javascript를 컴파일할 수 있어야 하므로 기존 Javascript 코드를 tsc 컴파일러에 전달할 수 있습니다.
http : //channel9.msdn.com / posts / anders-hejlsberg-steve-lucco-and-luke-hoban-inside typescript 00:33:52 00:33:52 그들은 WebIDL 및 WinRT 메타 데이터를 Typescript D.TS
다음은 여러 개의 TypeScript 정의 파일을 포함하는 라이브러리를 생성하는 일부 PowerShell입니다. *.js
최신 JavaScript가 포함된 파일.
먼저 모든 확장자를 다음으로 변경하십시오. .ts
.
Get-ChildItem | foreach { Rename-Item $_ $_.Name.Replace(".js", ".ts") }
둘째, TypeScript 컴파일러를 사용하여 정의 파일을 생성합니다.많은 컴파일러 오류가 있지만 이를 무시할 수 있습니다.
Get-ChildItem | foreach { tsc $_.Name }
마지막으로 모든 것을 합친다. *.d.ts
파일을 하나로 index.d.ts
, 제거 import
진술 및 제거 default
각 수출 명세서에서.
Remove-Item index.d.ts;
Get-ChildItem -Path *.d.ts -Exclude "Index.d.ts" | `
foreach { Get-Content $_ } | `
where { !$_.ToString().StartsWith("import") } | `
foreach { $_.Replace("export default", "export") } | `
foreach { Add-Content index.d.ts $_ }
이것은 사용 가능한 단일로 끝납니다. index.d.ts
많은 정의가 포함된 파일입니다.
스크립트 # 또는 SharkKit을 지원하는 제 3 자 JS 라이브러리의 기존 매핑을 찾습니다.이러한 C #의 사용자가 .js 크로스 컴파일러는 이제 문제에 직면 해 있으며 제 3 자 lib를 스캔하여 뼈대 C # 클래스로 변환하는 오픈 소스 프로그램을 게시했습니다.그렇다면 스캐너 프로그램이 C #. 대신 Typescript를 생성하도록 해킹하십시오.
실패하지 않아도 3 번째 파티 LIB에 대한 C # Public 인터페이스를 TypeScript 정의로 변환하는 것이 소스 JavaScript를 읽음으로써 동일한 작업보다 간단 할 수 있습니다.
나의 특별한 관심은 Sencha의 Extjs Ria Framework이며, 스크립트 # 또는 SharpKit에 대한 C # 해석을 생성하기 위해 프로젝트가 출판 된 것으로 알고 있습니다.
자신만의 라이브러리를 만들 때 다음을 만들 수 있습니다. *.d.ts
파일을 사용하여 tsc
(TypeScript 컴파일러) 명령은 다음과 같습니다.(라이브러리를 다음과 같이 구축한다고 가정합니다. dist/lib
폴더)
tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly
-d
(--declaration
):생성합니다*.d.ts
파일--declarationDir dist/lib
:생성된 선언 파일의 출력 디렉터리입니다.--declarationMap
:각 해당 '.d.ts' 파일에 대한 소스맵을 생성합니다.--emitDeclarationOnly
:'.d.ts' 선언 파일만 내보냅니다.(컴파일된 JS 없음)
(참조 문서 모든 명령줄 컴파일러 옵션에 대해)
아니면 예를 들어 package.json
:
"scripts": {
"build:types": "tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly",
}
그런 다음 다음을 실행하십시오. yarn build:types
(또는 npm run build:types
)