How to Connect an SQL database with TypeScript

Introduction

In this post, 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

Thank you for reading!

#typescript #sql #database