Как вы создаете файл определения .d.ts «typings» из существующей библиотеки JavaScript?

117

Я использую множество библиотек, как своих, так и сторонних. Я вижу, что каталог "typings" содержит некоторые для JQuery и WinRT... но как они создаются?

Теги:
tsc

7 ответов

147
Лучший ответ

Есть несколько вариантов, доступных вам в зависимости от библиотеки, о которой идет речь, о том, как она написана, и о том, какой уровень точности вы ищете. Давайте рассмотрим варианты, примерно в порядке убывания желательности.

Возможно, он уже существует

Всегда проверяйте DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped). Это сообщество repo, полное буквально тысяч файлов .d.ts, и, скорее всего, вы уже используете то, что вы используете. Вы также должны проверить TypeSearch (https://microsoft.github.io/TypeSearch/), который является поисковой системой для опубликованных DLL файлов, опубликованных NPM; это будет иметь несколько больше определений, чем DefinitelyTyped. Несколько модулей также отправляют свои собственные определения как часть их распределения 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.

  • 21
    Ой ... это будет серьезным препятствием для входа во многих случаях. Было бы неплохо иметь инструмент, который мог бы выводить хотя бы «лучшие догадки» на основе вывода типа. Хотя они могут быть неоптимальными, они могут по крайней мере настраиваться с течением времени.
  • 7
    +1 - еще --declarations хорошая новость: --declarations генерирует как файл .js файл .d.ts , что означает, что вам нужно запустить только одну компиляцию.
Показать ещё 8 комментариев
22

Вы можете использовать tsc --declaration fileName.ts, как описано в Ryan, или указать declaration: true под compilerOptions в tsconfig.json, если у вас уже есть tsconfig.json в вашем проекте.

  • 3
    Это лучший ответ, если вы разрабатываете модуль Angular 2, которым хотите поделиться.
  • 0
    Если я пробую tsc --declaration test.ts я получаю сообщение об ошибке Cannot find name... для типов, для которых я пытаюсь создать файл объявления :) Так что мне нужны типы, прежде чем я смогу их объявить?
Показать ещё 1 комментарий
11

Лучший способ справиться с этим (если файл декларации недоступен в DefinitelyTyped), это писать объявления только для вещей вы используете, а не всю библиотеку. Это значительно сокращает работу - и, кроме того, компилятор может помочь, жалуясь на недостающие методы.

9

Как говорит Райан, у tsc-компилятора есть переключатель --declaration, который генерирует файл .d.ts из файла .ts. Также обратите внимание, что (запрет ошибок) TypeScript должен быть способен скомпилировать Javascript, поэтому вы можете передать существующий код javascript в tsc-компилятор.

  • 1
    Кажется, в настоящее время передача файлов * .js в tsc приводит к ошибке «Ошибка чтения файла« angular-resource.js »: Файл не найден». Поэтому вы должны явно переименовать файлы * .js в * .ts, чтобы иметь возможность использовать tsc. См. Эту проблему для получения дополнительной информации - я попытался использовать это на angularjs: typescript.codeplex.com/workitem/26
  • 3
    из того, что я могу сказать, tsc может скомпилировать любой допустимый JavaScript, но если он не является допустимым TypeScript (компиляция выдает предупреждения), то флаг --declarations не выводит файл .d.ts, поэтому, если ваша библиотека не написана на TypeScript, вы можете еще нужно вручную создать файл объявлений.
7

как описано в http://channel9.msdn.com/posts/Anders-Hejlsberg-Steve-Lucco-and-Luke-Hoban-Inside-TypeScript в 00:33:52, они создали инструмент для преобразования метаданных WebIDL и WinRT в TypeScript d.ts

1

Вот несколько PowerShell, которые создают единый файл определения TypeScript библиотеку, которая включает в себя несколько файлов *.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 файлом, который включает в себя многие определения.

  • 0
    Второй шаг, Get-ChildItem | foreach {tsc --declaration $ _. Name} сработало (добавлен отсутствующий параметр --declaration)
1

Я бы искал существующее сопоставление ваших сторонних JS-библиотек, поддерживающих Script # или SharpKit. Пользователи этих компиляторов С# to.js перейдут к проблеме, с которой вы сейчас столкнулись, и могли опубликовать программу с открытым исходным кодом для сканирования вашей сторонней библиотеки и преобразования в скелетные классы С#. Если так взломать программу сканера для генерации TypeScript вместо С#.

В противном случае перевод открытого интерфейса С# для вашей сторонней библиотеки lib в определения TypeScript может быть проще, чем сделать то же самое, прочитав исходный JavaScript.

Мой особый интерес представляет среда Sencha ExtJS RIA, и я знаю, что были опубликованы проекты для генерации интерпретации С# для Script # или SharpKit

Ещё вопросы

Сообщество Overcoder
Наверх
Меню