技術標籤：vue 前端typescriptvue

文章目錄

• 一、介面和類
• • 1.1 介面
  • 1.2 類
• 二、實際案例
• • 2.1 List介面
  • 2.2 ArrayList類實現List介面
  • 2.3 編寫測試例項

一、介面和類

• TypeScript 是面向物件的 JavaScript，我們可以使用TypeScript支援面向物件的所有特性，比如 類、介面等。

1.1 介面

• 介面是一系列抽象方法的宣告，TypeScript的介面定義如下：

// PascalCase形式為介面命名
interface List { 
  // 方法宣告
  add()
  ...
}

• 介面可以通過繼承其他介面來擴充套件

// 繼承使用關鍵字 extends
 

interface ArrayList extends List{ 
  // 方法宣告
  ...
}

1.2 類

• TypeScript 類定義方式如下：

// 類實現介面
class ArrayList<E> implements List<E> {
  // 類成員
  private elementData: Object[];
  private sizeNum: number = 0;

  // 建構函式
  constructor();
  constructor(initialCapacity: number);
  ...
}

• 使用 new 關鍵字來例項化類的物件

var lists = new ArrayList<Number>();

• TypeScript 支援繼承類

class child_class_name extends parent_class_name

二、實際案例

2.1 List介面

/**
 * List介面
 * @author zhuhuix
 * @date 2020-12-23
 */
export interface List<E> {
  // 增加
  add(object: E);
  // 刪除
  remove(object: E): boolean;
  // 提取
  get(index: number
 
): Object;
  // 大小
  getSize(): Number;
}

2.2 ArrayList類實現List介面

import { List } from "./list";

// ArrayList初始化預設大小
const DEFAULT_SIZE = 16;

/**
 * 定義ArrayList實現List介面
 */
export class ArrayList<E> implements List<E> {
  // 定義屬性集合
  private elementData: Object[];

  // ArrayList實際數量
  private sizeNum: number = 0;

  // 建構函式
  constructor();
  constructor(initialCapacity: number);
  constructor(initialCapacity?) {
    if (typeof initialCapacity === "number") {
      //設定初始集合大小
      if (initialCapacity < 0) {
        throw new Error("is no arrayList index : " + initialCapacity);
      }
      this.elementData = new Array<Object>(initialCapacity);
    } else {
      //初始化集合大小
      this.constructor(DEFAULT_SIZE);
    }
  }

  // 增加元素
  public add(object: E) {
    this.ensureExplicitVapacity();
    this.elementData[this.sizeNum] = object;
    this.sizeNum++;
  }

  // 提取元素
  public get(index: number): Object {
    this.rangeCheck(index);
    return this.elementData[index] === undefined
      ? null
      : this.elementData[index];
  }

  public remove(object: E): boolean {
    //刪除具體資料,資料多不建議使用
    let result = false;
    for (let i = 0; i < this.elementData.length; i++) {
      if (this.get(i) === object) {
        this.elementData.splice(i, 1);
        this.sizeNum--;
        result = true;
      }
    }
    return result;
  }

  // 獲取大小
  public getSize(): number {
    return this.sizeNum;
  }

  // 陣列下標檢查
  private rangeCheck(index: number): void {
    if (index >= this.elementData.length || index < 0) {
      throw new Error("is no index--->" + index);
    }
  }

  // 擴容
  private ensureExplicitVapacity(): void {
    if (this.elementData.length < this.sizeNum + 1) {
      // 當前集合實際容量
      let oldCapacity: number = this.elementData.length;
      //擴容1.5倍後的數
      let newCapacity: number = oldCapacity + (oldCapacity >> 1);
      //修改集合容量
      this.elementData.length = newCapacity;
    }
  }
}

2.3 編寫測試例項

import { ArrayList } from "./ArrayList";

var lists = new ArrayList<Number>();

console.log("初始增加元素：========================");
for (var i = 0; i < 10; i++) {
  lists.add(i * 10);
}

console.log("list中有元素：", lists.getSize() + "個");

var str = "";
for (var i = 0; i < lists.getSize(); i++) {
  str = str + lists.get(i) +(i === lists.getSize()-1 ? "" : ",");
}
console.log(str);

console.log("再次增加元素：========================");
for (var i = 10; i < 20; i++) {
  lists.add(i * 100);
}

console.log("list中有元素：", lists.getSize() + "個");
str = "";
for (var i = 0; i < lists.getSize(); i++) {
  str = str + lists.get(i) + (i === lists.getSize()-1 ? "" : ",");
}
console.log(str);

console.log("刪除兩個元素1000和1600：========================");
lists.remove(1000);
lists.remove(1600);
console.log("list中有元素：", lists.getSize() + "個");
str = "";
for (var i = 0; i < lists.getSize(); i++) {
  str = str + lists.get(i) + (i === lists.getSize()-1 ? "" : ",");
}
console.log(str);

• 測試結果