封装新建标签功能

tagListModel.ts

const localStorageName = 'tags';
// 定义类型
type tagListModel = {
  data: string[];
  // 函数写参数类型和返回值类型
  fetch: ()=>string[];
  save: ()=> void;  // void代表不返回
  create: (name: string)=> string;
}
// 用定义的类型声明变量
const tagListModel:tagListModel = {
  data: [],
  fetch() {
    this.data = JSON.parse(window.localStorage.getItem(localStorageName) || '[]') as string[];
    return this.data
  },
  save() {
    window.localStorage.setItem(localStorageName, JSON.stringify(this.data));
  },
  create(name) {
    this.data.push(name);
    this.save();
    return name;
  }
};
export default tagListModel;

判断标签重复

方法1：用error信息

create(name) {
  // 如果重复，抛出错误
  if(this.data.indexOf(name)>= 0) throw new Error("duplicated")
  this.data.push(name);
  this.save();
  return name;
}

createTag() {
  const name = window.prompt('请输入标签名');
  if (name) {
    try {
      tagListModel.create(name);
    } catch (error) {
      // 获取错误信息
      if (error.message === 'duplicated') {
        window.alert('标签名重复');
      }
    }
  }
}

方法2：直接返回string，根据信息给出提示

方法3：使用联合类型(string的子集)

const localStorageName = 'tags';
type tagListModel = {
  ...
  create: (name: string)=> "success" | "duplicated";  // 联合类型，几个字符串中的一个
}
const tagListModel:tagListModel = {
  ...
  create(name) {
    if(this.data.indexOf(name)>= 0) return "duplicated";
    this.data.push(name);
    this.save();
    return "success";
  }
};
export default tagListModel;

createTag() {
  const name = window.prompt('请输入标签名');
  if (name) {
    const message = tagListModel.create(name);
    // 根据返回的信息给出提示
    if (message === 'duplicated') {
      window.alert('标签名重复');
    } else if (message === 'success') {
      window.alert('创建成功');
    }
  }
}