Podcast Summary
Using TypeScript without build tools: TypeScript compiler can handle transpiling and bundling, but build tools like Webpack, Babel, Parcel, and Snowpack offer additional features like code splitting and dev server functionality.
TypeScript is a powerful and popular programming language for web development that offers static typing and other features. In this episode of Syntax, Wes Bos and Scott Tolinski discuss the role of compilers and build tools in using TypeScript, and whether tools like Webpack, Babel, Parcel, and Snowpack are still necessary. They explain that the TypeScript compiler can handle many tasks previously handled by build tools, such as transpiling and bundling. However, build tools can still be useful for additional features like code splitting and dev server functionality. The hosts also mention their sponsors, Sentry and Sanity, both of which offer valuable tools for error handling and content management, respectively. Sentry provides exceptional error and exception handling, while Sanity offers a structured content CMS with an image pipeline and support for Next.js. Overall, the episode provides a clear explanation of the current landscape of using TypeScript and the role of various tools in the development process.
TypeScript: Statically-typed language with type checking during development: TypeScript catches and prevents type-related errors during development, saving time and resources by ensuring code conforms to expected types and compiles into JavaScript
TypeScript is a statically-typed programming language that provides type checking during development, which helps prevent bugs from being shipped to the user. The TypeScript compiler analyzes your code and ensures that all functions, variables, and arrays conform to the expected types. It also compiles TypeScript code into JavaScript, which can be output in various formats. The main benefit of using TypeScript's compiler is the ability to catch and prevent type-related errors before the code is run in the browser, saving time and resources in the long run. While JavaScript does not have built-in type checking, these types of bugs can be difficult to catch during development, and they can lead to unexpected errors and poor user experiences. By using TypeScript, developers can have more control over their code and catch potential issues earlier in the development process. Additionally, TypeScript offers features like the "no emit" option, which will not compile code if the types are broken, providing an extra layer of security and ensuring that only high-quality code is deployed.
Using Babel with TypeScript for Transpilation and Introspection: Babel can be used with TypeScript for transpiling TypeScript code into JavaScript and providing TypeScript introspection and documentation in your editor or IDE
You can use tools like Babel in conjunction with TypeScript to get the benefits of TypeScript, such as introspection and documentation, without having to run the TypeScript compiler for type checking. This can be particularly useful if you're already using Babel in your setup and don't want to modify your build process extensively to add TypeScript. The Babel TypeScript plugin will convert your TypeScript files into JavaScript, but it won't perform any type checking itself. Instead, your text editor or IDE will handle TypeScript evaluation behind the scenes. This can be a good compromise if you're finding it difficult to modify your build process to accommodate both Babel and TypeScript. Another reason to use Babel with TypeScript is if you're working with features that aren't yet supported in either language. For example, the nested conditional checking with the nullish coalescing operator was not supported in TypeScript at the time, but it could be transpiled with Babel. Overall, using Babel and TypeScript together can make the transition to TypeScript easier and more manageable, especially if you're already using Babel and don't want to make significant changes to your build process.
Understanding TypeScript Compilation Options: TypeScript requires transpilation for certain plugins and use cases, and TSC and SWC are popular compilers for this task. Developers can choose the best compiler based on their project needs and performance considerations.
While TypeScript now includes many desirable features, it still requires transpilation through tools like Babel for certain plugins and use cases. TypeScript's compiler (TSC) can be run separately for type checking, and this is a common setup for projects. A notable alternative compiler is SWC, a Rust-based compiler, which is being considered for use in Deno due to performance reasons. This trend of rewriting compilers in more efficient languages to improve performance is not new; Sass, for example, was initially written in Ruby but was later rewritten in C++ and then Dart for better performance. Overall, understanding the different options and configurations for compiling TypeScript can help developers optimize their workflows and improve productivity.
Compilers for various programming languages: Dart Sass, Surcase, ES Build: Different compilers like Dart Sass, Surcase, and ES Build cater to specific programming languages and offer unique advantages. Dart Sass is the officially supported one, but the debate continues about performance and potential shift towards Rust-based compilers. Newer compilers like Surcase and ES Build focus on faster compilation and efficiency.
There are various compilers for different programming languages, such as Node Sass, lib Sass, Ruby Sass, and Dart Sass, each with its unique history and advantages. Dart Sass is the officially supported one now, but there are ongoing debates about the performance and potential shift towards Rust-based compilers. A newer compiler called Surcase, written in TypeScript itself, also emerged, focusing on faster compilation of non-standard language extensions, JSX, TypeScript, and Flow. ES Build, a Go-based compiler, is another alternative that doesn't use Babel. The conversation also touched upon the history of Dart and how it didn't gain widespread adoption when it was first introduced, while TypeScript eventually became the preferred choice. The discussion highlighted the continuous evolution and competition among different compilers, aiming for better performance and efficiency.
A new open-source build tool for JavaScript and TypeScript projects: ES Build is a fast and easy-to-use build tool for JavaScript and TypeScript projects, offering TypeScript support built-in and real-time watch functionality, despite not currently offering type checking during compilation.
ES Build is a new open-source build tool for JavaScript and TypeScript projects, written in Go. It functions similarly to tools like Babel, but with TypeScript support built-in, allowing for faster development by eliminating the need for separate TypeScript compilation. ES Build can be installed via NPM and includes a JavaScript interface, making it easy to use. It also offers watch functionality for real-time builds. Despite not currently offering type checking during compilation, its speed and ease of use make it a compelling alternative to TypeScript's compiler for many developers. The fact that it's built in Go doesn't matter much for users, as it integrates seamlessly with a Node.js toolbase. ES Build is a promising new addition to the JavaScript development ecosystem.
Using a bundler with TypeScript: A bundler like Webpack, Parcel, or Snowpack offers benefits like tree shaking, smaller bundle files, and ease of handling additional features when used with TypeScript.
While TypeScript can compile your code into JavaScript and output it directly, using a bundler like Webpack, Parcel, or Snowpack provides additional functionality. A bundler acts as a puppet master, coordinating various tasks like handling non-standard JavaScript features, importing CSS or images, and managing dependencies. It's not strictly necessary to use a bundler with TypeScript, but it offers significant benefits like tree shaking, smaller bundle files, and ease of handling additional features. Writing custom loaders for specific tasks, like loading GraphQL files, can be surprisingly simple and rewarding. While the process of writing a loader might seem daunting, it often involves just a few lines of code. The bundler simplifies the development process by handling these tasks, allowing developers to focus on writing their applications.
Manually adding polyfills for new JavaScript features in TypeScript: To use new JavaScript features in TypeScript with older browsers, developers must manually add polyfills using tools like Babel or Parcel. Native ESM modules will eventually make this process obsolete.
TypeScript doesn't automatically include polyfills for new JavaScript features when transpiling code to older browsers like Internet Explorer 6. This means that developers still need to manually add polyfills using tools like Babel or Parcel. Once everyone can use native ESM (ES Modules) and remove the common JS step, the JavaScript syntax will become easier and more straightforward. This is an exciting development, and we should explore this topic further in an upcoming episode on how to move away from common JS with Node's native ESM modules. During the discussion, it was mentioned that ES modules is the term for this new way of importing and running JavaScript files, much like how ATM machines work with transactions. This new approach will make JavaScript development feel more seamless and natural, allowing files to run without the need for compilation. However, it's important to note that when targeting older browsers, TypeScript won't add new methods to strings or implement promise.all.settled, which are common requirements for polyfills. This means that developers must still obtain and include their own polyfills manually. As we look forward to a future where native ESM modules become more widespread, the process of writing and running JavaScript code will become more efficient and streamlined. Stay tuned for more insights on this topic in our upcoming episode.
