SpreadJS and TypeScript

September 20 2016

For some developers, working with TypeScript provides better tools and options than just JavaScript by itself. SpreadJS script code can be written in TypeScript to provide that enhanced functionality in conjunction with the power of SpreadJS. In this blog, you will learn how to use TypeScript in place of JavaScript code to implement SpreadJS functionality. The download for this sample can be found here: TypeScriptHTMLAPP_SpreadJS The finished TypeScript page.

Set Up the Project

Start off by creating an empty ASP.NET web application in Visual Studio 2015. Once the project has been created, add a page with a DIV element for SpreadJS on it:


<!DOCTYPE html>  

<html lang="en">  
<head>  
    <meta charset="utf-8" />  
    <title>TypeScript HTML App</title>  
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />  
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gcspread.sheets.all.9.40.20161.0.min.js"></script>  
</head>  
<body>  
    <h1>TypeScript HTML App</h1>  

    <div id="content">  
        <div id="ss" style="width:700px;height:400px;border:1px solid gray"></div>  
    </div>  
</body>  
</html>

Add TypeScript

For information on how to add TypeScript with SpreadJS, see this documentation link: http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#typescript.html As described in the link above, add the SpreadJS TypeScript definition file: The TypeScript definition file in the Solution Explorer. Then add a file to the project to contain the TypeScript code called “app.ts”, and reference that file you just added:


/// <reference path="definition/gcspread.sheets.d.ts" />

Now script code can be added to the “app.ts” file just as you would normal JavaScript code:


window.onload = () => {  
    var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));  
    var sheet = spread.getActiveSheet();  
    sheet.setRowHeight(3, 100);  
    sheet.setColumnWidth(3, 100);  
    sheet.getCell(3, 3).wordWrap(true).value("SpreadJS\\nTypeScript");  
};

In the web page, add a reference to this new TypeScript file with your code in it:


<head>  
    <meta charset="utf-8" />  
    <title>TypeScript HTML App</title>  
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />  
    <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gcspread.sheets.all.9.40.20161.0.min.js"></script>  
    <script src="app.ts"></script>  
</head>

If done correctly, the TypeScript code should compile to JavaScript and show the SpreadJS element with the changes made from the TypeScript code: The finished TypeScript page. Since TypeScript code compiles to generic JavaScript code, the result runs just like normal JavaScript code with SpreadJS. This tutorial showed how to use TypeScript code with SpreadJS to provide strongly-typed access and better information about the code when developing.

MESCIUS inc.