Extend HTMLElement in TypeScript - html

I'm trying to extend the HTMLElement in typescript. I tried different methods and they all work, but i keep getting an type-script error:
Argument Sprite is not assignable to parameter type Node;
When i do :
document.body.appendChild(createSprite());
interface Sprite extends HTMLElement {
}
function createSprite() : Sprite {
return <Sprite> document.createElement("div");
}
document.body.appendChild(createSprite());

I ran this through the TypeScript Playground (and added some text so I could see the result) and it works fine:
interface Sprite extends HTMLElement {
}
function createSprite() : Sprite {
return <Sprite> document.createElement("div");
}
var sprite = createSprite();
sprite.innerHTML = 'Test';
document.body.appendChild(sprite);

Related

Attempted to assign to readonly property ECMAScript React Native

I am trying to assign a value to an array declared in my Component. Unfortunately, exception is thrown.
TypeError: Attempted to assign to readonly property
Even if I remove strict mode, still exception is being raised. Can please someone guide me how can I make a variable both readable and writable? Thanks..!
Code:
class RootView extends Component {
cachedData : []; //declared array here
//trying to assign dictionary in some function
someFunction(results) {
this.cachedData[this.state.searchString.length - 1] = results;
//exception raised here
}
}
Your syntax is incorrect. Add it to a constructor.
class RootView extends Component {
constructor() {
super();
this.cachedData = [];
}
someFunction(results) {
this.cachedData[this.state.searchString.length - 1] = results;
}
}
If your transpiler supports experimental code (stage 0), you can use the following:
class RootView extends Component {
cachedData = [];
someFunction(results) {
this.cachedData[this.state.searchString.length - 1] = results;
}
}

Functions and variables disappearing of scope when using package

In the document class, I got the following code:
package {
...
public class Main extends Sprite {
public function Main(){
...
model:IModel = new Model();
controller:IController = new Controller(model);
var controls:CompositeView = new Controls(model,controller)
//Accessing controls.x provokes 1202: Access of undefined property x in package view
}
}
}
Where class CompositeView is a extension of Component which in turn extends Sprite.
Component:
package view
{
....
public class Component extends Sprite
{
...
}
}
CompositeView:
package view
{
....
public class CompositeView extends Component
{
...
}
}
Controls:
package view
{
....
public class Controls extends CompositeView
{
...
}
}
But unfortunately, when I try to access controls.x I get a undefined property error.
Changing the package for all classes to the same name fixed this issue. E.g use package for everything instead of package and package.view.
What can be done in Actionscript to keep code organization and avoid this issue ?
Problem solved: var controls was used as a package name, changing name of the variable solved.

How to reference an instance when its property value is an event target?

Ok, here's a simple example of what I mean:
public class Blob extends MovieClip {
public var gfx:BlobClip; //BlobClip is a MovieClip class in my assets library
public var bCount:uint;
//...
So gfx is the graphical representation of my Blob object.
I set up the mouse event to make the gfx clip clickable:
blob.gfx.addEventListener(MouseEvent.CLICK, blobClick); //blob is an instance of Blob
In the blobClick function I can of course access the gfx clip of blob using e.target.
function blobClick(e:MouseEvent) {
trace("Target:"+e.target);
}
But I wish instead to refer to the blob object itself so that I may access the bCount property. How do I do this? :(
I figured I might have to use e.target.root or e.target.parent but these relate to display.
Any assistance in this matter would be greatly appreciated.
I hope there are no typos... I did not run it into flash or flex...but this should give you what you need.
public class Blob extends MovieClip {
public var gfx:BlobClip; //BlobClip is a MovieClip class in my assets library
public var bCount:uint;
...
// this is your contructor
public function Blob()
{
super();
// add reference here
gfx.parentBlob = this;
}
....
}
Add the property 'parentBlob' inside BlobClip
class BlobClip extends MovieClip
{
...
public var parentBlob:Blob = null;
...
public function BlobClip()
{
super();
}
}
Then in your event handler you can have something like this
function blobClick(e:MouseEvent)
{
var bClip:BlobClip = e.target as BlocbClip;
// this is what you need...
var blob:Blob = bClip.parentBlob;
}

AS3 undefined function #1006

I have a parent class called 'main.as'. I am trying to get the child class to call main's function. They both reside in the same folder.
// main.as //
package {
public class main extends MovieClip {
public function main() {
var child:child_mc = new child_mc(this);
}
public function callFunction():void {
trace("Done it");
}
}
}
.
// child.as //
package {
import main;
public class child extends MovieClip {
private var main:MovieClip = new MovieClip();
public function child(main:MovieClip):void {
this.main = main;
main.callFunction();
}
}
}
This is the error I've been getting:
TypeError: Error #1006: callFunction is not a function.
so I tried doing a trace like this
trace(main.callFunction);
and it says undefined. Can someone tell me what I am missing. I get this feeling its a very basic thing that I have overlooked!
Your "child" package is defined as "main". I'm not even sure how it complied, let alone run to the point of showing the error message you got.
I believe the code below should do what you expected.
(I also took the liberty to rename the classes to use CamelCase (with initial caps) to adhere to best practices and to be easier to distinguish from variable names.)
Main.as
package {
public class Main extends MovieClip {
public function Main() {
var child:ChildMC = new ChildMC();
child.main = this;
}
public function callFunction():void {
trace("Done it");
}
}
}
EDIT: I just saw your comment that points out that child_mc is a MovieClip in the Library. I guess then that the child class is set as the Base Class of the child_mc?
If so, you cannot pass properties through the instantiator, you need to find another way to pass along the instance of the Main class to the Child class.
One way would be to add a setter, like the following:
Child.as (Base Class for ChildMC)
package {
public class Child extends MovieClip {
private var _main:Main;
public function Child() {
}
public function set main(main:Main):void {
this._main = main;
this._main.callFunction();
}
}
}

Flash As3: Process and return data from a child class

I am stuck here. I have a child class that I want to use mainly to format a string variable called mystring, whose value changes according to the object clicked. I need to pass mystring into the child class and format it there. The formatted string is then returned to the parentclass for placement. I just couldn't get the code right. Can anyone please help?
Main Class: package { public class parentclass extends Sprite{
public var mystring:String="";
public function parentclass () {
mysting="good"
---
}
}
Child Class:
package {
public class childclass extends Sprite{
public function childclass () {
var mycapstring:String=
//do these 3 things:
//1. get the value of mystring from parentclass
//2. format mystring
//3. return formatted string to parentclass
}
}
}
First off, when you reference something as a child class it implies that it extends the parent class. In your case, you are simply using one class inside another (composition).
Is there a reason you don't want to just have a function that does this for you as part of parentclass?
package {
public class ParentClass extends Sprite{
protected var mystring:String = "";
public function ParentClass () {
this.mysting = "good"
}
public function format():String {
return this.mystring + " | " + this.mystring;
}
}
}
Is there something else going on here? Why does childclass need to extend Sprite, is it a DisplayObject? You will need to give more context as to what you are trying to do for me to help any further.