What do you get for 10 minutes reading this passage:

This article is suitable for students who are new to TS

  1. Learn the benefits of TS
  2. The characteristics of the ts
  3. installation
  4. Common usage of types
  5. The usage of keywords

Continuously updated… .

What is typescript??

TypeScript is a superset of JavaScript that extends JavaScript’s syntax; That is, all javascript syntax applies to typescript; You can write typescript just like you write JavaScript, but typescript has its own unique features

The advantage of the typescript

If iT were like JavaScript, typescript wouldn’t be as popular, so what problem does typescript solve? What are the advantages?

Advantages:

  1. Reduce bugs; When writing JS, there will always be a low-level error caused by hand damage, TS can specify the type of variable, while writing while compiling, if there is an error, will prompt immediately
  2. Standardize data types to facilitate data docking between the front and back ends
  3. Smart hints, when writing code, you can use the class, variables, methods and keywords to give you a hint
  4. Increased code readability and maintainability

Features:

Features: compared with JS TS more things

  1. Type checking: In Typescript, you specify a type for a variable. For example, when you assign a numeric value to a variable, the IDE does type checking and tells you that there may be errors. This feature reduces the chance that you will make errors during development.
  2. Features are syntactic hints: When writing TypeScript code in the IDE, the IDE prompts you to use classes, variables, methods, and keywords based on the current context. This feature can greatly improve your development efficiency.
  3. Refactoring: you can easily go to modify the variable, or method name or the name of the file, when you make these changes, the IDE will automatically help you in reference to the variable or call this method to automatically modify the code, this feature is a can improve the efficiency of your development, another is can easily improve the code quality

TS installation and use

Method one:

Global installation

npm install typescript -g
Copy the code

Check the version

tsc -v
Copy the code

Ts needs to be converted to JS before it can run, so if you want to write TS (or learn TS) separately, install the TS-Node tool

npm install -g ts-node
Copy the code

perform

Ts - node nameCopy the code

Method 2: Use an online tool

For those new to TypeScript, you can also use TypeScript Playground online to learn new syntax and features without installing TypeScript. Online tool at www.typescriptlang.org/play/

Method 3: TS is often used with projects (using Vite)

You can use Vite to create ts projects

First, install vite

yarn create @vitejs/app
Copy the code

Create the project after installation

Create-viet-app project name// Or use abbreviationsCva project nameCopy the code

Then follow the prompts to enter the directory

Ts project can be built according to vite official website

The basic grammar

Not advanced, xiaobai can completely understand, read immediately can start

Ts is written roughly the same as JS, but with one more type

TypeScript base types

Type string

const c:string= 'hi'
Copy the code

The number type

const d:number= 1
Copy the code

Boolean type

const isTrue:boolean= false
Copy the code

Symbol type

const e:symbol= Symbol('hi')
Copy the code

An array type

const arr:Array<string|number>= ['a'.'d'.55]  
/ / is the type of the array values within the Angle brackets (generics, | said two types)
Copy the code

Function types

A and b are numeric types, and the return value is numeric
const add1 = (a:number,b:number):number= >{
    return a+b
}
// The function can be written as follows:
const add2:(a:number,b:number) = >number = (a,b) = >{
    return a+b
}

// The function is recommended
type Add=(a:number,b:number) = > number
const add3:Add=(a,b) = >{
    return a+b
}
// If the function has an attribute, and the attribute is different from other value types
    // Set the function type first
interface AddWithProps{
    (a:number,b:number) : number
    name:string
}
const add4:AddWithProps=(a,b) = >{
    return a+b
}
add4.name = 'dong'
Copy the code

Unique type

Any is of any type. It can be a number, a string, or a Boolean……

let a:any = 1
Copy the code

Unknown is not known at this time, you need to guess before using (assert).

let b:unknown= JSON.parse('{"name"}:"oldUath"') 
// When you use it, you must specify the type
type B={name:string}
/ / assertions
(b as B).name
Copy the code

The return value of void can be null with no value

let see:() = >void = function(){}
Copy the code

Never Empty set: indicates that it is impossible

The Dir type specifies only these values
type Dir = 1|2|3|undefined
let dir:Dir
switch(dir){
    case 1:
        break;
    case 2:
        break;
    case 3:
        break;
    case undefined:
        break;
    default:
        console.log(dir)
        break; 
}
Copy the code

type

The type keyword defines a type alias

type lady={name:string,age:number}
const xiaojiejie:lady[]=[
    {name:'Liu Yifei'.age:18},
    {name:'Tong Liya'.age:22}]Copy the code

interface

Interface: One of TypeScript’s core tenets is type-checking of the structure a value has. It is sometimes called “duck type discrimination” or “structural typing”. In TypeScript, interfaces name these types and define contracts for your code or third-party code.

const yang:Dong={
    uname:'dongyang'.age:15
}
Copy the code

? :

? : indicates that the variable is optional

interface Dong{
    uname:string; age:number; phone ? : number; }Copy the code

Read-only property

interface Person { readonly name: string; age? : number; }Copy the code

Continuously updated... .