Accessing Components
Script Components in Lens Studio are able to reference one another whether they have been created with JavaScript, TypeScript or Custom Component.
Accessing JavaScript from JavaScript
To access properties and methods of a Component created with JavaScript, the property or method must be declared to a predefined object which all ScriptComponent have called script
. In the example code below script.numberVal is declared and made available for other scripts to access it.
script.numberVal = 1;
script.printHelloWorld = function () {
print('hello');
};
//@input Component.ScriptComponent refScript
print(script.refScript.numberVal);
script.refScript.printHelloWorld();
Accessing TypeScript from JavaScript
To access properties and methods of a Component created with TypeScript, the property or method must be declared within the scoped TypeScript defined Class. Properties and methods defined in a TypeScript file are by default public members. In the example code below numberVal is declared within the scope of the class TSComponentA and made available for other scripts to access it.
@component
export class TSComponentA extends BaseScriptComponent {
numberVal: number = 1;
onAwake() {}
printHelloWorld() {
print('Hello, world!');
}
}
//@input Component.ScriptComponent refScript
print(script.refScript.numberVal);
script.refScript.printHelloWorld();
Accessing TypeScript from TypeScript
ScriptComponent created with TypeScript can be accessed directly with the Class type. In the example below, TSComponentA is created and being referenced by TSComponentB. To access the TSComponentA’s property and methods, a reference property @input with the typeof TSComponentA is declared in TSComponentB.
@component
export class TSComponentA extends BaseScriptComponent {
numberVal: number = 1;
onAwake() {}
printHelloWorld() {
print('Hello, world!');
}
}
import { TSComponentA } from './TSComponentA';
@component
export class TSComponentB extends BaseScriptComponent {
@input
refScript: TSComponentA;
onAwake() {
print(this.refScript.numberVal);
this.refScript.printHelloWorld();
}
}
Accessing JavaScript from TypeScript
With Type Completion:
TypeScript enhances coding by providing automatic code completion. To ensure this feature works consistently when using JavaScript files, it’s advised to create a declaration file. This file describes the JavaScript code structure so that your TypeScript components can recognize and work with it seamlessly. After setting up a declaration file, you can access a JavaScript component in TypeScript using the @input decorator. Please refer to the example code below.
script.numberVal = 1;
script.printHelloWorld = function () {
print('hello');
};
export interface JSComponentA extends ScriptComponent {
numberVal: number;
printHelloWorld: () => void;
}
import { JSComponentA } from './JSComponentA_Declaration';
@component
export class TSComponentB extends BaseScriptComponent {
@input('Component.ScriptComponent')
refScript: JSComponentA;
onAwake() {
print(this.refScript.numberVal);
this.refScript.printHelloWorld();
}
}
Without Type Completion:
To access properties and methods created from JavaScript Components in your TypeScript Component without a declaration file, use the @input decorator and set the type to any.
script.numberVal = 1;
script.printHelloWorld = function () {
print('hello');
};
@component
export class TSComponentB extends BaseScriptComponent {
@input('Component.ScriptComponent')
refScript: any;
onAwake() {
print(this.refScript.numberVal);
this.refScript.printHelloWorld();
}
}
Accessing Custom Component from JavaScript
To access inputs of Custom Components from another JavaScript, a typename must be declared. In JavaScript, typenames can be declared with @typename. Once a typename is declared, it can be accessed as an input property by declaring @input to your Custom Component property.
//@typename CustomComponentExample
//@input CustomComponentExample customComponentExample
script.customComponentExample.hasTexture();
Accessing Custom Component from TypeScript
In TypeScript, typenames can be declared with @typename TypeScript decorators, the type declared is keyof ComponentNameMap. Once a typename is declared, it can be accessed in the @input decorator as a constructor parameter.
@component
export class TSComponentB extends BaseScriptComponent {
@typename
CustomComponentExampleType: keyof ComponentNameMap;
@input('CustomComponentExampleType')
customComponentExample: any;
onAwake() {
this.customComponentExample.hasTexture();
}
}