# Ionic 6 with phaser 3 getting error when I using 'fill'?

**URL:** <https://phaser.discourse.group/t/ionic-6-with-phaser-3-getting-error-when-i-using-fill/12680>\
**Category:** Phaser 3\
**Created:** [December 18, 2022, 4:42am UTC](https://phaser.discourse.group/t/ionic-6-with-phaser-3-getting-error-when-i-using-fill/12680 "2022-12-18T04:42:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![benanson](https://avatars.discourse-cdn.com/v4/letter/b/5f8ce5/32.png) [@benanson](https://phaser.discourse.group/u/benanson)\
**Post date:** [December 18, 2022, 4:42am UTC](https://phaser.discourse.group/t/ionic-6-with-phaser-3-getting-error-when-i-using-fill/12680/1 "2022-12-18T04:42:13Z")

</div>

Hello everyone,  
I would like to integrate my game to ionic.  
but I find when I type color code get the below error

`this.scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: "#000" });`

error message

```javascript
(property) fill: string
Argument of type '{ fontSize: string; fill: string; }' is not assignable to parameter of type 'TextStyle'.
  Object literal may only specify known properties, and 'fill' does not exist in type 'TextStyle'.ts(2345)

```

```javascript
export class GameScene extends Phaser.Scene {
  cursors: Phaser.Types.Input.Keyboard.CursorKeys;
  platforms: Phaser.Physics.Arcade.StaticGroup;
  player: Phaser.Physics.Arcade.Sprite;
  scoreText: Phaser.GameObjects.Text; // I try to set it any, but not work

  constructor() {
    super({ key: 'game' });
  }
.......
  create() {
 this.scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: "#000" }); //error in fill: "#000" 
  }
......

```

Anyone know how to fix it ??? thank you very much

---

<div class="post-metadata">

**Author:** ![wondermen](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/wondermen/32/7192_2.png) [@wondermen](https://phaser.discourse.group/u/wondermen)\
**Post date:** [December 18, 2022, 6:30am UTC](https://phaser.discourse.group/t/ionic-6-with-phaser-3-getting-error-when-i-using-fill/12680/2 "2022-12-18T06:30:26Z")

</div>

![Example-Space-Game](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/5fb005714c13048278f78aaaea87beb2f25f9ea4.png)

There is no problem on the web, I tested it. probably { fontSize: string; fill: string; } There is a problem here.

```javascript
'{ fontSize: string; fill: string; }'

```

---

<div class="post-metadata">

**Author:** ![benanson](https://avatars.discourse-cdn.com/v4/letter/b/5f8ce5/32.png) [@benanson](https://phaser.discourse.group/u/benanson)\
**Post date:** [December 18, 2022, 8:11am UTC](https://phaser.discourse.group/t/ionic-6-with-phaser-3-getting-error-when-i-using-fill/12680/3 "2022-12-18T08:11:39Z")

</div>

Thank you for reply  
I am using { fontSize: string, fill: string } indeed , Not use **;**

 ![helloworld](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e9311e900049aa69b6f604fe15a701a517002b2a.png)

But Finally  
I find that solution that downgrade my project to ionic 5  
“@ionic-native/core”: “^5.0.7”,  
“@ionic-native/splash-screen”: “^5.0.0”,  
“@ionic-native/status-bar”: “^5.0.0”,  
It work fine now…

Is it possible to solve `(property) fill: string`. without downgrade  
or i have missing something setting?? Thank you very much

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [December 18, 2022, 12:03pm UTC](https://phaser.discourse.group/t/ionic-6-with-phaser-3-getting-error-when-i-using-fill/12680/4 "2022-12-18T12:03:10Z")

</div>

Try `color` instead of `fill`.

---

<div class="post-metadata">

**Author:** ![wondermen](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/wondermen/32/7192_2.png) [@wondermen](https://phaser.discourse.group/u/wondermen)\
**Post date:** [December 18, 2022, 5:50pm UTC](https://phaser.discourse.group/t/ionic-6-with-phaser-3-getting-error-when-i-using-fill/12680/5 "2022-12-18T17:50:14Z")

</div>

Most likely, the incoming string value is not defined because there are no quotes. Please try the code below!

```javascript
this.scoreText = this.add.text(16, 16, 'score: 0', { font: `$(string)`, fill: `$(string)` });

```

---

<div class="post-metadata">

**Author:** ![kheug35](https://avatars.discourse-cdn.com/v4/letter/k/a5b964/32.png) [@kheug35](https://phaser.discourse.group/u/kheug35)\
**Post date:** [December 20, 2022, 1:59am UTC](https://phaser.discourse.group/t/ionic-6-with-phaser-3-getting-error-when-i-using-fill/12680/6 "2022-12-20T01:59:26Z")

</div>

Please Kindly check this tutorial

> **[Documentation - Object Types](https://www.typescriptlang.org/docs/handbook/interfaces.html)**
>
> How TypeScript describes the shapes of JavaScript objects.

just add  
`interface TextStyle {}`

and change to  
`this.scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: "#000" } as TextStyle);`

it will work fine.