Introduction
A TypeScript confirm box is the same as a TypeScript alert box. It is a way to ensure your users explicitly confirm an action. It supplies the user with a choice; they can either press "Ok" to confirm the popup's message or they can press "Cancel" and not agree to the popup's request.
The following example show how to use and show a confirm box in TypeScript.
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
Give the name of your application as "ConfirmBox" and then click "Ok".
Step 2
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, css file and aspx files.
Coding
ConfirmBox.ts
|
class ConfirmBox
{
show()
{
var c = confirm("Are you sure you want to do that?");
var status = document.getElementById("content");
if (c == true)
{
status.innerHTML = "You confirmed, thanks";
}
else
{
status.innerHTML = "You cancelled the action";
}
}
}
window.onload = () =>
{
var bttn = <HTMLButtonElement>document.getElementById("Button1");
bttn.onclick = function ()
{
var obj = new ConfirmBox();
obj.show();
}
}; |
ConfirmBox_Demo.htm
|
<!DOCTYPEhtml>
<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">
<head>
<metacharset="utf-8"/>
<title>TypeScript HTML App</title>
<linkrel="stylesheet"href="app.css"type="text/css"/>
<scriptsrc="app.js"></script>
<styletype="text/css">
#Button1 {
height:41px;
}
</style>
</head>
<body>
<h2>ConfirmBox in TypeScript HTML App</h2>
<inputid="Button1"type="button"value="Perform Action"/>
<divid="content"/>
</body>
</html> |
app.js
|
var ConfirmBox = (function () {
function ConfirmBox() { }
ConfirmBox.prototype.show = function () {
var c = confirm("Are you sure you want to do that?");
var status = document.getElementById("content");
if(c == true) {
status.innerHTML = "You confirmed, thanks";
} else {
status.innerHTML = "You cancelled the action";
}
};
return ConfirmBox;
})();
window.onload = function () {
var bttn = document.getElementById("Button1");
bttn.onclick = function () {
var obj = new ConfirmBox();
obj.show();
};
};
//@ sourceMappingURL=app.js.map |
Output 1
![first-image.jpg]()
Output 2
After clicking on the "Ok" button:
![click-ok-image.jpg]()
Output 3
Click on "Cancel":
![cancel-message-image.jpg]()
Reference By
http://www.typescriptlang.org/