prettier/tests/html_js/typescript.html

79 lines
2.1 KiB
HTML

<script type="application/x-typescript">
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
</script>
<script lang="ts">
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
</script>
<script lang="tsx">
class CommentBox extends React.Component<{ url: string, pollInterval: number}, CommentData> {
constructor(){
super()
this.state = { data: [] };
}
fetchComments() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: (data) => this.setState({ data: data }),
error: (xhr, status, err) => console.error(status, err)
})
}
componentDidMount() {
this.fetchComments();
setInterval(this.fetchComments.bind(this), this.props.pollInterval);
}
render() {
let handleCommentSubmit = (comment: { author: string, text: string }) => {
console.warn('comment submitted!', comment);
const updated = this.state.data.slice(0);
updated.push(comment);
this.setState({ data: updated });
}
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data}/>
<CommentForm onCommentSubmit={handleCommentSubmit} />
</div>
);
}
}
</script>