## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma Engineering Level: Diploma Branch: Computer Engineering / Computer Science and Engineering Subject Code: DI05000131 Subject Name: Client - Side Scripting Language (TypeScript) | W.E. F. Academic Year: | 2026-27 | |--------------------------|-----------| | Semester: | 5 th | | Category of the Course: | PEC-04 | Prerequisite: Students should have basic knowledge of: - HTML and CSS for basic web page design - JavaScript fundamentals including DOM manipulation Rationale: Modern web applications require scalable, maintainable, and type-safe code. TypeScript enhances JavaScript by adding static typing, modern object-oriented features, and strong tooling support, and it is widely used in frameworks such as Angular, React, and Node.js. This course helps students transition from basic JavaScript to professional front-end development practices, enabling them to build structured and maintainable web applications used in industry. ## Course Outcome: After Completion of the Course, Student will be able to: | No | Course Outcomes | RBT Level | |------|---------------------------------------------------------------------------------------------------------|-------------| | 01 | Use TypeScript data types, variables, and functions to develop programs | Apply | | 02 | Develop programs using TypeScript functions and advanced type features | Apply | | 03 | Implement object-oriented programming concepts using classes and interfaces in TypeScript | Apply | | 04 | Develop dynamic frontend applications by integrating TypeScript with backend services and APIs. | Apply | *Revised Bloom's Taxonomy (RBT) ## Teaching and Examination Scheme: | Teaching Scheme (in Hours) | Teaching Scheme (in Hours) | Teaching Scheme (in Hours) | Total Credits L+T+ (PR/2) | Assessment Pattern and Marks | Assessment Pattern and Marks | Assessment Pattern and Marks | Assessment Pattern and Marks | Total | |-------------------------------|-------------------------------|-------------------------------|------------------------------|--------------------------------|--------------------------------|--------------------------------|--------------------------------|---------| | L | T | PR | C | Theory | Theory | Tutorial / Practical | Tutorial / Practical | Marks | | | | | | ESE (E) | PA(M) | PA(I) | ESE (V) | | | 0 | 2 | 4 | 4 | 0 | 0 | 20 | 30 | 50 | w.e.f. 2026-27 ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma Engineering Level: Diploma Branch: Computer Engineering / Computer Science and Engineering Subject Code: DI05000131 Subject Name: Client - Side Scripting Language (TypeScript) ## Course Content: | Unit No. | Content | No. of Hours | % of Weightage | |-------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|-------------------| | 1 | Introduction to TypeScript:  Need for TypeScript in modern web development  Limitations of JavaScript  Features of TypeScript  Installing Node.js and TypeScript  TypeScript Compiler (tsc)  Writing and compiling first TypeScript program  TypeScript configuration (tsconfig.json)  Using TypeScript in browser applications | 5 | 17 | | 2 | TypeScript Basics  Basic Data Types o number o string o boolean o any o unknown o void o null & undefined  Type inference  Variables and constants  Basic Operators (Arithmetic, Logical, Comparison)  Arrays and Tuples  Union Types  Type Aliases  Enums | 5 | 17 | ## GUJARAT TECHNOLOGICAL UNIVERSITY ## Program Name: Diploma Engineering Level: Diploma ## Branch: Computer Engineering / Computer Science and Engineering Subject Code: DI05000131 Subject Name: Client - Side Scripting Language (TypeScript) | 3. | Functions and Advanced Types  Functions in TypeScript  Function parameters  optional parameters  default parameters  rest parameters  Arrow functions  Function overloading  Type assertions  Introduction to Generics (conceptual understanding)  Error handling using try-catch  Compile-time vs runtime errors | 6 | 20 | |------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----|------| | 4 | Object-Oriented Programming and Code Organization  Classes and Objects  Constructors  Access Modifiers  public  private  protected  Getters and Setters  Inheritance  Interfaces  Abstract classes  Static members  Modules: Import and Export  Namespace vs Modules  Real-world examples (Student/Product systems) | 6 | 20 | ## GUJARAT TECHNOLOGICAL UNIVERSITY ## Program Name: Diploma Engineering Level: Diploma Branch: Computer Engineering / Computer Science and Engineering Subject Code: DI05000131 Subject Name: Client - Side Scripting Language (TypeScript) | 5. | Modules, DOM Programming, and Backend Integration TypeScript with HTML and DOM Manipulation ● DOM manipulation using TypeScript ● Accessing and modifying HTML elements Event Handling and Form Processing ● Typed events (MouseEvent, KeyboardEvent) ● Working with HTML forms ● Form input handling and validation (basic) Fetch API and JSON Handling ● Working with API responses ● JSON parsing and handling ● Displaying dynamic data in HTML Backend and API Concepts ● Concept of backend in web applications ● Communication between frontend and backend using APIs ● Overview of client-server architecture Backend Integration and Database Connectivity ● Using any backend technology (Recommended: PHP) 8 | 26 | |------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------| | | Total 30 | 100 | ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma Engineering Level: Diploma Branch: Computer Engineering / Computer Science and Engineering Subject Code: DI05000131 Subject Name: Client - Side Scripting Language (TypeScript) ## References/Suggested Learning Resources: - (a) Books: 1. Programming TypeScript: Making Your JavaScript Applications Scale, Boris Cherny, O'Reilly Media, 2019, ISBN: 978-1492037651. 2. Learning TypeScript: Enhance Your Web Development Skills Using Type-Safe JavaScript, Josh Goldberg, O'Reilly Media, 2022, ISBN: 978-1098110338. 3. TypeScript Quickly, Yakov Fain and Anton Moiseev, Manning Publications, 2020, ISBN: 9781617295942. 4. Effective TypeScript: 62 Specific Ways to Improve Your TypeScript, Dan Vanderkam, O'Reilly Media, 2019, ISBN: 978-1492053743. 5. Beginning TypeScript: From Novice to Professional, Ben Grynhaus, Apress, 2021, ISBN: 9781484262392. ## (b) Open source software and website: 1. TypeScript Official Documentation - Comprehensive guide to TypeScript concepts and features. https://www.typescriptlang.org/docs/ 2. Microsoft Learn - TypeScript Fundamentals - Beginner-friendly introduction to TypeScript programming. https://learn.microsoft.com/en-us/training/modules/typescript-get-started/ 3. W3Schools - TypeScript Tutorial - Practical examples and exercises for beginners. https://www.w3schools.com/typescript/ 4. GeeksforGeeks - TypeScript Tutorial - Covers TypeScript basics, OOP concepts, and examples. https://www.geeksforgeeks.org/typescript/ 5. tutorialspoint - TypeScript Tutorial - Step-by-step explanation of TypeScript features and syntax. https://www.tutorialspoint.com/typescript/index.htm 6. FreeCodeCamp - TypeScript Full Course - Beginner-friendly course with practical examples. https://www.freecodecamp.org/news/learn-typescript-beginners-guide/ 7. MDN Web Docs - JavaScript and TypeScript Resources - Documentation on JavaScript and related technologies used with TypeScript. https://developer.mozilla.org/ 8. TypeScript Playground - Online editor for writing and testing TypeScript code. https://www.typescriptlang.org/play 9. Node.js Official Website - Required runtime environment for TypeScript development. https://nodejs.org/ 10. GitHub - TypeScript Repository - Official TypeScript project and examples. https://github.com/microsoft/TypeScript ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma Engineering Level: Diploma Branch: Computer Engineering / Computer Science and Engineering Subject Code: DI05000131 Subject Name: Client - Side Scripting Language (TypeScript) ## Suggested Course Practical List: 1. Install Node.js and TypeScript, create a simple TypeScript program to display a message and execute it using the TypeScript compiler. 2. Write a TypeScript program demonstrating basic data types (number, string, boolean, any) to store and display student information. 3. Write a TypeScript program to perform operations on arrays and tuples to store and display product details. 4. Write a TypeScript program to create reusable functions (including arrow functions) to perform basic arithmetic operations. 5. Write a TypeScript program to implement classes and objects to store and display student details. 6. Write a TypeScript program demonstrating interfaces and inheritance to model a simple employee management example. 7. Write a TypeScript program to create modules using export and import to perform mathematical operations. 8. Create a web form and write a TypeScript program to validate user inputs such as name, email, and age. 9. Write a TypeScript program to fetch data from a public API and display the results on a webpage. 10. Develop a simple web application (e.g., To-Do List or Task Manager) using TypeScript demonstrating classes, arrays, and DOM manipulation. ## List of Laboratory/Learning Resources Required: 1. Computer System Configuration : Desktop or Laptop with minimum specifications: - Processor: Intel i3 (or equivalent) and above - RAM: 8 GB (recommended for database and virtualization tasks) - Storage: Minimum 256 GB SSD / HDD - Operating System: Windows 10/11, Ubuntu Linux, or macOS ## 2. Software Requirements - Node.js - JavaScript Runtime Environment - -Download: https://nodejs.org/ - -Used to run TypeScript applications and manage packages - TypeScript Compiler (tsc) w.e.f. 2026-27 ## GUJARAT TECHNOLOGICAL UNIVERSITY ## Program Name: Diploma Engineering Level: Diploma Branch: Computer Engineering / Computer Science and Engineering Subject Code: DI05000131 Subject Name: Client - Side Scripting Language (TypeScript) - -Install using npm: npm install -g typescript - -Used to compile TypeScript code into JavaScript ## ● Visual Studio Code - Code Editor - -Download: https://code.visualstudio.com/ - -Recommended extensions: TypeScript, ESLint, Prettier ## ● Web Browser (Google Chrome / Mozilla Firefox) - -Used to test web applications and DOM-based programs ## ● Node Package Manager (npm) - -Used to manage libraries and dependencies in TypeScript projects ## ● TypeScript Playground (Online Editor) - -https://www.typescriptlang.org/play - -Useful for experimenting with TypeScript code without installation ## Suggested Project List: ## 1. Student Management System Design a TypeScript-based application to manage student details, including adding, updating, and displaying student information using classes and arrays. ## 2. To-Do List / Task Manager Application Develop a web-based task manager using TypeScript to add, display, update, and delete tasks with DOM manipulation and event handling. ## 3. Product Catalog Management System Create a TypeScript application to manage product details such as product ID, name, price, and category using interfaces and object-oriented programming concepts. ## 4. Simple Calculator Web Application Build a calculator using TypeScript that performs arithmetic operations and demonstrates reusable functions and event handling. ## 5. Form Validation System w.e.f. 2026-27 ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma Engineering Level: Diploma Branch: Computer Engineering / Computer Science and Engineering Subject Code: DI05000131 Subject Name: Client - Side Scripting Language (TypeScript) Develop a TypeScript-based form validation system that verifies user inputs such as name, email, password, and age before form submission. ## 6. Weather Information Dashboard Create a web application that fetches weather data from a public API and displays locationbased weather information dynamically on a webpage. ## 7. User Data Viewer using Public API Fetch and display user information from an external API and present it in a structured table format using TypeScript and DOM manipulation. ## 8. Expense Tracker Application Develop a small TypeScript application to record daily expenses, calculate totals, and display expense reports. ## 9. Simple Quiz Application Build an interactive quiz system using TypeScript that presents questions, evaluates answers, and calculates scores. ## 10. Online Book Catalog Viewer Develop a TypeScript-based web application to display book details from a dataset or API and allow users to search or filter books. Beyond these projects, students should: - Practice TypeScript programming concepts such as types, interfaces, classes, and modules. - Develop interactive web pages using TypeScript and DOM manipulation. - Explore integration with public APIs for real-time data retrieval. - Understand how TypeScript improves maintainability and scalability of JavaScript applications. - Build small web applications that demonstrate modular and reusable code design. Suggested Activities for Students: w.e.f. 2026-27 ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma Engineering Level: Diploma Branch: Computer Engineering / Computer Science and Engineering Subject Code: DI05000131 Subject Name: Client - Side Scripting Language (TypeScript) In addition to classroom and laboratory sessions, students are encouraged to participate in the following co-curricular and experiential learning activities . These activities strengthen conceptual understanding, teamwork, and practical development skills using TypeScript. ## Recommended Activities ## a) Hands-on Practical Sessions in a Controlled Lab Environment - Conduct structured programming exercises demonstrating TypeScript syntax, types, functions, classes, and modules . - Practice DOM manipulation, event handling, and form validation using TypeScript. ## b) Web Application Development Exercises - Develop small web applications such as task managers, calculators, or student management systems . - Implement features such as data handling, user interaction, and modular programming . - c) Integration with Web APIs - Fetch and display real-time data from public APIs such as weather services or user datasets. - Explore how TypeScript improves reliability and error detection in API-based applications. ## d) Code Quality and Maintainability Practices - Apply TypeScript's static typing features to reduce runtime errors. - Organize programs using modules, interfaces, and object-oriented design for better maintainability. ## e) Study and Presentation of Modern Web Development Practices - Study how TypeScript is used in modern frameworks such as Angular, React, and Node.js applications. - Present findings on benefits of TypeScript in large-scale software development and frontend engineering.