What Is TypeScript and Why Use It Over JavaScript?

TL;DR

TypeScript is an open-source superset of JavaScript that adds optional static types, letting you declare variables, function parameters, and return values as strings, numbers, or booleans. Research found it catches about 15% of common bugs at the compile stage. All TypeScript files compile down to regular JavaScript, so browsers never read .ts files directly.

Transcript

this video is sponsored by stream stream makes it easy for developers to add real-time chat and activity feeds to their applications stream takes care of the hard things such as hosting scaling and security so developers can focus on what matters which is building high quality apps in as little time as possible using one of their many front-end sdk... Read More

Key Insights

• TypeScript is a superset of JavaScript, meaning it is everything JavaScript is plus extra features. Its main purpose is adding static types, and any TypeScript feature is completely optional since valid JavaScript works fine inside a .ts file.
• Static typing means you explicitly assign types like string, number, or boolean to variables, and function parameters and return values can also have types. Dynamically typed languages like JavaScript associate types with runtime values instead of naming them in code.
• TypeScript detects about 15% of common bugs at the compile stage, according to research cited in the video, which lets developers spot bugs early that they might otherwise miss without types.
• All TypeScript files must be compiled down to regular JavaScript because browsers do not read .ts files. The tsc compiler transpiles the code, and tools like Create React App and Next.js set this step up automatically.
• Type inference means TypeScript can infer a variable's type even without an explicit annotation, so reassigning an inferred number variable to a string still triggers a 'type string is not assignable to type number' error.
• TypeScript's pros include more robust and predictable code, easier early bug spotting, and better readability for teams. It was the second most loved language in the 2021 Stack Overflow survey.
• TypeScript's cons include writing more code, extra learning time, and a required compilation step. Some Java or C developers argue it is not truly statically typed since it compiles to dynamically typed JavaScript, giving a false sense of security.
• The tsconfig.json file controls how TypeScript works, what it reports, and where files compile to. By default tsc compiles to ES5 (using var), but the config can target ES6 or any other JavaScript version.

Questions & Answers

Q: What is TypeScript?

TypeScript is an open-source language that builds onto JavaScript by adding extra features. It is called a superset of JavaScript, meaning it is everything JavaScript is plus additional features. The main reason to use it is to add static types to your code. Using types or any TypeScript feature is completely optional, and because all TypeScript files compile down to regular JavaScript, you can put plain JavaScript in a .ts file and it will work fine.

Q: What is the difference between statically and dynamically typed languages?

In dynamically typed languages like JavaScript, types are associated with runtime values and not explicitly named in your code, so a variable assigned a string value is not declared as a string. In statically typed languages you explicitly assign types to variables, whether string, number, or boolean, and function parameters and return values can have types too. Statically typed examples include Java, C, C++, Rust, and Go; dynamically typed examples include JavaScript, Python, Ruby, and PHP.

Q: Why should you use TypeScript?

TypeScript makes your code more robust because all variable types are defined, and it lets you spot bugs at an early stage that you might otherwise miss. Research found it detects about 15% of common bugs at the compile stage. It adds predictability, since a value defined as a string stays a string, and improves readability, making code more expressive when working with multiple developers. It is also very popular and was the second most loved language in the 2021 Stack Overflow survey.

Q: What are the downsides of using TypeScript?

The obvious downside is that you write more code, when sometimes you just want to get things done quickly. Writing more code also requires learning TypeScript first, which takes time. It requires a compilation step because browsers do not read .ts files, adding an extra stage to your workflow. Additionally, some Java or C developers say it is not a true statically typed language since it compiles down to dynamically typed JavaScript, arguing this gives a false sense of security.

Q: How do you compile TypeScript to JavaScript?

You use tsc, the TypeScript compiler, which is the main tool to transpile TypeScript to JavaScript. You install it with npm or yarn, either globally so it is accessible system-wide or locally to your project. Once installed, you run tsc followed by the file name, such as tsc index, to produce a .js file. You can also use the --watch flag to continuously watch a file and report errors at compile time as you make changes.

Q: When is TypeScript most worth using?

According to the presenter's opinion, TypeScript really shines with larger projects worked on by multiple developers, because it makes code more self-expressive and easier to follow. He does not recommend using it in every single project. For most of his own work, which he does alone on smaller projects, he considers TypeScript an unnecessary step, and for a simple React app he thinks it adds needless overhead, though he acknowledges many people would disagree.

Q: What is type inference in TypeScript?

Type inference is when TypeScript automatically infers a variable's type even if you do not explicitly set it. For example, if you assign a variable the number 5 without annotating it, TypeScript infers it is a number. If you later try to reassign that variable to a string, VS Code and the compiler will still give an error saying 'type string is not assignable to type number', even though you never wrote the type annotation yourself.

Q: What is the tsconfig.json file used for?

The tsconfig.json file is a generated configuration file that controls how TypeScript works, what it reports, and where your compiled files are output. For example, by default tsc compiles down to ES5, which uses var since let and const were introduced in ES6, but you can change the config so it targets ES6 or any JavaScript version you want. Tools like Next.js and Create React App let you use TypeScript with this setup handled automatically.

Summary & Key Takeaways

• TypeScript is an open-source superset of JavaScript that adds optional static types. It runs in the front end with vanilla JavaScript or frameworks like React and Vue, is included by default in Angular 2 plus, and works on the back end with Node.js.

• In dynamically typed languages like JavaScript, Python, Ruby, and PHP, types attach to runtime values. In statically typed languages like Java, C, C++, Rust, and Go, you explicitly declare types on variables, function parameters, and return values, which TypeScript brings to JavaScript.

• Using the tsc compiler, installed via npm or yarn globally or locally, you transpile .ts files to JavaScript, optionally in watch mode. A tsconfig.json file controls reporting, output location, and the target JavaScript version, while editors like VS Code show type errors during development.