Skip to main content
Version: 9.2

Integration of TS functionality

To integrate TypeScript in your form defelopment process a "tsconfig.json" file to the formdefinition folder. A sample config file is included in our "formDev" project.

TypeScript files can not be included to the form directly because of this they have to be transpiled first to normal JavaScript files.

The JS files have to be linked in the scriptTag within the form definition’s header:

<script data-hf-src="[FILENAME].js"></script>

For detailed examples have a look at the forms provided within the formdefinitions folder of the "formDev".

The basic structure of HybridForms TypeScript (file)​

  1. Define your namespace 
    namespace HFFormdefinition.BaseHelpers {
        // variables, functions and classes
    }

Naming convention for namespacing:

  • HFFormdefinition.[FORMDEFINITION-TITLE] or

  • HFFormdefinition.[EXTERNAL-JS-FILENAME]

Info

Define the namespace once within the html form definition, especially when using external files. These namespace have to unique for each form definition to avoid side effects.

Full TypeScript example​

namespace HFFormdefinition.BaseHelpers {
    // variables, functions and classes
}

HTML form definition example​

<html>
    <head>
        [...]
        <script data-hf-src="BaseHelpers.js"></script>
</head>
<body>
    <script>
        WinJS.Namespace.define("HFFormdefinition.BaseHelpers", {});
    </script>

[...]
</body>
<html>