# Combining Fuse with TypeScript

**URL:** <https://forums.fusetools.com/t/combining-fuse-with-typescript/5349>\
**Category:** Show and Tell\
**Created:** [January 5, 2017, 3:20pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349 "2017-01-05T15:20:51Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vladimir\_Milenko](https://avatars.discourse-cdn.com/v4/letter/v/85f322/32.png) [@Vladimir\_Milenko](https://forums.fusetools.com/u/Vladimir_Milenko)\
**Post date:** [January 5, 2017, 3:20pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/1 "2017-01-05T15:20:51Z")

</div>

### Introduction

It’s not a secret that es5 now looks a little bit silly.  
As a frontend engineer with love to TypeScript, i have a suggestion how to use TypeScript/ECMAScript2015 in Fuse.  
First of all, the same technique can be applied to use es6 and babel, but for now i will describe steps to use TypeScript.

### Step 1:

Install typescript and typings. To do this you need to do:

```auto
npm install typescript -g
npm install typings -g

```

### Step 2:

Create a tsconfig.json file inside your project folder.  
Here is example of tsconfig:

```json
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false
    }
}

```

### Step 3:

Now just create a TS file and run

```auto
 tsc --watch

```

### Step 4:

Inside your .ux file just reference compiled js file like so

```auto
<JavaScript File="{TSFileName}.js"/> 

```

## Example

MainView.ts:

```auto
const Observable = require("FuseJS/Observable");

class ViewModel{
	public name = Observable("TestVal");
	public test = Observable("");
}

export const vm = new ViewModel();

```

MainView.ux:

```auto
<App>
    <ClientPanel>
    	<JavaScript File="MainView.js"/>
        <StackPanel>
        	<Text Value="{vm.name}"/>
        	<TextBox Value="{vm.name}"/>
    	</StackPanel>
    </ClientPanel>
</App>

```

## FAQ:

**TypeScript compiler error ‘require’ is undefined**

\*\*Answer: \*\* Just open terminal and install node typings:

```auto
npm install @types/node --save-dev

```

[TypeScript Official site](https://www.typescriptlang.org)

---

<div class="post-metadata">

**Author:** ![Vladimir\_Milenko](https://avatars.discourse-cdn.com/v4/letter/v/85f322/32.png) [@Vladimir\_Milenko](https://forums.fusetools.com/u/Vladimir_Milenko)\
**Post date:** [January 5, 2017, 5:04pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/2 "2017-01-05T17:04:25Z")

</div>

#### Stage 2. Working with TS Classes

After testing that TS classes works, we need to be able to call TS functions from UX.  
Well, it’s not as simple as it could be, but there are still possibility to use typescript in Fuse:)

First of all. If we define function inside TS class like this:

```auto
export class ViewModel{
	public name = Observable("TestVal");
	validate():boolean{
		console.log("validation method called. Context variable:" + this.name.value);
		return true;
	}
}

```

And then in .ux file write smh like this:

```auto
<Button Clicked="{vm.validate}"/>

```

We will receive absolutely nothing.  
So, let’s see what can we do.  
First of all, each time Clicked event is called, we will receive whole page context which will be stored in args.data.  
Let’s define few interfaces. This will help us keep static typing of our application.

```auto
interface EventArgs{
	data:PageData
}
interface PageData{
	vm:ViewModel;
}

```

Now, we have to export our method which will call our ViewModel’s validate method.

```auto
export const validateEmail:(args:EventArgs)=>boolean = (args:EventArgs)=>{
	let {vm} = args.data; // this syntax means that we will take args.data.vm and create local variable vm of type ViewModel
	return vm.validate();
}

```

That’s it! If we now write:

```auto
	<MyButton Text="Click me" Clicked="{validateEmail}"/>

```

This will call validateEmail method, which is exported by our .ts file, which then will take our context, and call validate() method on vm object.

Here is how final .ts file looks like:

```auto
const Observable = require("FuseJS/Observable");

interface EventArgs{
	data:PageData
}
interface PageData{
	vm:ViewModel;
}

export class ViewModel{
	public name = Observable("TestVal");
	validate(){
		console.log("validation method called. Context variable:" + this.name.value);
		return true;
	}
}
export const vm = new ViewModel();

export const validateEmail:(args:EventArgs)=>boolean = (args:EventArgs)=>{
	let {vm} = args.data;
	return vm.validate();
}

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 5, 2017, 5:34pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/3 "2017-01-05T17:34:30Z")

</div>

Very cool! Thanks for sharing!

---

<div class="post-metadata">

**Author:** ![Vladimir\_Milenko](https://avatars.discourse-cdn.com/v4/letter/v/85f322/32.png) [@Vladimir\_Milenko](https://forums.fusetools.com/u/Vladimir_Milenko)\
**Post date:** [January 5, 2017, 5:50pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/4 "2017-01-05T17:50:48Z")

</div>

> **Anders Lassen wrote:**
> 
> Very cool! Thanks for sharing!

It would be nice if we could call methods from objects inside .ux.  
It’s a little bit strange that i can’t call method on object:(

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 5, 2017, 5:52pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/5 "2017-01-05T17:52:52Z")

</div>

Yes, this is all coming. A lot of work is being done on the Fuse side to make UX expressions more powerful 🙂

---

<div class="post-metadata">

**Author:** ![Vladimir\_Milenko](https://avatars.discourse-cdn.com/v4/letter/v/85f322/32.png) [@Vladimir\_Milenko](https://forums.fusetools.com/u/Vladimir_Milenko)\
**Post date:** [January 5, 2017, 5:53pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/6 "2017-01-05T17:53:44Z")

</div>

> **Anders Lassen wrote:**
> 
> Yes, this is all coming. A lot of work is being done on the Fuse side to make UX expressions more powerful 🙂

Is Fuse open-source or is there any ways to see what’s happening inside?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 5, 2017, 5:57pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/7 "2017-01-05T17:57:06Z")

</div>

It is sort of open source, we give out code on request if there is a point in doing so (e.g. for debugging). But, at the moment it is not being actively run as an open source project (not accepting PRs, no open issue tracker, no public repos).

We are however working in the direction of open sourcing it - it’s just a matter of having the resources to do it properly.

---

<div class="post-metadata">

**Author:** ![Vladimir\_Milenko](https://avatars.discourse-cdn.com/v4/letter/v/85f322/32.png) [@Vladimir\_Milenko](https://forums.fusetools.com/u/Vladimir_Milenko)\
**Post date:** [January 5, 2017, 6:03pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/8 "2017-01-05T18:03:08Z")

</div>

> **Anders Lassen wrote:**
> 
> It is sort of open source, we give out code on request if there is a point in doing so (e.g. for debugging). But, at the moment it is not being actively run as an open source project (not accepting PRs, no open issue tracker).
> 
> We are however working in the direction of open sourcing it - it’s just a matter of having the resources to do it properly.

Well, i might be looking to write some framework-over-framework 😃  
It would be nice if you share some specific information about how to get router and other parts, using some Dependency Injection or smth like that. To be able to write app logic outside of .ux components.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [January 5, 2017, 6:05pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/9 "2017-01-05T18:05:43Z")

</div>

Have a look at the `<Closure>` tag. It was designed to allow an alternative way of accessing all the symbols in an UX scope (beyond the implicit injection that happens in a `<JavaScript>` tag).

[https://www.fusetools.com/docs/fuse/reactive/closure](https://www.fusetools.com/docs/fuse/reactive/closure)

Used like this:

```
  <Closure Ready="{handler}" />

```

If e.g. `router` is defined in the scope of the closure, then you have:

```
   function handler(arg) {
          arg.router // <-- here you go
   }
```

---

<div class="post-metadata">

**Author:** ![Vladimir\_Milenko](https://avatars.discourse-cdn.com/v4/letter/v/85f322/32.png) [@Vladimir\_Milenko](https://forums.fusetools.com/u/Vladimir_Milenko)\
**Post date:** [January 5, 2017, 6:09pm UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/10 "2017-01-05T18:09:59Z")

</div>

> **Anders Lassen wrote:**
> 
> Have a look at the `<Closure>` tag. It was designed to allow an alternative way of accessing all the symbols in an UX scope (beyond the implicit injection that happens in a `<JavaScript>` tag).
> 
> [Fuse](https://www.fusetools.com/docs/fuse/reactive/closure)
> 
> Used like this:
> 
> ```
> <Closure Ready="{handler}" />
> 
> ```
> 
> If e.g. `router` is defined in the scope of the closure, then you have:
> 
> ```
> function handler(arg) {
> arg.router // <-- here you go
> }
> 
> ```

Nice!  
I would see if i can split ui from logic.

---

<div class="post-metadata">

**Author:** ![Stefan](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/stefan/32/132_2.png) [@Stefan](https://forums.fusetools.com/u/Stefan)\
**Post date:** [May 5, 2017, 5:58am UTC](https://forums.fusetools.com/t/combining-fuse-with-typescript/5349/11 "2017-05-05T05:58:37Z")

</div>

Hey Vladimir thank you for your post and mini-tutorial.

I wanted to ask if you had put together a Typings file for Fusetools yet, and if this may be worthwhile?