“This is the 16th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

I encountered a problem in learning TS:

In this example, you can use type or interface.

interface Person {
    name: string
    age: number
}

const person: Person = {
    name: 'lin',
    age: 18
}
Copy the code
type Person = {
    name: string
    age: number
}

const person: Person = {
    name: 'lin',
    age: 18
}
Copy the code

You can use either type or interface.

So I went to the TS documentation to learn the difference between the two.

I really want to make fun of TypeScript’s official documentation. Without the ability to search the API, it’s hard to find the answer, so I have to scroll through the TypeScript documentation for a long time.

Finally, I went to look up a lot of other information to know that type is called type alias, hidden in the advanced type of this article, I am a beginner, can translate only ghost!

In this case, interface and type should be different things, one is called an interface, the other is called a type alias. It is only sometimes that both achieve the same function that they are often confused.

interface

Interface is designed by TS to define the type of object, which can describe the shape of the object.

interface Person {
    name: string
    age: number
}

const person: Person = {
    name: 'lin',
    age: 18
}
Copy the code

type

Type (type alias). As the name implies, a type alias simply gives the type a new name. It is not a type, just an alias

Like giannis Antetokounmpo, the NBA player whose name is too long to remember, we call him Giannis antetokounmpo.

Just like configuring alias in our project, it is easy to import files without writing relative paths

import componentA from '.. /.. /.. /.. / components/component/index. Vue 'become an import component from' @ / components/component/index. The vueCopy the code

With type, we can write TS more easily and concisely.

For example, in this example, the getName function may take a string or a function.

The type Name = string type NameResolver = () = > string type NameOrResolver = Name | NameResolver / / type of joint function getName(n: NameOrResolver): Name { if (typeof n === 'string') { return n } else { return n() } }Copy the code

This calls both the string and the function.

getName('lin')
getName(() => 'lin')
Copy the code

If the format of the message is not correct, it will prompt you.

Similarities between the two

Can define an object or a function

Now that we’ve defined objects, let’s see how to define functions.

Type addType = (num1:number,num2:number) => number interface addType {(num1:number,num2:number):numberCopy the code
const add:addType = (num1, num2) => {
    return num1 + num2
}
Copy the code

Both allow inheritance (extends)

We define a Person type and a Student type. Student inherits from Person in the following four ways

Interface inheritance interface

interface Person { 
  name: string 
}
interface Student extends Person { 
  grade: number 
}
Copy the code
const person:Student = {
  name: 'lin',
  grade: 100
}
Copy the code

Type inheritance type

Type Person = {name: string} type Student = Person & {grade: numberCopy the code

Interface inheritance type

type Person = { 
  name: string 
}

interface Student extends Person { 
  grade: number 
}
Copy the code

Type interface inheritance

Interface Person {name: string} type Student = Person & {grade: numberCopy the code

Interface uses extends for inheritance, and type uses cross types for inheritance

Differences between the two

Type is ok, interface is not ok

A type alias gives a type a new name. Type aliases are sometimes similar to interfaces, but can work with primitive values, union types, tuples, and any other type you need to write by hand. – TS document

Declare basic types, union types, cross types, and tuples

Basic type type type Name = the string / / arrItem = number | the string / / joint type const arr: arrItem[] = [1,'2', 3] type Person = { name: Name } type Student = Person & { grade: Type Teacher = Person & {major: String} type StudentAndTeacherList = [Student, the Teacher] / / const tuple type list: StudentAndTeacherList = ({name: 'lin', grade: 100 }, { name: 'liu', major: 'Chinese' } ]Copy the code

Interface works, but type does not

Merge duplicate declaration

Interface Person {name: string} interface Person {age: number} const Person: Person = { name: 'lin', age: 18 }Copy the code

If type is declared repeatedly, an error is reported

type Person = {
    name: string
}

type Person = {     // Duplicate identifier 'Person'
    age: number
}

const person: Person = {
    name: 'lin',
    age: 18
}
Copy the code

summary

Interface and type, designed by TS, are completely different things with their own responsibilities.

Interface is an interface that describes an object.

Type is a type alias used to define aliases for various types, making TS easier and clearer to write.

It is only sometimes that they both achieve the same function that they are often confused. I believe you can tell them apart after reading this article.

If my article is helpful to you, like 👍 is your biggest support to me ^ _ ^

Refer to the article

What’s the difference between interface and Type in Typescript

Common confusion with TypeScript: What’s the difference between interface and Type?