This will be first post in a series on TypeScript. TypeScript is a superset of JavaScript that adds static types to the language. It is designed to make large-scale JavaScript applications more manageable and easier to maintain.
The goal of this series is to put together a complete set of TypeScript notes for my own reference and for anyone else who might find them useful. We'll start with the basics and work our way up to more advanced topics.
To create a simple outline of everything that we want to cover here, we can use the roadmap.sh > typescript roadmap. This can provide us with a solid outline of everything that our notes should cover.
JavaScript is a dynamically typed language, which means that variables can hold values of any type without any type checking. This can lead to bugs that are difficult to track down, especially in large codebases.
TypeScript adds static types to JavaScript, which means that variables can only hold values of a specific type. This can help catch bugs at compile time and make the code easier to understand.
TypeScript is developed and maintained by Microsoft, and it is now a de-facto standard for large-scale JavaScript applications.
TypeScript compiles down to JavaScript, so it can be run in any JavaScript environment.
TypeScript adds features like interfaces, enums, and generics that are not available in JavaScript.
TypeScript is a superset of JavaScript, it allows developers to gradually adopt its features without a complete rewrite of existing code
TypeScript is a superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code. This makes it easy to gradually adopt TypeScript in an existing JavaScript codebase. This capability is crucial for adopting TypeScript in existing projects without the need for a complete rewrite.
For many popular JavaScript libraries, the TypeScript community has contributed type definitions, which are available through DefinitelyTyped (@types npm packages). These definitions provide a bridge allowing TypeScript to interact seamlessly with plain JavaScript libraries by detailing the expected types.
The TypeScript compiler (tsc) plays a crucial role in ensuring interoperability. It offers various configuration options that control how JavaScript is handled, such as allowJs, which lets the compiler accept JS files in the build process, and checkJs, which applies TypeScript’s type checking to JavaScript files. These settings provide flexibility, enabling teams to leverage TypeScript’s benefits without fully committing to converting every file.
While TS and JS are designed to work together seamlessly, developers must be mindful of certain aspects, such as maintaining type definitions and managing compiler settings, which can become complex in larger projects. Additionally, integrating TypeScript into a JavaScript project can introduce a learning curve for teams unfamiliar with TypeScript’s static typing.
Then you create a tsconfig.json file in the root of your project to configure the TypeScript compiler. This file specifies the compiler options that should be used when compiling your TypeScript code.
A workspace will have either a tsconfig.json file or a jsconfig.json file, but not both. While converting a JavaScript project to TypeScript, one of the first things you will do is replace the jsconfig.json file with a tsconfig.json file.
Just as you might have an environment based dockerfile, environment variables, or other configuration settings, you can have a tsconfig.dev.json and tsconfig.prod.json file to manage different compiler settings for development and production environments.
The TypeScript compiler can be run from the command line using the tsc command. You can pass compiler options directly on the command line, which will override any options specified in the tsconfig.json file.
tsc --target ES5 --module commonjs
tip
compiler options in the command line will override the options in the tsconfig.json file.
Why would we want to configure the compiler with options in the command line instead of just using the tsconfig.json file?
You might want to override the options in the tsconfig.json file for a specific build.
You might want to experiment with different compiler options without changing the tsconfig.json file.
CI/CD pipeline scripts might require different compiler options for different stages of the pipeline.
Most modern React frameworks such as Vite, Next etc support TypeScript out of the box. You can simply create a .ts or .tsx file and start writing TypeScript code.
If for some reason you need to manually compile the TypeScript code, you can use the tsc command to compile the TypeScript code to JavaScript.
Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.
JavaScript is a lightweight, interpreted programming language with first-class functions that is known for its role in web development. It is an essential part of web applications and allows for interactive elements.
Docker is a platform for developers and sysadmins to develop, deploy, and run applications with containers. The use of Linux containers to deploy applications is called containerization.
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
Vite is a modern, fast front-end build tool that significantly improves the frontend development experience. It features a dev server with Hot Module Replacement (HMR) and a build command that bundles your code with Rollup, which is configured to output highly optimized static assets for production.
Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications.
Docusaurus is a project for building, deploying, and maintaining open source project websites easily. It's optimized for documentation and can leverage the power of Markdown and React to enable seamless documentation sites with built-in search capabilities.
Stripe is a technology company that builds economic infrastructure for the internet. Businesses of every size use the company's software to accept payments and manage their businesses online.
Sentry is an open-source error tracking tool that helps developers monitor and fix crashes in real time. The tool streamlines the error resolution process and aggregates errors across different programming languages.
D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, SVG, and CSS to bring data to life through a data-driven approach to DOM manipulation.
React Flow is a highly customizable library for building interactive node-based editors, diagrams, and flow charts. It provides a set of tools that make it easy to drag, drop, and connect nodes on a canvas.
TipTap is a headless, framework-agnostic text editor capable of handling a variety of complex text editing needs. It is built on top of ProseMirror and is extendable and customizable to fit different editing requirements.
JavaScript is a lightweight, interpreted programming language with first-class functions that is known for its role in web development. It is an essential part of web applications and allows for interactive elements.
Python is a high-level, interpreted, general-purpose programming language. Its design philosophy emphasizes code readability with its use of significant whitespace.
Amazon Cognito provides authentication, authorization, and user management for your web and mobile apps. Users can sign in directly with a username and password, or through a third party such as Facebook, Amazon, or Google.
Amazon API Gateway is a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale. It acts as a front door for applications to access data, business logic, or functionality from your back-end services.
AWS Lambda is a compute service that lets you run code without provisioning or managing servers. Lambda executes your code only when needed and scales automatically, from a few requests per day to thousands per second.
Amazon Athena is an interactive query service that makes it easy to analyze data in Amazon S3 using standard SQL. It is serverless, so there is no infrastructure to manage, and you pay only for the queries that you run.
AWS Glue is a fully managed extract, transform, and load (ETL) service that makes it simple and cost-effective to categorize your data, clean it, enrich it, and move it reliably between various data stores.
AWS Step Functions is a service that lets you coordinate multiple AWS services into serverless workflows so you can build and update apps quickly. It provides a reliable way to orchestrate the components of distributed applications and microservices using visual workflows.
Amazon Simple Queue Service (SQS) is a fully managed message queuing service that enables you to decouple and scale microservices, distributed systems, and serverless applications. SQS eliminates the complexity and overhead associated with managing and operating message oriented middleware.
Amazon DynamoDB is a fast and flexible NoSQL database service for all applications that need consistent, single-digit millisecond latency at any scale. It is a fully managed database and supports both document and key-value store models.
Amazon S3 (Simple Storage Service) is an object storage service that offers industry-leading scalability, data availability, security, and performance. This means customers of all sizes and industries can use it to store and protect any amount of data for a range of use cases, such as websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics.
Amazon CloudWatch is a monitoring and observability service built for DevOps engineers, developers, site reliability engineers (SREs), and IT managers. CloudWatch provides data and actionable insights to monitor applications, understand and respond to system-wide performance changes, optimize resource utilization, and get a unified view of operational health.
Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment.
Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service. It is designed to give developers and businesses an extremely reliable and cost-effective way to route end users to Internet applications.
Amazon EventBridge is a serverless event bus service that makes it easy to connect applications together using data from your own applications, integrated SaaS applications, and AWS services. EventBridge helps facilitate event-driven architectures by routing events between AWS services, integrated SaaS applications, and your own applications.