How to integrate TypeScript components as frontend in JavaScript?
Overview
This article explains how to integrate Syncfusion EJ2 TypeScript components as frontend for JavaScript application.
Prerequisite
- .NET Core SDK
- TypeScript
- Visual Studio 2019
- Node
Creating ASP.NET Core MVC Application
You can create the application as directed in the following Microsoft documentation.
Initializing “package.json”
- Open the “Development Command Prompt” by navigating to “Tools” tab in the toolbar.
- Run the following command to initialize the “package.json” file.
npm init
Installing NPM Packages
Install the following list of NPM packages using the command provided below the list.
- TypeScript
- Webpack
- Webpack CLI
- TS Loader
- Terser Webpack Plugin
- Required Syncfusion Component
npm install typescript webpack webpack-cli ts-loader terser-webpack-plugin @syncfusion/ej2-grids --saveConfiguring TypeScript Compilation
You should provide proper compilations option as shown in the following code snippet.
{
"compilerOptions": {
"target": "es5",
"module": "ES2015",
"declaration": true,
"removeComments": true,
"noLib": false,
"experimentalDecorators": true,
"sourceMap": true,
"pretty": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitUseStrict": false,
"noFallthroughCasesInSwitch": true,
"allowJs": false,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"suppressImplicitAnyIndexErrors": true,
"lib": ["es2015.collection","es2015.core","es5","es2015.promise","dom"],
"types": []
},
"include": [ "../scripts/app.ts" ],
"exclude": [
"../node_modules"
],
"compileOnSave": false
}
Configuring Webpack
You can configure the webpack bundling properly, as shown in the following code snippet.
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
entry: path.join(__dirname, '/scripts/app.ts'),
output: {
filename: 'app.js',
path: __dirname + '/wwwroot/js'
},
devtool: false,
optimization: {
minimize: false,
minimizer: [new TerserPlugin(
{parallel: true,}
)],
usedExports: true,
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
configFile: "tsconfig.json"
}
},
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
};
Including TypeScript Code
Create a TypeScript file under a new directory in the application root, namely “scripts/app.ts”.
import { Grid, Group, Filter, Page, Sort } from '@syncfusion/ej2-grids';
import { data } from './datasource';
Grid.Inject(Group, Filter, Page, Sort);
let grid: Grid = new Grid({
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
{ field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
],
height: 175,
allowGrouping: true,
allowPaging: true,
allowSorting: true,
allowFiltering: true
});
grid.appendTo('#Grid');
Automating NPM commands in build automation
You can configure the NPM commands in “BeforeTargets” every time you build the application. For automation, you need to include the following configuration in the “.csproj” file.
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp3.1</TargetFramework> <RootNamespace>EJ2TypeScriptCoreApp</RootNamespace> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion> <IsPackable>false</IsPackable> </PropertyGroup> <ItemGroup> <None Remove="webpack.config.js" /> </ItemGroup> <ItemGroup> <Content Include="webpack.config.js" /> </ItemGroup> <ItemGroup> <PackageReference Include="Microsoft.TypeScript.MSBuild" Version="4.2.3"> <PrivateAssets>all</PrivateAssets> <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets> </PackageReference> <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="18.4.0.48" /> </ItemGroup> <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build"> <Exec Command="npm install" /> <Exec Command="webpack" /> </Target> </Project>
Including the compiled TS
Whenever you build the application, the “scripts/app.ts” file is compiled, and the result is copied into “wwwroot/js/app.js”. The “wwwroot/js/app.js” will be included in “Views/Shared/_Layout.cshtml”.
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/app.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
Including HTML Tag for EJ2
For keeping it simple, you can add a div element in “Views/Home/index.cshtml” with an “ID” as shown in the following code example.
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<div id="Grid" ></div>
Conclusion
The EJ2 Grid will be rendered as shown in the following image.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2TypeScriptCoreApp275032617
Conclusion
We hope you enjoyed learning about how to integrate Syncfusion TypeScript components as frontend in JavaScript application.
You can refer to our JavaScript feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page.
If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
