Major Differences Between TypeScript and JavaScript: ey Points with Simple Code Examples

JavaScript and TypeScript are two of the most popular programming languages ​​for web development. JavaScript has been around for years and is widely used, while TypeScript is a newer language that brings additional features to JavaScript. In this blog post, we’ll explore 10 key differences between JavaScript and TypeScript and provide simple code examples to help you clearly understand their differences.

1. Type system

JavaScript is dynamically typed, which means variables can hold any type of data and can change types dynamically. In TypeScript you get static typing, which means you need to define the type of the variable beforehand. This helps catch errors early and makes your code more secure.

<code class="language-javascript">let name = "John";
name = 10;  // 这在 JavaScript 中可以正常工作</code>

<code class="language-typescript">let name: string = "John";
name = 10;  // TypeScript 将抛出错误，因为 10 是数字，而不是字符串</code>

2. Compile

JavaScript runs directly in the browser or Node.js without any build steps. However, TypeScript needs to be compiled into JavaScript before it can run in the browser or Node.js. It's like TypeScript being translated into something your environment can understand. tsc app.ts // This compiles TypeScript code into JavaScript

3. Interfaces and types

JavaScript does not support interfaces or custom types. TypeScript allows you to define custom types and interfaces to ensure correct use of data structures.

<code class="language-javascript">let person = { name: "John", age: 30 };</code>

<code class="language-typescript">interface Person {
  name: string;
  age: number;
}
let person: Person = { name: "John", age: 30 };  // TypeScript 确保对象与接口匹配</code>

4. Type inference

JavaScript does not infer types, so you need to manually keep track of the type your variable holds. TypeScript simplifies your life by automatically inferring a variable's type based on its initial value.

<code class="language-javascript">let num = 10;  // 您必须手动跟踪它是数字</code>

<code class="language-typescript">let num = 10;  // TypeScript 推断 'num' 是数字</code>

5. Classes and Inheritance

JavaScript supports classes and inheritance, but it's pretty basic. TypeScript extends JavaScript’s class system by adding features such as access modifiers (public, private, protected), making your code more flexible and easier to maintain.

<code class="language-javascript">class Animal {
  constructor(name) {
    this.name = name;
  }
}</code>

<code class="language-typescript">class Animal {
  public name: string;
  constructor(name: string) {
    this.name = name;
  }
}</code>

Summary

JavaScript and TypeScript each have their strengths, but TypeScript offers more powerful tooling, better type safety, and features that help manage large projects. JavaScript will always be essential for web development, but if you're working on a large application or want to catch errors early, TypeScript may be a better choice.

Hope this clarifies the main differences between the two! If you have any questions or need further explanation please let me know. Happy coding! ?

The above is the detailed content of Major Differences Between TypeScript and JavaScript: ey Points with Simple Code Examples. For more information, please follow other related articles on the PHP Chinese website!