JavaScript vs TypeScript: learn the difference with a cart quantity example

An evergreen comparison, not a release announcement

This Day 3 article is a practical evergreen explainer. It does not claim that either language launched a new feature today. The question is deliberately small: how can a shopping cart receive the wrong quantity, and what help does TypeScript provide?

TypeScript builds on JavaScript and can infer types from many values without an explicit annotation. You can also describe the inputs a function expects. For a learner, that creates a useful habit: explain the shape of the data before relying on a tool to write the implementation.

Source: TypeScript Handbook: TypeScript for JavaScript programmers

Begin with the customer requirement

Imagine a local practice shop where the cart contains two notebooks. Pressing the plus button should change the quantity to three. Our exercise allows whole-number quantities from one to five. There are no payments, accounts or inventory services involved; this is an illustrative function-level task.

Write the successful case and the limit before coding. Two becomes three. Five must not become six. Decide whether the interface disables the button or displays a message at the limit. That decision comes from your product requirement, not from choosing a programming language. Keep a note of it so your tests and interface agree.

Compare a number with a string in JavaScript

Try this original example in a browser console: function nextQuantity(quantity) { return quantity + 1; }. Then call nextQuantity(2) and nextQuantity('2'). The first result is the number 3. The second is the string '21', because addition with that string performs concatenation. The function has not established what kind of value it accepts.

This is a useful debugging moment. The code can execute and still produce the wrong customer outcome. Record both the value and its type using typeof. Do not repair the symptom by changing the displayed text alone: identify where the value entered the function and define how that boundary should be handled.

Source: MDN JavaScript reference: addition operator

Add a TypeScript contract and check the caller

In a TypeScript file, change the function to: function nextQuantity(quantity: number): number { return quantity + 1; }. Calling it with 2 is compatible with the signature. Calling it with '2' produces a type-checking error because that argument is a string. Run the checker to see the diagnostic instead of assuming an editor underline is the entire verification process.

The annotation describes a number; it does not express our complete shopping rule. Values such as 2.5 and 5 are still numbers. The function would therefore produce 3.5 or 6 unless you implement the required checks. Distinguish an incompatible value type from an invalid value within the allowed type.

Source: TypeScript Handbook: everyday types and type assertions

Keep validation at the application boundary

External values need inspection when the program runs. A type assertion tells the TypeScript checker how you want it to treat a value; it does not convert that value or perform runtime validation. Avoid forcing uncertain data into a type simply to silence an error.

For this exercise, define an explicit conversion policy for textual input. Reject blank input, then convert the permitted numeric representation and check that the result is an integer within the allowed range. Separately enforce the maximum when incrementing. Document whether a string such as '2' is accepted at the boundary so another developer can reproduce your decision.

Source: TypeScript Handbook: everyday types and type assertions

Your practice task and learning path

Keep the first JavaScript function as a demonstration of the bug. Create a corrected implementation and a TypeScript version, then compare their behaviour using the same cases. Label the simple examples as incomplete until they enforce the quantity limit. Ask a teammate or mentor to explain your assumptions back to you; unclear assumptions are worth fixing before adding more code.

For a beginner exploring Full Stack training in Chennai or online, the useful progression is values, functions, conditions, data boundaries and tests, followed by stronger type descriptions. SPOTHUB's Full Stack program is a relevant option to discuss for guided practice. Ask about the current syllabus and prerequisites, and use this exercise to explain where you need help. Learning either language alone does not guarantee employment.

• Verify that numeric 2 increments to numeric 3.
• Confirm that the typed function rejects a string argument during type checking.
• Test the chosen behaviour for quantity 5, a fraction, blank input and an invalid word.
• Explain which checks belong to TypeScript and which must execute at runtime.
• Save the requirement, expected results and one corrected mistake as project evidence.

Sources and further reading

• TypeScript Handbook: TypeScript for JavaScript programmers · checked 2026-09-19
• TypeScript Handbook: everyday types and type assertions · checked 2026-09-19
• MDN JavaScript reference: addition operator · checked 2026-09-19

Spot an error? Email info@spothub.in with the article link and correction.