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

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

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

Может быть, он уже существует

Всегда сначала проверяйте DefinitiveTyped ( https://github.com/DefiniteTyped/DefiniteTyped ). Это репозиторий сообщества, полный буквально тысяч файлов .d.ts, и вполне вероятно, что то, что вы используете, уже есть. Вам также следует проверить TypeSearch ( https://microsoft.github.io/TypeSearch/ ), который является поисковым механизмом для опубликованных NPM файлов .d.ts; это будет иметь немного больше определений, чем DefinitiveTyped. Несколько модулей также поставляют свои собственные определения как часть своего дистрибутива NPM, поэтому также посмотрите, так ли это, прежде чем пытаться написать свои собственные.

Может быть, вам не нужен

TypeScript теперь поддерживает --allowJsфлаг и сделает больше выводов на основе JS в файлах .js. Вы можете попробовать включить файл .js в компиляцию вместе с --allowJsнастройкой, чтобы проверить, дает ли это достаточно хорошую информацию о типе. TypeScript распознает такие вещи, как классы в стиле ES5 и комментарии JSDoc в этих файлах, но может сработать, если библиотека странным образом инициализирует себя.

Начните с --allowJs

Если --allowJsвам дали неплохие результаты , и вы хотите , чтобы написать лучший файл определения себя, вы можете комбинировать --allowJsс , --declarationчтобы увидеть «лучшее предположение» Машинописи по адресу типов библиотеки. Это даст вам достойную отправную точку и может быть таким же хорошим, как и файл, созданный вручную, если комментарии 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как Райан описывает, или вы можете указать declaration: trueпри compilerOptionsв вашем tsconfig.jsonпредположении , что вы уже имели tsconfig.jsonпод свой проект.

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

Как говорит Райан, компилятор 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

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

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

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

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

При создании вашей собственной библиотеки вы можете создавать *.d.tsфайлы с помощью команды tsc(TypeScript Compiler), например, так: (при условии, что вы собираете свою библиотеку в 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)