Summary of TypeScript getting started

preface

First based on vue and react development fully embrace the TypeScript is a trend, I have in front of the article referred to the concept of engineering stamp here, all effect, speed up and improve the quality of the process are all categories of engineering, so I am in the company actively advocate using TS to development projects, now use is relatively simple, but has tasted the sweets, Will continue to review, to find a best practice.

This article is still a brief note written by Markdown, which I summarized by myself, for reference in development. I hope it can help students with the same needs.

The markup plug-in is used to write markdown mind maps in VSCode, which is really convenient for learning summary

TypeScript (hereafter called TS)

Markup is pasted to render the mind map as usual:

Is a superset of JavaScript (hereinafter called JS)

Common TypeScript writing references are listed here for those of you who want to get started with TS, without going into more detail
So for those of you who have a certain front-end foundation, it might be difficult for those of you who have a basic level, and you might be confused
Most of the constraints used with VUe3 or React are type constraints
In addition, when defining methods or exporting data through type constraints, there will be better type hints when introducing use
We use it in a couple of ways
- Use type interfaces thrown by existing libraries
- Define your own enum enum type for global use
- Custom type files to define interface type constraints thrown by existing libraries

Basic data types

string
- ```
let name: string = 'Vue3'
Copy the code
```
number
- ```
let price: number = 128
Copy the code
```

boolean

let isOnline: boolean = true
Copy the code

undefined

let someUndefined: undefined
Copy the code

null
- ```
let someNull: null
Copy the code
```

array

let me: [string.number] = [Sun Wukong.120] 
Copy the code

any

// This variable can be assigned to any data type without any type restriction
let someAny: any = 'whatever'
someAny = 1
Copy the code

Enum (enumeration)

// This is used to list constants and classification information. You can specify values or shying default values (counting from 0).
enum ThemeEnum {
  DARK = 'dark',
  LIGHT = 'light',
}
ThemeEnum['DARK']
Copy the code

Type union character

// We can assign string and undefined to fullName as follows
let fullName: string | undefined
Copy the code

Add qualified types to JS variables

let price: number = 128;
let name: string = 'xiaoming';
// Function parameters and return value annotations
function greeting(text: string) :string {
  return `Hello ${text}`
}
Copy the code

Interface Defines complex type (object type) interfaces

/ /? Yes Configuring this attribute is optional
// readonly Yes The property is read-only and cannot be modified after initialization
interface Course {
  type: string.num: number.readonly teacher: string, time? :string | boolean
}
let math: Course = {
  type: '1'.num: 1.teacher: 'xiaoming'
}
Copy the code

Function type restriction

Basic usage mode

functionThe function name (Parameter: Parameter type): Return value type{} // General syntax
function add(x: number, y: number) :number {    
  return x + y;
}
add(1.2);
Copy the code

Use type to constrain the function received by the variable

type addType = (a:number,b:number) = > number
let add2: addType  = function(x: number, y: number) :number {
  return x + y;
}
Copy the code

Use interface to constrain the function received by the variable

interface addType = {
  (a:number.b:number) = >number
}
let add2:addType  = function(x: number, y: number) :number {
  return x + y;
}
Copy the code

Function overloading (definition of the same function with different parameters to return a different set of functions)

Function overloading is implemented through the following set of definitions
function reverse(x: number) :number
function reverse(x: string) :string
function reverse(x: number | string) :number | string | void {
  if (typeof x === 'number') {
    return Number(x.toString().split(' ').reverse().join(' '));
  } else if (typeof x === 'string') {
    return x.split(' ').reverse().join(' '); }}Copy the code

Generic (the output type is the same as the parameter type)

// The input type of test is bound to the return type
function test<T> (args: T) :T {
  return args;
}
test<string> ('Play vue 3 Family Bucket') // T is string, so the return value must be string
test<number> (1)
Copy the code

keyof extends

```
type C = keyof Course;
Copy the code
```

function getProperty<T.K extends keyof T> (o: T, name: K) :T[k] {
  return o[name];
}
Copy the code

Type constraints on the global interface in the host environment (browser)

/ / Window interface
let w:Window = window
Copy the code

/ / the DOM interface
let ele:HTMLElement = document.createElement('div')
Copy the code

/ / the NodeList interface
let allDiv: NodeList = document.querySelectorAll('div')
Copy the code

ele.addEventListener('click'.function(e: MouseEvent) {
  const args:IArguments = arguments w.alert(1)
  console.log(args)
}, false)
Copy the code

Having type constraints and definitions makes for good error and feature tips

In this way, the project can be maintained with evidence to rely on, unlike in the pure JS language environment, the project is written with annotations and still does not run without knowing the previous business logic

conclusion

This article Outlines the basic uses of TS, and a separate article on the use of TypeScript in conjunction with Vue will be written as best practices become available to further illustrate the need for us to use TS development and the community’s overall embrace of TS development.