TypeScript 101 📖

What is TypeScript? 💻

TypeScript is a superset of JavaScript that uses static typing to define types within your JavaScript application. When compiling, TypeScript checks if the types match to help prevent errors within your code.

You must declare the type when you write your code as this cannot be changed during the execution of the program.

Why do we use it? 🤔

Using types within your JavaScript code adds an additional layer of testing to your application as you can find errors more effectively when compiling. It also allows you to write higher quality and more manageable code.

Using type annotations will help improve your code documentation for other developers to see how your code works.

If you want to scale your application to a larger size, creating a clear and concise structure will help with managing large codebases.

TypeScript also provides better tooling support, such as autocompletion and refactoring.

Fundamentals ❗

Once you understand the key Types and Annotations, you will be able to start building your applications within TypeScript as well as updating your current JavaScript projects.

Basic Types

• Number: used for numerical values
• String: used for text
• Boolean: used for true/false
• Array: used for a list of values
• Tuple: used for arrays with fixed size and types
• Enum: used for named constants
• Any: used for any type, however this should be used sparingly as it disables type checking.

Advanced Types

• Union Types: Used when you want a variable to be one of several types
• Type Aliases: Used to create a new name for a type
• Generics: Used to create reusable components for any data type.

Type Inference

TypeScript has a feature that can automatically infer the type based on the value that has been assigned. It works by trying to find the best common type that the value can be assigned to by using context.

I know what you're thinking, if this exists, why do we need to define types ourselves? Here's why we should explicitly define our types:

• Readability & Documentation: Enhances code clarity and documentation, making it easier for others to understand without needing to infer it from the context themselves.
• IDE Support: Improves IDE functionality and support, offering better autocompletion, error checking, and type-related warnings leading to more reliable code development and maintenance.
• Error Prevention: Helps avoid unexpected errors that can arise from type inference, especially in complex scenarios or with dynamic values.
• Integration with Libraries: Types are essential for integration with external libraries and non-TypeScript environments. This ensures clear interfaces and compatibility.
• Balance: Explicit type annotations are crucial for clarity, robustness, tooling support, and error prevention, creating a balanced approach in TypeScript development.

Function Parameter Annotations

These are used to specify function parameters and the types of values they expect to receive.

Variable Annotations

These are used to define the type of variable used.

Interface

These are used to define the shape of an object and specify the properties and methods the object is expected to have. The purpose of an interface is to check types and catch errors during development.