- PVSM.RU - https://www.pvsm.ru -
Статья описывает трансляцию кода TypeScript в OData запросы во время компиляции программы.
Плагин babel-plugin-ts2odata [1] выполняет разбор JavaScript AST с помощью библиотеки TsToOdata [2] описание которой в моей предыдущей статье Типизированные запросы OData в TypeScript [3].
Недостатком первой версии библиотеки TsToOdata являлось наличие зависимостей на пакеты babel [4]/parser, babel [4]/traverse, разбор JavaScript кода во время выполнения тоже было достаточно затратным. Теперь эти зависимости и разбор кода вынесены в отдельный пакет ts2odata-babel [5]. Для разработки можно использовать пакет ts2odata который имеет devDependencies на ts2odata-babel и выполняет трансляцию запросов во время выполнения, а для релиза можно использовать сборку с подключением плагина, который выполнит всю работу во время компиляции вашего проекта. В результате работы плагина в вашей программе останутся только две зависимости на пакеты ts2odata и cross-fetch [6].
Для начала работы нужно установить пакеты:
npm install --save-dev @babel/core @babel/cli
npm install ts2odata
npm install --save-dev babel-plugin-ts2odata
Добавить в корень проекта файл babel.config.js:
module.exports = {
plugins: [
[
'babel-plugin-ts2odata',
{
odataNamespace: 'OdataToEntity.Test.Model'
}
]
]
};
ключ odataNamespace необходим для правильной трансляции запросов если ваш OData сервис не поддерживает перечисления без пространства имен (Namespace).
Добавить в секцию scripts файла package.json:
"build": "tsc --build && npx babel ./source --out-dir ./lib"
где source папка с исходным кодом TypeScript, lib папка с обработанным плагином JavaScript кодом.
Например код на TypeScript:
let price = 2.1;
let orders = context.Orders.filter(o => o.Items.every(i => i.Price >= price), { price })
.select(i => { return { orderYear: i.Date.getFullYear() } }).toArrayAsync();
Транслируется в:
let price = 2.1;
let orders = context.Orders.filter("Items/all(d:d/Price ge {price})", {
price
}).select("[{"expression":"year(Date)","alias":"orderYear","kind":1}]").toArrayAsync();
Другие примеры работы плагина можно посмотреть в папке с тестами [7], где файл code.js [8] результат компиляции файла QueryTests.ts [9], а файл output.js [10] результат работы плагина.
Работа плагина была проверена на проекте vue.js.
Это мой первый проект на TypeScript, поэтому буду признателен замечаниям и комментариям к коду, возможно, что-то можно было сделать проще или правильнее.
Автор: vorona_net
Источник [11]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/352287
Ссылки в тексте:
[1] babel-plugin-ts2odata: https://github.com/voronov-maxim/TsToOdata/tree/master/babel-plugin-ts2odata
[2] TsToOdata: https://github.com/voronov-maxim/TsToOdata
[3] Типизированные запросы OData в TypeScript: https://habr.com/ru/post/489122/
[4] babel: https://habr.com/ru/users/babel/
[5] ts2odata-babel: https://github.com/voronov-maxim/TsToOdata/tree/master/ts2odata-babel
[6] cross-fetch: https://github.com/lquixada/cross-fetch
[7] папке с тестами: https://github.com/voronov-maxim/TsToOdata/tree/master/babel-plugin-ts2odata/test/fixtures/test1
[8] code.js: https://github.com/voronov-maxim/TsToOdata/blob/master/babel-plugin-ts2odata/test/fixtures/test1/code.js
[9] QueryTests.ts: https://github.com/voronov-maxim/TsToOdata/blob/master/ts2odata/test/QueryTests.ts
[10] output.js: https://github.com/voronov-maxim/TsToOdata/blob/master/babel-plugin-ts2odata/test/fixtures/test1/output.js
[11] Источник: https://habr.com/ru/post/497928/?utm_source=habrahabr&utm_medium=rss&utm_campaign=497928
Нажмите здесь для печати.