typescript基础

1.是什么？

提供类型检查的语言，用来减少前端开发中的潜在错误

2.如何实现类型检查？

2.1 对object的类型检查

interface User {
  name: string;
  id: number;
}

const user: User = {
  name: "Hayes",
  id: 0,
};

2.2 对class类型检查

interface User {
  name: string;
  id: number;
}

const user: User = {
  name: "Hayes",
  id: 0,
};

2.3 对function的输入和输出进行类型检查

function deleteUser(user: User) {
  // ...
}
 
function getAdminUser(): User {
  //...
}

3. 声明对象结构：interface和type的区别

3.1 Interface

1. 含义：接口
2. 用途：interface（接口） 是 TS 设计出来用于定义对象类型的，可以对对象的形状进行描述

interface Person {
    name: string
    age: number

}

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

3.2 Type

1. 含义：类型别名
2. 用途：类型别名只是给类型起一个新名字。它并不是一个类型，只是一个别名而已。比如叫崩坏星穹铁道为崩铁

type Name = string
type NameResolver = () => string
type NameOrResolver = Name | NameResolver          // 联合类型
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n
    }
    else {
        return n()
    }
}

3.3 相同点

A.都可以定义对象和函数

type addType = (num1:number,num2:number) => number


interface addType {
    (num1:number,num2:number):number
}

B.都允许继承，且可以互相继承。interface 使用 extends 实现继承， type 使用交叉类型实现继承

//interface 继承 interface
interface Person {
  name: string
}
interface Student extends Person {
  grade: number
}

const person:Student = {
  name: 'lin',
  grade: 100
}

//type 继承 type
type Person = {
  name: string
}
type Student = Person & { grade: number  }    用交叉类型


//interface 继承 type
type Person = {
  name: string
}

interface Student extends Person {
  grade: number
}


//type 继承 interface
interface Person {
  name: string
}

type Student = Person & { grade: number  }    用交叉类型

3.4 不同点

A.type可以,interface不行

type 可以给基本类型/任意类型起一个别名

type Name = string                              // 基本类型
type arrItem = number | string                  // 联合类型
const arr: arrItem[] = [1,'2', 3]
type Person = {
  name: Name
}

type Student = Person & { grade: number  }       // 交叉类型
type Teacher = Person & { major: string  }
type StudentAndTeacherList = [Student, Teacher]  // 元组类型
const list:StudentAndTeacherList = [
  { name: 'lin', grade: 100 },
  { name: 'liu', major: 'Chinese' }
]

B.interface可以,type不行

合并重复声明

interface Person {
    name: string
}

interface Person {         // 重复声明 interface，就合并了
    age: number
}

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

4.泛型

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}
 
// 这一行是一个简写，可以告诉 TypeScript 有一个常量，叫做`backpack`，并且不用担心它是从哪
// 里来的。
declare const backpack: Backpack<string>;
 
// 对象是一个字符串，因为我们在上面声明了它作为 Backpack 的变量部分。
const object = backpack.get();
 
// 因为 backpack 变量是一个字符串，不能将数字传递给 add 函数。
backpack.add(23);

Reference

TypeScript: Documentation - TypeScript for JavaScript Programmers (typescriptlang.org)

TS 中 interface 和 type 究竟有什么区别？ - 掘金 (juejin.cn)