Examples of Methods for Correct Use of interface and type in TypeScript

Directory Preface interface type Attachment: Summary of the differences between interface and type

Preface

interface and type are both used to define types. It can be understood that shape is defined, so shape represents a kind of design frame, or as long as it has some characteristics or behaviors, it is a kind of thing. In some languages such as Java, interface is used to define behavior. If a class implements a certain interface, it means that the class has certain behavior or ability, such as writable or readable. Things can be divided by behavior. interface is widely used in golang language, but TypeScript interface is more inclined to one type shape, and TypeScript also provides type for defining types. In fact, interface and type are not much different in TypeScript, but there are still some differences.

interface

interface can be used to perform shape on a class (class), an object (object), or a function (function).

interface Tut{
    title:string
    isComplete:boolean
}

An interface interface is defined to represent the Tut type, and then a variable machineLearningTut of the type Tut is defined

const machineLearningTut:Tut = {
    title:"machine learning basic",
    isComplete:true
}

If machineLearningTut of type Tut does not fully implement the interface interface definition properties or methods, friendly hints will be given at compile time

const machineLearningTut:Tut = {
    title:"machine learning basic",
}

machineLearningTut of the prompt type Tut does not implement isComplete, which is already declared in the interface.

Property 'isComplete' is missing in type '{ title: string; }' but required in type 'Tut'.ts(2741)

[demo2.ts(3, 5): ]()'isComplete' is declared here.

class VideoTut implements Tut{
    title:string;
    isComplete:boolean;
}

You can also define the class VideoTut to implement the Tut interface

interface Greet{
    (name:string):string
}

const greet:Greet = (name)=> `hello ${name}`

You can also define the Greet interface for the shape function, define the parameters of the function and the type of the function return value

interface AdvanceTut extends Tut{
    isFree:boolean
}

const machineLearningTut:AdvanceTut = {
    title:"machine learning basic",
    isComplete:true,
    isFree:true
}

Interfaces can be inherited (extended) through extend, AdvanceTut is an extension of Tut, and extend is not supported in type to realize the extension between type.

interface Tut{
    title:string
    isComplete:boolean
}

interface  Tut{
    isFree:boolean
}

const machineLearningTut:Tut = {
    title:"machine learning basic",
    isComplete:true,
    isFree:true
}

It is stated above that two Tut with the same name inteface show that the relationship between Tut is extended, not covered, which is also a feature that type does not have

type

In fact, the usage of type is similar to that of interface, but type is easy to type and can be an alias of the basic type of JavaScript. In fact, type is still somewhat different from interface in essence, which may need to be understood slowly in practice even if explained.

type isComplete = boolean
type title = string
type greet = (name:string)=>string

type Tut = {
    title:string;
    isComplete:boolean
}

const machineLearningTut:Tut = {
    title:"machine learning title",
    isComplete:true
}

type Tut = {
    title:string;
    isComplete:boolean
} & {
    isFree:boolean
}

const machineLearningTut:Tut = {
    title:"machine learning title",
    isComplete:true,
    isFree:true
}

The type type can be & Realize the extension of type

const machineLearningTut:Tut = {
    title:"machine learning basic",
    isComplete:true
}

0

const machineLearningTut:Tut = {
    title:"machine learning basic",
    isComplete:true
}

1

Moreover, the front-end and back-end defined types can also be implemented with type. As follows, multiple basic types can be defined, and these well-defined types can define new types.

const machineLearningTut:Tut = {
    title:"machine learning basic",
    isComplete:true
}

2

Attachment: Differences between interface and type

type can declare primitive type aliases, federated types, ancestral types, and so on

//  Base type alias 
type Name = string;

//  Union type 
interface Dog {
    wong()
}
interface Cat {
    miao();
}

type Pet = Dog | Cat;

//  Specify the type of each position in the array 
type PetList = [Dog, Pet];

You can also use typeof to get the type of the instance for assignment in the type statement

const machineLearningTut:Tut = {
    title:"machine learning basic",
    isComplete:true
}

4

type Other Sao Operations

const machineLearningTut:Tut = {
    title:"machine learning basic",
    isComplete:true
}

5

interface can declare merge

const machineLearningTut:Tut = {
    title:"machine learning basic",
    isComplete:true
}

6

The User interface is:

const machineLearningTut:Tut = {
    title:"machine learning basic",
    isComplete:true
}

7

Summarize