Technical aspect: How is ts compiled into js, and how does js run in the browser?

TypeScript code needs to be compiled into JavaScript code through the [compiler], and JavaScript code needs to be in the browser 下载、解析和执行to finally render the page content and interact with the user

How ts is compiled into js

摘抄：
编写 TypeScript 代码
开发人员使用 TypeScript 语言编写代码，使用 TypeScript 所提供的类型检查、面向对象等特性。

编译 TypeScript 代码
在编写 TypeScript 代码后，需要使用 TypeScript 编译器将 TypeScript 代码编译成 JavaScript 代码。编译器会将 TypeScript 代码转换为 JavaScript 代码，并在转换的过程中进行类型检查等操作。

生成 JavaScript 代码
编译器会生成 JavaScript 代码文件，这些文件可以直接在浏览器或 Node.js 等 JavaScript 运行环境中运行。

Compiling TypeScript files into JavaScript mainly involves the following steps and knowledge points:

1. Installation TypeScript: First you need to install TypeScriptthe compiler , which can be installed using npm or yarn.

2. Create tsconfig.jsonfile: Create the tsconfig.json file in the project root directory to configure TypeScript compiler options.

3. Write TypeScriptcode: Write TypeScript code in your project, using the syntax and type system provided by TypeScript.

4. Compile TypeScriptcode: Execute the tsc command to compile TypeScript files into JavaScript files. The compiler will compile according to the configuration options in the tsconfig.json file.

5. Type checking : The compiler will TypeScriptperform type checking on the code and find potential errors based on the defined type rules.

6. Convert to JavaScript: The compiler converts TypeScript code into JavaScript code. It converts TypeScript features (such as classes, interfaces, modules, etc.) into JavaScript code.

7. Generate declaration files : The compiler can automatically generate declaration files (.d.ts) based on TypeScript code for libraries written in TypeScript in JavaScript projects.

8. Translate ES version : The compiler can translate TypeScript code into different versions of JavaScript, such as ES5, ES6, etc.

9. Configuration options : Compilation options can be configured in the tsconfig.json file, such as target version, module parsing method, output directory, etc.

The above is the basic process and related knowledge points of compiling TypeScript into JavaScript. Through the above steps, TypeScript code can be converted into JavaScript code that can be executed in the browser or other JavaScript environment.

How does js run in the browser?

摘抄：

下载页面：浏览器通过网络下载 HTML、CSS 和 JavaScript 文件等页面资源。

解析 HTML：浏览器解析 HTML 文件，并构建出 DOM 树。

解析 CSS：浏览器解析 CSS 文件，并构建出 CSSOM 树。

JavaScript 解析与执行：浏览器解析 JavaScript 代码，并执行其中的代码逻辑，修改 DOM 树和 CSSOM 树，以及与服务器进行数据交互等操作。

渲染页面：浏览器将 DOM 树和 CSSOM 树合并，生成渲染树，并将其渲染到屏幕上。

页面交互：用户与页面进行交互，页面响应用户的操作，并根据用户的输入进行相应的处理

Running JavaScript in the browser mainly involves the following steps and knowledge points:

1. Create an HTML file : First you need to create an HTML file for loading and running JavaScript code in the browser.

2. Introduce JavaScript files<script> : Use tags to introduce JavaScript files in HTML files . JavaScript code can be written directly within <script>the tag, or srcintroduced into an external JavaScript file through attributes.

3. Parse and execute JavaScript code : The browser parses the HTML file, and when it encounters <script>a tag, it parses and executes the JavaScript code in it. The order of execution follows the order of the code in the HTML file.

4. Creating global objects and variables : The browser creates a global object (usually an windowobject) in the global scope. Variables in the global scope are global variables and can be accessed anywhere in the script.

5. Handling events : JavaScriptYou can respond to user operations by listening to DOMobject events (such as clicks, scrolling, keyboard input, etc.). Through the event handling function, the corresponding JavaScript code can be executed when a specific event occurs.

6. Manipulating DOM : The structure and content of HTML pages JavaScriptcan be DOMaccessed and modified through (Document Object Model). HTML elements can be dynamically added, deleted, and modified to achieve interaction with users and data display.

7. HTTP request and response : JavaScriptYou can send a request to the server and obtain the response data through the HTTP request API (such as XMLHttpRequest, fetch, etc.) provided by the browser. Data interaction with back-end servers can be achieved.

8. Error handling : JavaScriptErrors may occur during code execution. The browser will record the error information that occurs in the console, and you can debug and fix errors in the code by checking the console.

The above is the basic process and related knowledge points of JavaScript running in the browser. Through the above steps, JavaScript code can be loaded, parsed and executed in the browser to realize interaction with users and dynamic web page functions.