---
###### tags: `TypeScript`
---
# 10/18
## readonly 只讀

class Person_11 {
  public readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
}

const person11 = new Person_11("Dell");
console.log(person11.name);
person11.name = "hello"; // 報錯 因為 'name' 為唯讀屬性，所以無法指派至 'name'。
console.log(person11.name);

## abstract class 抽象類

- 很多的類如果有通用性，抽象類就是把這些東西定義出來，進行封裝
>例：每個圖形都要有個 getArea 方法

// 定義圖形通用抽象類
abstract class Geom {
  width!: number;
  getType() {
    return "Geom";
  }
  abstract getArea(): number;
}
// 抽象類只能被繼承，抽象方法必須在子類中被實現
class Circle extends Geom {
  getArea() {
    return 123;
  }
}
class Square {}
class Triangle {}

- test

// 定義介面
interface Teacher {
  name: string;
}
interface Student {
  name: string;
  age: number;
}
interface Driver {
  name: string;
  age: number;
}
const teacher = {
  name: "dell",
};
const student = {
  name: "lee",
  age: 18,
};
// 介面封裝不夠，職業太多
const getUserInfo = (user: Teacher | Student | Driver) => {
  console.log(user.name);
};
getUserInfo(teacher);
getUserInfo(student);

- 對介面二次封裝

// 二次封裝介面 人物
interface Person {
  name: string;
}
// 定義介面
interface Teacher extends Person {
  teachingAge: number;
}
interface Student extends Person {
  age: number;
}
interface Driver extends Person {
  age: number;
}
const teacher = {
  name: "dell",
  teachingAge: 3,
};
const student = {
  name: "lee",
  age: 18,
};
// user 是 Person 得到改善
const getUserInfo = (user: Person) => {
  console.log(user.name);
};
getUserInfo(teacher);
getUserInfo(student);

# 爬蟲

## 環境建置

npm init -y
tsc --init
npm install -D ts-node

- package.json 中 scripts 設置

"dev": "ts-node ./src/crawler.ts"

- js 套件需要翻譯文件
> ts -> .d.ts 翻譯文件 @types/superagent -> js

- async await

async getRawHtml() {
    const result = await superagent.get(this.url);
    this.rawHtml = result.text;
    console.log(this.rawHtml);
}

- fs、path :
- node 核心模塊 (檔案存取以及路徑)

### 按需求定義 interface

interface Course {
  title: string;
  courseImg: string;
}
interface CourseResult {
  time: number;
  data: Course[];
}
interface Content {
  [propName: number]: Course[];
}

### 建構實體 class

class Crowller {
  private url = `http://www.dell-lee.com/`;
  private filePath = path.resolve(__dirname, "../data/course.json");
  
  methods:{
  // 方法....
  }
  
  // 構造器
  constructor() {
    this.initSpiderProcess();
  }
}

const crowller = new Crowller();

### 建構方法
> 保持單一職則原則

// 獲取 html 方法
async getRawHtml() {
    const result = await superagent.get(this.url);
    return result.text;
}
// 傳入 html 並回傳 Data 物件
getCourseInfo(html: string) {
    // 過程(略.....
    return { time: new Date().getTime(), data: courseInfos };
}
// 取得檔案內容方法
generateJsonContent(courseInfo: CourseResult) {
    let fileContent: Content = {};
    // 判斷該路徑文件是否存在
    if (fs.existsSync(this.filePath)) {
        // 先讀取已存在文件內容
        fileContent = JSON.parse(fs.readFileSync(this.filePath, "utf-8"));
    }
    fileContent[courseInfo.time] = courseInfo.data;
    return fileContent;
}
// 寫入檔案方法
writeFile(content: string) {
    fs.writeFileSync(this.filePath, content);
}

### 將邏輯過程拆分出來 (controller ?) -> 避免耦合

async initSpiderProcess() {
    const html = await this.getRawHtml();
    // 將 html 傳入 getCourseInfo()
    const courseInfo = this.getCourseInfo(html); 
    // 將 data物件 傳入 generateJsonContent()
    const fileContent = this.generateJsonContent(courseInfo); 
    this.writeFile(JSON.stringify(fileContent)); 
    // 將 courseInfo 傳入 writeFile()
    console.log("已完成");
  }

# 爬蟲重構 - 組合模式

將 html 分析的過程抽離成一個分析類 (Analyzer)，將原本的 Crawler 功能改造成
>**獲取 html -> 交給分析類(回傳檔案內容) -> 寫入檔案**

### 分析類 Analyzer

// 搬移介面與方法
interface Course {...}
interface CourseResult{...}
interface Content {...}
// 定義分析類
export default class DellAnalyzer implements Analyzer {
    private getCourseInfo(html: string) {
    // ...略
    }
    generateJsonContent(courseInfo: CourseResult, filePath: string) {
    // ...略
    }
    // 定義分析方法 ( html 內容,路徑 )
    public ToAnalyzer(html: string, filePath: string) {
        const courseInfo = this.getCourseInfo(html); 
        const fileContent = this.generateJsonContent(courseInfo, filePath);
        // 回傳 檔案內容字串
        return JSON.stringify(fileContent);
  }
}

### 改寫 Crawler

import DellAnalyzer from "./dellAnalyzer.ts";
// 定義 Analyzer 介面
export interface Analyzer {
  ToAnalyzer: (html: string, filePath: string) => string;
}
class Crawler {
    // ....略
    async initSpiderProcess() {
        const html = await this.getRawHtml();
        // 將分析交給 analyzer (class)
        // 將 courseInfo 傳入 writeFile()
        const fileContent = this.analyzer.ToAnalyzer(html, this.filePath);
        this.writeFile(fileContent); 
        console.log("已完成");
    }
    // 構造時 將分析類傳入
    constructor(private url: string, private analyzer: Analyzer) {
        this.initSpiderProcess();
    }
}

// 將網址抽出
const url = `http://www.dell-lee.com/`;
// 組合設計模式實作
const analyzer = new otherAnalyzer();
new Crawler(url, analyzer);