[TypeScript] Ts basic concept

Basic Concepts of TypeScript

What is TypeScript?

Goal: be able to tell what typescript is

content:

• TS Official Documentation
• TS Chinese Reference - no longer maintained

• TypeScriptAbbreviation: TS, is a superset of JavaScript , simply put: JS has some TS

• TypeScript = Type+ JavaScript (based on JS, adding type support for JS )
• TypeScript is an open-source programming language developed by Microsoft that can run anywhere JavaScript runs

Why have typescript

Goal: be able to say why typescript is needed

content:

• Background: The JS type system has "inherent defects" weak types, and most errors in JS code are type errors (Uncaught TypeError)
  • During development, the defined variable should have a type
• These frequent errors lead to increased time to find and fix bugs when using JS for project development, seriously affecting development efficiency

Why is this happening? var num = 18 num.toLowerCase()

• From the perspective of programming languages, TypeScript is a static type programming language , and JavaScript is a dynamic type programming language

  • Static type: type checking at compile time
  • Dynamic type: type checking at execution time

• The order of code compilation and code execution: 1 compile 2 execute

• For JS: Need to wait until the code is actually executed to find the error (late)

• For TS: errors can be found when the code is compiled (before the code is executed) (early)

Moreover, with VSCode and other development tools, TS can find errors in the code in advance while writing the code , reducing the time to find and fix bugs

Compared:

• Using JS:
  1. Write code in VSCode
  2. Run the code in the browser --> run, you will find the error [late]
• Use TS:
  1. Write code in VSCode --> While writing code, you will find errors [early]
  2. run the code in the browser

Vue 3 source code is rewritten using TS, Angular supports TS by default, React and TS perfectly cooperate, TypeScript has become the programming language of choice for large and medium-sized front-end projects

Currently, the latest front-end development technology stack:

1. React： TS + Hooks
2. View: TS + View3

• Note: Vue2 does not support TS well~

Install the toolkit for compiling TS

Goal: be able to install the ts toolkit to compile ts

content:

• Question: Why install the toolkit for compiling TS?
• Answer: Node.js/browser only understands JS codes, not TS codes. Need to convert TS code into JS code before running
• Install command: npm i -g typescriptoryarn global add typescript
  • typescript package: a package used to compile TS code, provides tsccommands , and realizes the conversion of TS -> JS
  • Note: When installing a global package on a Mac computer, you need to add sudoAccesssudo npm i -g typescript permissions: yarn Global installation:sudo yarn global add typescript
• Verify that the installation is successful: tsc –v (check the version of typescript)

Compile and run TS code

Goal: be able to understand the operation steps of typescript

content:

1. Create a hello.ts file (note: the suffix of the TS file is named.ts )
2. Compile TS to JS: Enter the command in the terminal, tsc hello.ts(at this time, a JS file with the same name will appear in the same directory)
3. Execute JS code: enter the command in the terminal,node hello.js

1 Create ts file ===> 2 Compile TS ===> 3 Execute JS

• Explanation: All legal JS codes are TS codes. If you have a JS foundation, you only need to learn the type of TS
• Note: For JS files compiled and generated by TS, there is no type information in the code

In the real development process, you don’t need to manually convert ts files into js files through tsc. These tasks should be done by webpack or vite

Create a TS-based vue project

Goal : A project that can use vite to create vue-ts templates

content:

Create a vue project based on vite, using typescript template

yarn create vite vite-ts-demo  --template vue-ts