Scribd
Upload
395 views

Typescript Short Tutorial

Typescript Short Tutorial discusses using Typescript to build a Todo list application to demonstrate its benefits over plain JavaScript. It covers creating a TodoItem class to represent individual todo items with attributes like id and task, and a method to print details. A TodoCollection class is made to hold a set of related TodoItem objects and provide methods to add, remove, and print todo items. The code is compiled with tsc and executed with node to test and debug the todo list application.

Uploaded by

sadiq106
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
395 views

Typescript Short Tutorial

Typescript Short Tutorial discusses using Typescript to build a Todo list application to demonstrate its benefits over plain JavaScript. It covers creating a TodoItem class to represent individual todo items with attributes like id and task, and a method to print details. A TodoCollection class is made to hold a set of related TodoItem objects and provide methods to add, remove, and print todo items. The code is compiled with tsc and executed with node to test and debug the todo list application.

Uploaded by

sadiq106
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Typescript Short Tutorial

Based on Essential TypeScript 4


By Adam Freeman
Why Typescript
● Javascript is must have but very unstructured, dynamic and difficult to
manage for enterprise applications. Typescript is a solution for such issues.
● Web Assembly is the future, a major platform for the web. Node.js and
JavaScript is a perfect match with Web Assembly. AssemblyScript is a
TypeScript like language for Web Assembly. TypeScript + Assembly Script is
the future for both client and server programming.
● Ethereum and other digital currency are also moving to webassembly, and
AssemblyScript will help us write Smart Contracts.
● Typescript help us learn OOP paradigm very well. Could help you to learn
other languages like Go, Python, C# , and Java.
● Due to well defined structure, you can enjoy many IDE support like
Intellisense and error identification on the fly
Creating a Todo List in
typescript (Hands on)
We will start coding in small
iterations. Start from basic and go
the to complex
the Model (Represent single object ⇒ data (attributes)
Creating a Todo List: and method(operaitons) related to a single task
Class is the key component in typescript
It has attributes (id, task, complete) that holds data
And method that are used to perform
operations(printDetails). This is very simple class. Will
complex later on

constructor is a method that


runs anytime when we call the
class

Note: Only for explanation, Use the book code and repo for
copy paste and run codes:
Creating a Todo List:
Collection means set of related objects

Every method provide details of


operations to be performed
Creating a Todo List: the index.ts
Creating a Todo List: Testing, debugging and Running

/FETypeScript/todo$ tsc
src/todoCollection.ts:1:24 - error TS2307: Cannot find module './TodoItem' or its corresponding type
declarations.
1 import {TodoItem} from "./TodoItem"; The tsc command is used to
trasnspite typescript into
~~~~~~~~~~~~ javascript. And could also
Found 1 error. identify error

FETypeScript/todo$ tsc No error: means transpilation


successful
FETypeScript/todo$ ls dist/
index.js todoCollection.js todoItem.js

FETypeScript/todo$ node dist/index.js Executing using node


1 Buy Mango
2 Buy Meat (complete)

You might also like