The TypeScript data source is one of the integration methods available on the Kuika platform that allows you to develop custom functions and business logic. Using TypeScript, you can define custom operations within your application, create methods that accept parameters, and use these methods in application workflows.

With the TypeScript data source, you can write custom code to address needs beyond the built-in actions, customize data processing workflows, and create reusable functions.

Add a Data Source Connection to Your Application with TypeScript

1. Log in to the Kuika platform and open the project you’ll be working on from the Apps screen.
2. Open the Datasources module from the top menu.
3. On the Datasources screen that opens, you can view your existing data sources under the Recently modified and Data sources tabs, and search using the Search by name field.
4. Click the Create a Function card at the top of the screen. This card allows you to create custom functions using C#, TypeScript, Python, Java, Go, and Rust.
5. From the Development list that opens, select the TypeScript (Custom TypeScript functions) option. You can use the ↑/↓ keys to navigate the list and the Enter key to make a selection.

6. Enter a name for your data source in the Name field (e.g., userguidetypescript).
7. Click the CREATE button to complete the process. To cancel the operation, click the CANCEL button; to return to the language selection, click the < TypeScript link.

Note: You can also start the process of adding a new data source by clicking the + icon next to the Sources heading in the left panel.

Anatomy of the TypeScript Editor Screen

A. Top Menu

• Back Button (←): Takes you back to the Datasources screen.
• Data Source Name: The name of the TypeScript data source you created (e.g., userguidetypescript) is displayed alongside the TS icon. You can switch between data sources using the drop-down arrow next to it, and edit the name using the pencil icon.
• CREATE Button: Used to save the TypeScript data source you’ve created.

B. Editor Toolbar

• Undo / Redo: Allows you to undo or redo changes.
• Copy / Paste: Used to copy code and paste it into the editor.
• Tidy Up Code: Use the magic wand icon to tidy up, align, and make your code more readable.
• Word Wrap: Turns word wrap on or off so that long lines wrap to the next line based on the editor’s width.
• Font Size (− 12 +): Allows you to increase or decrease the font size in the editor; you can return to the default size using the icon next to it.
• External Libraries (SOON): This area is reserved for adding external libraries. It is marked with the “SOON” label; this feature is not yet active and will be available soon. The green checkmark icon next to it indicates that your code is valid.

C. TypeScript Editor

This is the code editing area. All custom functions are defined here.

Default example structure:

typescript

class Userguidetypescript {
static NewFunctionName(parameter1: string): string {
// Your code here
return parameter1;
}
}

This structure illustrates the following:

• Code is defined within a class. The class name is automatically generated from the data source’s name (e.g., userguidetypescript → Userguidetypescript).
• Functions are defined as static.
• They can accept parameters.
• Parameter types can be specified.
• Return types can be defined.
• The area where you will write your code is marked with a comment line (// Your code here) in the function body.

D. Kuika AI Panel

This is the AI assistant located on the right side of the screen. By typing your needs into the Type here... field, you can receive code suggestions for your TypeScript actions and use examples.

E. Test Console

This area, located at the bottom of the screen, is used to test the methods you’ve written. It can be opened and closed using the arrow on the right.

In this section:

• The method list is displayed.
• Parameter input fields are generated.
• You can select Server or Client.
• The result output can be viewed.

Configuring TypeScript Data Source Settings

Manual Code Writing

You can write your code manually directly in the editor.

Example:

typescript

class Userguidetypescript {
static ToUpperCase(text: string): string {
return text.toUpperCase();
}
}

Code Generation with Kuika AI

You can generate code automatically by entering a description in the Kuika AI field in the right panel.

Example command:

Create a method that converts the entered text to uppercase.

Defining Parameters

You can add parameters to your functions.

Example:

typescript

static Sum(value1: number, value2: number): number {
return value1 + value2;
}

This method takes two numbers and returns their sum.

Specifying the Return Type

The data type to be returned must be specified in the function definition. Example types: string, number, boolean, object, any.

Testing Methods with the Test Console

After writing your code, you can use the Test Console section below.

1. Select the method you want to test.
2. Enter sample data into the parameter fields.
3. Select the Server or Client option.
4. Run the method.
5. Check the returned result.

Example:

typescript

static Hello(name: string): string {
return “Hello ” + name;
}

Parameter: Kuika
Expected output: Hello Kuika

Saving the Data Source with CREATE

After completing and testing your code, you can save the TypeScript data source by clicking the CREATE button in the top-right corner. The saved data source becomes available for use within the application.

Expected Output / Result

Once these steps are complete:

• The TypeScript data source is added to the Sources list.
• The defined methods become available for use in the system.
• Custom business rules can be managed via code.
• A reusable function structure is created.