Code Monkey home page Code Monkey logo

ui5-typescript's Introduction

Continuous Integration styled with prettier REUSE status

UI5-TypeScript

UI5-TypeScript is an npm mono-repo that contains tooling to support TypeScript in SAPUI5 and OpenUI5 Projects. This tooling can enable:

  • Better IDE integration for UI5 projects (e.g content assist).
  • Using TypeScript compiler to perform type checks on UI5 application code.
  • More easily implementing UI5 applications and controls in TypeScript thus enjoying the general benefits of TypeScript.

It currently contains two public packages:

  • @ui5/dts-generator npm-ui5-dts-generator A generator which transforms the UI5 api.json format to TypeScript type definition (*.d.ts) format. This is useful to enable the type-safe usage of a UI5 control library written in JavaScript in code that uses TypeScript.

  • @ui5/ts-interface-generator npm-ui5-ts-interface-generator A tool supporting control development in TypeScript. It is used at development time and generates type definitions for the control API methods which are only created at runtime by the UI5 framework.

How to obtain the UI5 TypeScript signatures?

The UI5 type signatures are created and published as part of the UI5 build process. They are available for SAPUI5 as well as OpenUI5. The SAPUI5 type definitions can be obtained like this:

With npm

npm install @sapui5/types --save-dev

With Yarn

yarn add @sapui5/types --dev

NOTE: the type definitions define ES6-style module names for the entities. They require the usage of modern JavaScript syntax with ES modules and classes, which requires an additional transformation step that can be run together with the anyway required TypeScript transpilation.

Before the type definitions were generated in ES module style, they did declare all APIs with their global names, which are discouraged to be used and will no longer be available in UI5 2.x. The dts-generator still has the capability to generate this legacy "globals" version of the type definitions, for compatibility reasons. These legacy definitions are released as "ts-types" instead of "types", but will no longer be produced for UI5 2.x.

Find all information about using UI5 with TypeScript at https://sap.github.io/ui5-typescript!

Usage

To see the suggested project setup for TypeScript development with the types packages, please check out the TypeScript Hello World app. It not only can serve as copy template, but also includes a detailed step-by-step guide for creating this setup from scratch.

The TypeScript branch of the "UI5 CAP Event App" sample demonstrates a slightly more complex application, using the same setup. It comes with an explanation of what UI5 TypeScript code usually looks like and what to consider.

As mentioned, the best resource for using UI5 with TypeScript is https://sap.github.io/ui5-typescript.

See the demos directory for consumption examples of the legacy signatures.

Support

For issues caused by the generators please open issues on GitHub.
However, issues in the UI5 type definitions which are also present in the API documentation originate from the JSDoc comments in the original OpenUI5/SAPUI5 code, so please directly open an OpenUI5/SAPUI5 ticket in this case.

Contributing

See CONTRIBUTING.md.

ui5-typescript's People

Contributors

bd82 avatar akudev avatar dependabot-preview[bot] avatar petermuessig avatar greenkeeper[bot] avatar dependabot[bot] avatar codeworrior avatar flovogt avatar mauriciolauffer avatar randombyte avatar misappi avatar sapirpol avatar sebbi08 avatar sebastianwolf-sap avatar nlunets avatar m8524769 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.