文章目录
Interface
接口用于描述类和对象的结构
- 使项目中不同文件使用的对象保持统一的规范
- 使用接口也会支有规范更好的代码提示
- 抽象类不仅可以定义规范，还可以写业务代码，而接口只有规范
抽象类
下面是抽象类与接口的结合使用
interface AnimationInterface {
name: string
age?: number
play(): void
}
abstract class Animations {
public eat(): void {
console.log(`吃什么`);
}
}
class Cat extends Animations implements AnimationInterface {
public name: string = '猫咪'
public play(): void {
console.log(`${
this.name}爬树`);
}
}
class Dog extends Animations implements AnimationInterface {
public name: string = '狗子'
public play(): void {
console.log(`${
this.name}捉老鼠`);
}
}
const cat = new Cat()
const dog = new Dog()
cat.eat()
cat.play()
dog.play()
对象
interface UserInterface {
name: string
age: number
getInfo(other: string): void
}
const hj: UserInterface = {
name: 'hj',
age: 18,
getInfo: function (other: string) {
console.log(`${
this.name} ${
this.age}, ${
other}`);
}
}
console.log(hj); // { name: 'hj', age: 18, getInfo: [Function: getInfo] }
console.log(hj.getInfo('吃喝玩乐买买买')); // hj 18, 吃喝玩乐买买买
如果尝试添加一个接口中不存在的函数将报错，移除接口的属性也将报错
...
const hj: UserInterface = {
name: 'hj',
age: 18,
getInfo: function (other: string) {
console.log(`${
this.name} ${
this.age}, ${
other}`);
},
sex: '男' // “sex”不在类型“UserInterface”中
}
如果有额外的属性，使用以下方式声明，这样就可以添加任意属性了
nterface UserInterface {
name: string
age: number
getInfo(other: string): void
[key: string]: any
}
接口继承
- 接口可以使用
extends来继承
interface AnimationInterface {
name: string
play(): void
}
interface BiologyInterface extends AnimationInterface {
age: number
}
class Cat implements BiologyInterface {
public name: string = '猫咪'
public age: number = 2
public play(): void {
console.log(`${
this.name}爬树，它${
this.age}岁了`);
}
}
const cat = new Cat()
cat.play()
- 对象可以使用实现多个接口，多个接口用逗号连接
interface AnimationInterface {
name: string
play(): void
}
interface BiologyInterface {
age: number
}
class Cat implements AnimationInterface, BiologyInterface {
public name: string = '猫咪'
public age: number = 2
public play(): void {
console.log(`${
this.name}爬树，它${
this.age}岁了`);
}
}
const cat = new Cat()
cat.play()
函数
使用接口约束函数的参数与返回值
- 会根据接口规范提示代码提示
- 严格约束参数类型，维护代码安全
函数参数
下面是对函数参数的类型约束
interface UserInterface {
name: string
age: number
[key: string]: any
}
const hj = (info: UserInterface): UserInterface => {
console.log(`${
info.name}已经${
info.age}岁了`);
info.sex = 'name'
return info
}
const user: UserInterface = {
name: 'hj',
age: 18,
}
console.log(hj(user)); // { name: 'hj', age: 18, sex: 'name' }
函数声明
使用接口可以约束函数的定义
interface payFunc {
(price: number): string
}
const pay: payFunc = (price: number) => `支付${
price}元`
console.log(pay(100)); // 支付100元
构造函数
使用 interface 可以优化代码，同时也具有良好的代码提示
interface UserInterface {
name: string
age: number
}
class User {
info: UserInterface
constructor(user: UserInterface) {
this.info = user
}
}
const hj = new User({
name: 'hj', age: 19 })
console.log(hj); // User { info: { name: 'hj', age: 19 } }
数组
对数组类型使用接口进行约束
interface UserInterface {
name: string
age: number
}
const hj: UserInterface = {
name: 'hj',
age: 18
}
const hk: UserInterface = {
name: 'hk',
age: 20
}
const userList: UserInterface[] = [hj, hk]
console.log(userList); // [ { name: 'hj', age: 18 }, { name: 'hk', age: 20 } ]
枚举
下面是使用枚举设置性别
enum SexType {
BOY,
GIRL
}
interface UserInterface {
name: string,
sex: SexType
}
const hj: UserInterface = {
name: 'hj',
sex: SexType.BOY
}
console.log(hj); // { name: 'hj', sex: 0 }
type
type 与 interface 非常相似都可以描述一个对象或者函数，使用 type 用于定义类型的别名，是非常灵活的类型定义方式。
- type 可以定义基本类型别名如联合类型，元组
- type 与 interface 都是可以进行扩展
- 使用 type 相比 interface 更灵活
- 如果你熟悉其他编程语言，使用 interface 会让你更亲切
- 使用类(class) 时建议使用接口，这可以与其他编程语言保持统一
- 决定使用哪个方式声明类型，最终还是看公司团队的规范
基本使用
下面是使用 type 声明对象类型
type User = {
name: string
age: number
}
const hj: User = {
name: 'hj',
age: 20
}
上面已经讲解了使用 interface 声明函数，下面来看使用 type 声明函数 的方式
type payFunc = (price: number) => string
const pay: payFunc = (price: number) => `支付${price}元`
console.log(pay(100)); // 支付100元
类型别名
type 可以为 number、string、boolean、object 等基本类型定义别名，比如下例的 IsBoss。
// 基本类型别名
type IsBoss = boolean
// 定义联合类型
type Sex = 'boy' | 'girl'
type User = {
isAdmin: IsAdmin,
sex: Sex
}
const hj: User = {
name: 'hj',
sex: 'boy',
boss: true
}
// 声明元组
const userList: [User] = [hj]
索引类型
type 与 interface 在索引类型上的声明是相同的
interface User {
[key: string]: any
}
type UserTYpe = {
[key: string]: any
}
声明继承
interface
- typescript 会将同名接口声明进行合并
interface User {
name: string
}
interface User {
age: number
}
const hj: User = {
name: 'hj',
age: 20
}
interface也可以使用extends继承
interface User {
name: string
}
interface Person extends User {
age: number
}
const hj: Person = {
name: 'hj',
age: 20
}
- interface 也可以
extends继承 type
type User = {
name: string
}
interface Person extends User {
age: number
}
const hj: Person = {
name: 'hj',
age: 20
}
type
- type 与 interface 不同，存在同名的 type 时将是不允许的
type User = {
name: string
}
// 标识符“User”重复
type User = {
age: number
}
- Type 可以使用
&将 type 与 interface 或 type 进行合并
type User = {
name: string
}
type Something = {
height: number
}
interface PersoInterface {
age: number
}
interface OtherInterface {
sex: number
}
type Info = User & PersoInterface
type InfoInfo = PersoInterface & OtherInterface
type UserSomething = User & Something
const hj: Info = {
name: 'hj',
age: 19
}
- 使用
|声明满足任何一个 type 声明即可
type User = {
name: string
}
type Person = {
age: number
}
type Member = User | Person
const hj: Member = {
age: 19
}
implements
class 可以使用 implements 来实现 type 或 interface
type User = {
name: string
}
class Person implements User {
name: string
}