# Ref with TypeScrip

**URL:** <https://discourse.aurelia.io/t/ref-with-typescrip/974>\
**Category:** Help Requests\
**Created:** [March 26, 2018, 9:48am UTC](https://discourse.aurelia.io/t/ref-with-typescrip/974 "2018-03-26T09:48:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![eliemichael](https://avatars.discourse-cdn.com/v4/letter/e/ac91a4/32.png) [@eliemichael](https://discourse.aurelia.io/u/eliemichael)\
**Post date:** [March 26, 2018, 9:48am UTC](https://discourse.aurelia.io/t/ref-with-typescrip/974/1 "2018-03-26T09:48:34Z")

</div>

hello everybody,  
I am experiencing a problem with the following code

-app.html

`<template> <h1 view-model.ref="test" click.delegate="testAlert">${message}</h1> </template>`

-app.ts

`export class App { message = 'Hello World!'; testAlert(){ alert(this.test.textContent) } }`

in the app.ts, I get this error “[ts] the property test does not exist in app”

When I create the same project using JavaScript instead of TypeScript, everything works correctly. Is there a bug in TypeScript that prevents me from using ref or is there something that I am not doing correctly?

Please Help

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [March 26, 2018, 10:04am UTC](https://discourse.aurelia.io/t/ref-with-typescrip/974/2 "2018-03-26T10:04:38Z")

</div>

You’re seeing an error reported by the TypeScript compiler. When using JavaScript there is no compiler so you wont get an error. This is one of the pros of TypeScript!

The `test` property does not appear to exist in your `App` class so the compiler is correct by the looks of it.

---

<div class="post-metadata">

**Author:** ![mttmccb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mttmccb/32/38_2.png) [@mttmccb](https://discourse.aurelia.io/u/mttmccb)\
**Post date:** [March 26, 2018, 10:41am UTC](https://discourse.aurelia.io/t/ref-with-typescrip/974/3 "2018-03-26T10:41:43Z")

</div>

You need to add `test` as a property, something like this.

```auto
export class App {
  message = ‘Hello World!’;
  test: HTMLElement;
  testAlert(){
    alert(this.test.textContent)
  }
}

```

It would be nice if it “discovered” it somehow but you need to tell it.

---

<div class="post-metadata">

**Author:** ![EisenbergEffect](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/eisenbergeffect/32/2655_2.png) [@EisenbergEffect](https://discourse.aurelia.io/u/EisenbergEffect)\
**Post date:** [March 26, 2018, 5:21pm UTC](https://discourse.aurelia.io/t/ref-with-typescrip/974/5 "2018-03-26T17:21:09Z")

</div>

Try changing your binding to this `click.delegate="testAlert()"` and see if that does the trick. Also, you’ll want to add the `test` property to your view model as others have stated.

---

<div class="post-metadata">

**Author:** ![eliemichael](https://avatars.discourse-cdn.com/v4/letter/e/ac91a4/32.png) [@eliemichael](https://discourse.aurelia.io/u/eliemichael)\
**Post date:** [March 26, 2018, 6:12pm UTC](https://discourse.aurelia.io/t/ref-with-typescrip/974/6 "2018-03-26T18:12:16Z")

</div>

Thanks, your suggestion worked

---

<div class="post-metadata">

**Author:** ![eliemichael](https://avatars.discourse-cdn.com/v4/letter/e/ac91a4/32.png) [@eliemichael](https://discourse.aurelia.io/u/eliemichael)\
**Post date:** [March 26, 2018, 6:14pm UTC](https://discourse.aurelia.io/t/ref-with-typescrip/974/7 "2018-03-26T18:14:15Z")

</div>

Thanks for the help. I appreciate your advice and assistance