How To Connect to a Database In TypeScript

Introduction

Note: This program will work only on Internet Explorer.

In this article, I will explain how to connect to a SQL database with TypeScript in a web application and how to get data from the database in TypeScript. First I created a database "EmpDetail". Then I created a table in the database.

Query Code

CREATE TABLE[dbo]. [emp]([id][int] NULL, [name][varchar](50) NULL, [salary][int] NULL) ON[PRIMARY]

Now Insert some Data in the emp table.

Complete Program

aap.ts

class DataConnectivity
{
LoadDB()
{
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=****;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from emp", connection);
rs.MoveFirst();
var span = document.createElement("span");
span.style.color = "Blue";
span.innerText = " ID " + " Name " + " Salary";
document.body.appendChild(span);
while (!rs.eof)
{
var span = document.createElement("span");
span.style.color = "green";
span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2);
document.body.appendChild(span);
rs.MoveNext();
}
rs.close();
connection.close();
}
}
window.onload = () =>
{
var obj = new DataConnectivity();
var bttn = < HTMLButtonElement > document.getElementById("ShowData");
bttn.onclick = function()
{
obj.LoadDB();
}
};

DataConnectivity_Demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataConnectivity_Demo.aspx.cs" Inherits="Data_Connectivity.DataConnectivity_Demo" %>
<
!DOCTYPE html >
<
html xmlns = "http://www.w3.org/1999/xhtml" >
<
head runat = "server" >
<
title > < /title>
<
script src = "app.js" > < /script>
<
/head>
<
body >
<
form id = "form1"
runat = "server" >
<
div style = "font-size: large; font-weight: bold" >
Click on button
for show data < br / >
<
br / >
<
input id = "ShowData"
type = "button"
value = "Show Data"
style = "font-weight: bold" / >
<
/div>
<
/form>
<
/body>
<
/html>

app.js

var DataConnectivity = (function() {
function DataConnectivity() {}
DataConnectivity.prototype.LoadDB = function() {
var connection = new ActiveXObject("ADODB.Connection");
var connectionstring = "Data Source=.;Initial Catalog=EmpDetail;Persist Security Info=True;User ID=sa;Password=*****;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select * from emp", connection);
rs.MoveFirst();
var span = document.createElement("span");
span.style.color = "Blue";
span.innerText = " ID " + " Name " + " Salary";
document.body.appendChild(span);
while (!rs.eof) {
var span = document.createElement("span");
span.style.color = "green";
span.innerText = "\n " + rs.fields(0) + " | " + rs.fields(1) + " | " + rs.fields(2);
document.body.appendChild(span);
rs.MoveNext();
}
rs.close();
connection.close();
};
return DataConnectivity;
})();
window.onload = function() {
var obj = new DataConnectivity();
var bttn = document.getElementById("ShowData");
bttn.onclick = function() {
obj.LoadDB();
};
};
//@ sourceMappingURL=app.js.map

Output

For more information, download the attached sample application.