기존 JavaScript 라이브러리에서 .d.ts "typings"정의 파일을 어떻게 생성합니까?

내 자신과 타사 모두 많은 라이브러리를 사용하고 있습니다. "typings"디렉토리에 Jquery 및 WinRT 용 디렉토리가 포함되어 있습니다. 어떻게 작성합니까?

문제의 라이브러리, 작성 방법 및 원하는 정확도 수준에 따라 사용할 수있는 몇 가지 옵션이 있습니다. 옵션을 대략 내림차순으로 검토합니다.

어쩌면 이미 있을지도 모른다

항상 DefinitelyTyped ( https://github.com/DefinitelyTyped/DefinitelyTyped )를 먼저 확인하십시오 . 이것은 문자 그대로 수천 개의 .d.ts 파일로 가득 찬 커뮤니티 저장소이며 사용중인 것이 이미있을 가능성이 큽니다. 또한 NPM에서 게시 한 .d.ts 파일의 검색 엔진 인 TypeSearch ( https://microsoft.github.io/TypeSearch/ ) 도 확인해야 합니다. 이것은 DefinitelyTyped보다 약간 더 많은 정의를 갖습니다. 일부 모듈은 NPM 배포의 일부로 자체 정의를 제공하므로 직접 작성하기 전에 해당 사례인지 확인하십시오.

어쩌면 당신은 필요하지 않을 수도 있습니다

TypeScript는 이제 --allowJs플래그를 지원하며 .js 파일에서 더 많은 JS 기반 추론을 만듭니다. 컴파일에 .js 파일을 포함시켜 --allowJs설정 과 함께 충분한 유형 정보를 제공하는지 확인할 수 있습니다. TypeScript는 이러한 파일에서 ES5 스타일 클래스 및 JSDoc 주석과 같은 것을 인식하지만 라이브러리가 이상한 방식으로 초기화되면 트립 될 수 있습니다.

시작하기 --allowJs

만약이 --allowJs당신에게 괜찮은 결과를주고 당신 자신, 당신은 결합 할 수 있습니다 더 나은 정의 파일 작성하려는 --allowJs와 --declaration라이브러리의 유형에 타이프의 "추측"을 참조하십시오. JSDoc 주석이 잘 작성되어 있고 컴파일러에서 주석을 찾을 수 있으면 수작업으로 작성한 파일만큼 좋을 수 있습니다.

dts-gen 시작하기

경우 --allowJs작동하지 않았다, 당신은 DTS-세대를 (사용 할 수 있습니다 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.tsRyan이 설명 하는 것처럼 사용할 수도 있고 이미 프로젝트에 있다고 가정 할 때 declaration: true아래 compilerOptions에 지정할 수도 있습니다 .tsconfig.jsontsconfig.json

이것을 처리하는 가장 좋은 방법은 (선언 파일이 DefinitelyTyped에서 사용할 수없는 경우 ) 전체 라이브러리가 아닌 사용하는 것에 대해서만 선언을 작성하는 것입니다. 이렇게하면 작업이 많이 줄어 듭니다. 또한 누락 된 메소드에 대해 불평함으로써 컴파일러가 도움을 줄 수 있습니다.

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에 설명 된대로 WebIDL 및 WinRT 메타 데이터를 TypeScript d.ts

다음은 *.js최신 JavaScript 가 포함 된 여러 파일 을 포함하는 라이브러리 인 단일 TypeScript 정의 파일을 만드는 PowerShell입니다 .

먼저 모든 확장을로 변경하십시오 .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많은 정의를 포함하는 사용 가능한 단일 파일로 끝납니다 .

Script # 또는 SharpKit을 지원하는 타사 JS 라이브러리의 기존 매핑을 찾고 싶습니다. 이 C #에서 .js 로의 크로스 컴파일러 사용자는 현재 직면 한 문제에 직면했을 것이며 타사 라이브러리를 스캔하고 기본 C # 클래스로 변환하는 오픈 소스 프로그램을 게시했을 수도 있습니다. 그렇다면 C # 대신 스캐너 프로그램을 해킹하여 TypeScript를 생성하십시오.

실패하면 타사 라이브러리의 C # 공용 인터페이스를 TypeScript 정의로 변환하는 것이 소스 JavaScript를 읽는 것보다 똑같을 수 있습니다.

내 관심은 Sencha의 ExtJS RIA 프레임 워크이며 Script # 또는 SharpKit에 대한 C # 해석을 생성하기 위해 프로젝트가 게시 된 것을 알고 있습니다.

자신의 라이브러리를 만들 때 다음과 같이 (TypeScript Compiler) 명령 *.d.ts을 사용하여 파일을 만들 수 있습니다 tsc(라이브러리를 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)