JSX(TSX)
Introduction
We can write your Alexa speech by using JSX.
Before
handlerInput.responseBuilder
.speak("Hello! It's a nice development. How are you?")
.reprompt("How are you?")
.getResponse()
After
/** @jsx ssml */
import {
ssml,
SpeechScriptJSX,
} from '@ask-utils/speech-script'
export class HelloWorldIntentScript extends SpeechScriptJSX {
speech() {
return (
<speak>
<p>Hello! It's a nice development. How are you?</p>
</speak>
)
}
reprompt() {
return (
<speak>
<p>How are you?</p>
</speak>
)
}
}
Generate by CLI
We can easy to create a new route and handler file with using TSX from TalkyJS CLI.
$ talky g router HelloWorldIntent --ssml tsx
? What type do you handle the request? IntentRequest
CREATE src/HelloWorldIntent/HelloWorldIntent.router.ts (504 bytes)
CREATE src/HelloWorldIntent/HelloWorldIntent.speech.tsx (449 bytes)
CREATE src/HelloWorldIntent/tests/HelloWorldIntent.router.spec.ts (1246 bytes)
CREATE src/HelloWorldIntent/tests/HelloWorldIntent.speech.spec.tsx (518 bytes)
$ talky g handler HelloWorldIntent --ssml tsx
? What type do you handle the request? IntentRequest
CREATE src/HelloWorldIntent/HelloWorldIntent.handler.ts (504 bytes)
CREATE src/HelloWorldIntent/HelloWorldIntent.speech.tsx (449 bytes)
CREATE src/HelloWorldIntent/tests/HelloWorldIntent.handler.spec.ts (1246 bytes)
CREATE src/HelloWorldIntent/tests/HelloWorldIntent.speech.spec.tsx (518 bytes)
Request object type
We can set the request type using generics
/** @jsx ssml */
import {
ssml,
SpeechScriptJSX,
} from '@ask-utils/speech-script'
import { Request } from 'ask-sdk-model'
export class HelloWorldIntentScript extends SpeechScriptJSX<Request, {
randomNumber: number
}> {
speech() {
return (
<speak>
<p>Hello! Your rucky number is {this.options.randomNumber}.How are you?</p>
</speak>
)
}
}
In this example, we can easy to write code for ConnectionsResponse.
/** @jsx ssml */
import {
ssml,
SpeechScriptJSX,
} from '@ask-utils/speech-script'
import { interfaces } from 'ask-sdk-model'
type ConnectionsResponse = interfaces.connections.ConnectionsResponse
export class ConnectionsResponseScript extends SpeechScriptJSX<ConnectionsResponse> {
speech() {
const {
payload,
status,
} = this.props.request
return (
<speak>
<p>Your connection result status is {status}. and payload {payload['key']}</p>
</speak>
)
}
}
Custom property
We can put any custom property from the request.
/** @jsx ssml */
import {
ssml,
SpeechScriptJSX,
} from '@ask-utils/speech-script'
import { Request } from 'ask-sdk-model'
export class HelloWorldIntentScript extends SpeechScriptJSX<Request, {
randomNumber: number
}> {
speech() {
return (
<speak>
<p>Hello! Your rucky number is {this.options.randomNumber}.How are you?</p>
</speak>
)
}
}
And we can put the custom property like this example.
import { Router } from "@talkyjs/core";
import { HelloWorldIntentScript } from './HelloWorldIntent.speech'
export const HelloWorldIntentRouter: Router = {
requestType: "IntentRequest",
intentName: "HelloWorldIntent",
handler: async (handlerInput) => {
const script = new HelloWorldIntentScript(handlerInput, {
randomNumber: Math.random()
})
return script
.createResponseBuilder()
.getResponse();
}
}
export default HelpIntentRouter