3. TypeScript – the language that's revolutionizing the way we write
JavaScript. In today's rapidly evolving tech landscape, staying
ahead requires more than just keeping up – it demands
innovation and adaptability.
As JavaScript continues to dominate web development,
TypeScript emerges as a game-changer, offering developers a
powerful set of tools to tackle the challenges of modern software
engineering.
From its inception by Microsoft to its widespread adoption by
companies big and small, TypeScript has quickly become a
staple in the toolkit of developers worldwide.
Introduction
4. • Developed by Microsoft in 2012: Initially created to address challenges with large-scale JavaScript
applications.
• Led by Anders Hejlsberg: Known for creating C# and other programming languages.
• A superset of JavaScript:
TypeScript was conceived as a solution to address JavaScript's limitations while retaining its
flexibility and ubiquity. By introducing static typing, TypeScript enables developers to catch errors at
compile-time rather than runtime, reducing bugs and improving code quality. Additionally,
TypeScript provides advanced tooling, such as code editors with IntelliSense, which enhances
developer productivity and code readability. One of TypeScript's key features is its compatibility with
existing JavaScript codebases. As a superset of JavaScript, TypeScript allows developers to
gradually introduce type annotations and other features into their projects without requiring a
complete rewrite. This seamless integration with JavaScript ecosystems, libraries, and frameworks
has contributed to TypeScript's widespread adoption.
Since its release, TypeScript has experienced significant growth in popularity and usage. It has
become the language of choice for many large-scale web applications, including those developed
by tech giants like Google, Microsoft, and Facebook. The TypeScript community has also
flourished, contributing to an ecosystem of libraries, frameworks, and tools that further enhance
TypeScript's capabilities.
Background
5. • TypeScript was released to the public in October 2012, with version 0.8, after two years of internal development at Microsoft. Soon
after the initial public release, the language itself was praised, but criticized the lack of mature IDE support apart from Microsoft
Visual Studio, which was not available on Linux and OS X at that time. As of April 2021 there is support in other IDEs and text
editors, including Emacs, Vim, WebStorm, Atom and Microsoft's own Visual Studio Code.
• TypeScript 0.9, released in 2013, added support for generics.
• TypeScript 1.0 was released at Microsoft's Build developer conference in 2014. Visual Studio 2013 Update 2 provides built-in
support for TypeScript. Further improvement were made in July 2014, when the development team announced a new TypeScript
compiler, asserted to have a five-fold performance increase. Simultaneously, the source code, which was initially hosted
on CodePlex, was moved to Github.
• On 22 September 2016, TypeScript 2.0 was released, introducing several features, including the ability for programmers to optionally
enforce null safety, to mitigate what's sometimes referred to as the billion-dollar mistake. TypeScript's "billion-dollar mistake" refers to the
absence of a nullable type by default. This term was coined by Sir Tony Hoare, the inventor of the null reference in programming
languages, who famously referred to his own creation as his "billion-dollar mistake." In TypeScript, the lack of a nullable type by default
means that variables can hold either a value or null or undefined, leading to potential runtime errors such as null reference exceptions.
• TypeScript 3.0 was released on 30 July 2018, bringing many language additions like tuples in rest parameters and spread expressions, rest
parameters with tuple types, generic rest parameters and so on.
• TypeScript 4.0 was released on 20 August 2020. While 4.0 did not introduce any breaking changes, it added language features such as Custom
JSX Factories and Variadic Tuple Types.
• TypeScript 5.0 was released on 16 March 2023 and included support for decorators.
History
6. Evaluation
1. Syntax and Read ability:
Language Evaluation Criteria
Readability: the ease with which programs can be read and understood
Writability: the ease with which a language can be used to create programs
Reliability: conformance to specifications (i.e., performs to its specifications)
Cost: the ultimate total cost
7. Evaluation Criteria: Readability
Overall simplicity
A manageable set of features and constructs
Minimal feature multiplicity
Minimal operator overloading
Orthogonality
A relatively small set of primitive constructs can be combined in a relatively small number of
ways.
Every possible combination is legal
Data types
Adequate predefined data types
Syntax considerations
Identifier forms: flexible composition
Special words and methods of forming compound statements
Form and meaning self-descriptive constructs, meaningful keywords
8. Evaluation Criteria: Writability
Simplicity and orthogonality
Few constructs, a small number of primitives, a small set of rules for
combining them
Support for abstraction
The ability to define and use complex structures or operations in
ways that allow details to be ignored
Expressivity
A set of relatively convenient ways of specifying operations
Strength and number of operators and predefined functions
9. Evaluation Criteria: Reliability
Type checking
Testing for type errors
Exception handling
Intercept run-time errors and take corrective measures
Aliasing
Presence of two or more distinct referencing methods for the same
memory location
Readability and writability
A language that does not support "natural" ways of expressing an
algorithm will require the use of "unnatural" approaches, and hence
reduced reliability
10. Evaluation Criteria: Cost
Training programmers to use the language
Writing programs (closeness to particular applications)
Compiling programs
Executing programs
Language implementation system: availability of free compilers
Reliability: poor reliability leads to high costs
Maintaining programs
11. Evaluation Criteria: Others
Portability
The ease with which programs can be moved from one implementation to
another
Generality
The applicability to a wide range of applications
Well-Definedness
The completeness and precision of the language's official definition
12. Advantages
• 1. Static Typing:
TypeScript offers static typing, allowing developers to define types for variables, functions,
and objects. This enhances code reliability by catching errors during compile time, leading to
fewer runtime errors and improved code quality.
• 2. Enhanced Readability and Maintainability:
With explicit type annotations, TypeScript code becomes more readable and understandable,
especially in large codebases. The added clarity helps developers understand code structure
and intent, leading to easier maintenance and collaboration.
• 3. Tooling Support:
TypeScript integrates well with popular development tools and IDEs, such as Visual Studio
Code, providing features like autocompletion, type checking, and refactoring tools. This enhances
the development experience and productivity, enabling developers to write code more efficiently.
• 4. Compatibility with JavaScript Ecosystem:
TypeScript is a superset of JavaScript, meaning existing JavaScript code can be gradually
migrated to TypeScript. This allows developers to leverage the vast ecosystem of JavaScript
libraries and frameworks while enjoying the benefits of static typing and type safety.
13. Disadvantages
• 1. Learning Curve:
Adopting TypeScript requires developers to learn new syntax and concepts related to static
typing, which can result in a learning curve, especially for those unfamiliar with strongly typed
languages. Additionally, understanding advanced type features and best practices may take
time to master.
• 2. Build Time Overhead:
The TypeScript compiler adds an additional build step to the development process, which
can increase build times, especially for large codebases. While the benefits of static typing often
outweigh this overhead, it's important to consider the impact on development workflow and
productivity.
• 3. Type Definition Overhead:
While TypeScript's type system provides benefits in terms of code safety and readability, it
also adds overhead in terms of writing type annotations. Developers need to invest time in
defining types for variables, functions, and objects, which can increase code verbosity and
maintenance efforts.
• 4. Compatibility Issues:
Although TypeScript aims for compatibility with JavaScript, there may be cases where
TypeScript’s type system imposes constraints that conflict with existing JavaScript patterns or
14. Special features and application domains
• TypeScript is a superset of JavaScript that adds optional static typing and other features to the
language. Here are some of its special features and application domains:
• Static Typing: TypeScript allows developers to define types for variables, function parameters,
and return types. This helps catch type-related errors during development and provides better
code documentation and editor tooling support.
• Type Inference: TypeScript can infer types based on context, reducing the need for explicit type
annotations while still providing type safety.
• Interfaces and Classes: TypeScript supports interfaces and classes, enabling developers to
write object-oriented code with features like inheritance, encapsulation, and abstraction.
• Enums: Enums allow developers to define a set of named constants, which can improve code
readability and maintainability.
• Generics: TypeScript supports generics, allowing developers to write reusable, type-safe code
that works with a variety of data types.
• Union Types and Intersection Types: TypeScript allows developers to define types that can be
composed of multiple other types, providing flexibility and expressiveness.
• Decorators: TypeScript supports decorators, which are a form of metadata that can be attached
to classes, methods, or properties. Decorators are commonly used in frameworks like Angular
for features like dependency injection and routing.
• Null Safety: TypeScript introduces stricter null checking compared to JavaScript, helping
developers avoid null reference errors.
• JavaScript Interoperability: TypeScript is fully interoperable with JavaScript, allowing
developers to gradually adopt TypeScript in existing projects or leverage existing JavaScript
libraries and frameworks.
• Tooling and IDE Support: TypeScript has excellent tooling support, including features like code
completion, refactoring, and error checking in popular integrated development environments
(IDEs) like Visual Studio Code.
•
15. Application Domains
• Web Development: TypeScript is widely used in web development for both client-side and
server-side applications. It's particularly popular in frameworks like Angular, NestJS, and
Vue.js.
• Node.js Development: TypeScript is commonly used in Node.js development, providing type
safety and other features for server-side JavaScript applications.
• Enterprise Applications: TypeScript's static typing and other features make it well-suited for
large-scale enterprise applications where maintainability and scalability are critical.
• Cross-Platform Development: TypeScript can be used to develop cross-platform desktop and
mobile applications using frameworks like Electron and NativeScript.
• Game Development: TypeScript's features make it suitable for game development,
particularly when combined with game engines like Phaser and Babylon.js.
• Cloud Development: TypeScript is used in cloud development, especially for building
serverless applications and microservices deployed on platforms like AWS, Azure, and
Google Cloud.
• Overall, TypeScript's combination of static typing, modern language features, and wide
ecosystem support makes it a versatile language suitable for a variety of application
domains.
•
16. Installation,
Popular IDE
To work with TypeScript, you need to install it globally or locally in your
project. Here's how you can install TypeScript globally using npm (Node
Package Manager), along with information on popular IDEs (Integrated
Development Environments) for TypeScript:
1. Install TypeScript globally:
Bash->npm install -g typescript
This command installs TypeScript globally on your system, making the tsc
(TypeScript Compiler) command available globally.
2. Check TypeScript version:
After installation, you can check the TypeScript version installed by running:
Bash-> tsc –version
3. Install TypeScript locally in a project:
If you prefer to install TypeScript locally in your project (which is often
recommended for better project isolation), navigate to your project directory
and run:
Bash-> npm install typescript --save-dev
This command installs TypeScript locally and adds it as a development
dependency in your project's package.json file.
17. Program Example
create a simple TypeScript program that calculates the area of a rectangle
// Define a class representing a Rectangle
class Rectangle {
// Properties to store width and height of the rectangle
width: number;
height: number;
// Constructor to initialize the width and height
constructor(width: number, height: number)
{ this.width = width;
this.height = height;
}
// Method to calculate the area of the rectangle
calculateArea(): number {
return this.width * this.height; }
}
// Create a new instance of the Rectangle class
const myRectangle = new Rectangle(5, 10);
// Calculate the area of the rectangle
const area = myRectangle.calculateArea();
// Output the result
console.log("Area of the rectangle:", area);
18. Explanation
• Class Rectangle:
• We define a TypeScript class named Rectangle to represent a rectangle.
• Properties:
• Inside the Rectangle class, we declare two properties: width and height, both
of type number. These properties will store the width and height of the
rectangle.
• Constructor:
• The constructor method is used to initialize the width and height properties
when a new instance of the Rectangle class is created. It takes two
parameters: width and height, both of type number.
• Method calculateArea():
• We define a method named calculateArea() inside the Rectangle class. This
method calculates the area of the rectangle by multiplying its width and height
and returns the result as a number.
• Creating an Instance:
• We create a new instance of the Rectangle class named myRectangle with a
width of 5 and a height of 10.
• Calculating Area:
• We call the calculateArea() method on the myRectangle instance to compute
the area of the rectangle and store the result in a variable named area.
• Output:
• Finally, we use console.log() to output the calculated area of the rectangle to
the console.
19. • In conclusion, TypeScript stands as a testament to the evolution
and innovation within the realm of web development.
Throughout this presentation, we've explored the benefits that
TypeScript brings to the table, from its robust type system to its
seamless integration with existing JavaScript codebases.
As we look ahead, it's clear that TypeScript will continue to play a
pivotal role in driving innovation and pushing the boundaries of
what's possible in web development.
Conclusion
