Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

I wanted to write a short, concise how-to on TypeScript that would help people get to the core of TypeScript instead of just getting to the basics.

Define the type of

The most used in the project is to define the data type, which is also the most complex in my opinion. Not only do we need to define the type by ourselves, but sometimes we need to import its type from other NPM and use it, which is also a relatively comprehensive operation.

There are several built-in TypeScript types: number, String, Boolean, null, and undefined.

The joint type

If it is a type, it can be a variety of types, such as timers. The initial value is usually null, followed by a timer. Or is a variable, it can be either assignment number, string, and assignment “|” can be used to increase type. (Install @types /node for NodeJS)

let timer: null | NodeJS.Timeout = null
timer = setInterval(() = > {
  console.log('123'); 
},1000)

let a: number | string = 123
a = 'xx'
Copy the code

Type Type alias

As above, if the type to be written is too long, we can use type to declare an alias for the type, which can be simplified as follows:

type timeout = null | NodeJS.Timeout
let timer: timeout = null
timer = setInterval(() = > {
  console.log('123'); 
},1000)

type shap = string | number
let a: shap = 123
a = 'xx'
Copy the code

It seems that there is an extra line of code, which will be a bit troublesome, but in actual projects, types are placed in a separate.d.ts type file, and then imported references, so the overall structure is very simple.

Interface interface

Interface Indicates the interface definition object

Interfaces are used to define objects, classes, and functions

interface Iobj {
    name:string
    age:number
}

let obj:Iobj = {
    name:'xx'.age:4
}
Copy the code

But you can also define objects using type aliases:

type Iobj = {
    name:string
    age:number
}

let obj:Iobj = {
    name:'xx'.age:4
}
Copy the code

The difference is:

An interface can only define objects, classes, and functions, whereas a type alias can define any type.

2. Interface is directly followed by the type, and the alias of type is “=”

3. Interfaces can be defined multiple times, resulting in a merge. Type can only be defined once, and merge types are extended with ampersand.

interface Iobj {
    name:string
}

interface Iobj {
    age:number
}

/ / equivalent to the
interface Iobj{
    name:string
    age:number
}
Copy the code

type goodsName = {
    name:string
}
type goodsPrice = {
    price:number
}
type goods = goodsName & goodsPrice
Copy the code

Usage is that the type is already defined by someone else, or is a base type, and then you have to extend the type.

Interface Defines interface functions

Function definition is divided into function declaration and function implementation.

// Function declaration
function fn(params: number) :void// Function implementationfunction fn(params: number) {
  if(params>0) console.log(params);
}
Copy the code

Function definitions can also be implemented using the interface interface

interface Ifn {
  (params:number) :void
}

const  fn:Ifn= (params: number) = > {
  if(params>0) console.log(params);
} 
Copy the code

Function overloading

Implement a function that returns data “precisely” based on the type of the input parameter. For example, if the input is a string, the returned data is a string. If a number is entered, some number is returned.

Although use generics can achieve, when used, the data is not accurate data, but the string | number. This did not meet expectations.

function fn<T> (params: T) {
    if (typeof params === 'string') return 'xxx'
    return 123
}

fn('22')
Copy the code

This can then be implemented using function overloading. Ts allows functions to be declared more than once, as long as the function was implemented the last time.

function fn(name: string) : 'xxx'
function fn(name: number) : 123function fn(name: string | number) {
    if (typeof name == 'string') return 'xxx'
    return123}fn('123')
Copy the code

Interface Interface definition class

Implements an interface with a class using the implements keyword.

interface Iclass {
    name: string
    fn(params: number) :void
}

class Dog implements Iclass {
    name: string
    constructor(name) {
        this.name = name
    }
    fn(params: number) {
        console.log(params)
    }
}

Copy the code

Define an Array Array

The type +[] indicates that only arrays of the specified type can be held. The following indicates that only arrays of the numeric type can be held, and so on. You can also use associative types to define an array that can be both a number and a string.

let arr:number[] = [7.8.9]
let arr: (string | number) [] = [123 ,'xx']
Copy the code

Update in the…