<20230918> Day 17. <TS 專案 01> 小小的專案結構

2023 iThome 鐵人賽

DAY 17

自我挑戰組

Rayeee 的 TypeScript 的學習日記系列第 17 篇

15th鐵人賽

rayeee

2023-09-18 23:50:34

236 瀏覽

分享至

昨天我們介紹了專案需求，回憶需求可以參考昨天的文章 Day 16. 來做個 TypeScript 專案吧

所需知識 html, javascript, 前面提及的 typescript 知識

專案結構

我們先來規劃一下專案結構吧
下面再放一次我們的初步需求圖

前面說到了我們會有兩個主要的物件 User, Company，但是也別忘了它們要在 地圖 上面顯示，所以地圖會是第三個必要物件 Map

可以想像這個小專案就是這三個物件 class User, Company, Map 在互動，它們裡面會有各自的方法和屬性 (Methods & Properties)

class User, Company 可能會長這樣，除了各自的屬性外，一定會有共有的經緯度屬性

class User {
  name,
  age,
  position: {
    lat,  // 經度
    lng,  // 緯度
  }
}
class Company {
  companyName,
  companyProperty,
  position: {
    lat,  // 經度
    lng,  // 緯度
  }
}

class Map 可能會長這樣，裡面會有地圖 map 屬性和一些方法，讓它可以顯示在瀏覽器上並可以添加點擊地圖時的標記

class Map {
  map,
  addMaker {    // 添加地圖標誌用的 Method
  
  }
}

在 TypeScript 中，通常會把不同的類別 (class) 單獨規劃在一個文件中並獨立導出，要使用時再引用並建立實體

所以我們現在會有三個獨立檔案 User.ts, Company.ts, Map.ts，而為了讓這些不同的 class 一起協作，我們會把它們導入到根文件 index.ts 裡面

在根文件中的使用會像這樣，初始化根目錄時，引用並創建它們的實體

// index.ts
import { User } from './User';
import { Company } from './Company';
import { Map } from './Map';

const user = new User();
const Company = new Company();
const Map = new Map();

// do other things ...

一般這些邏輯層的檔案通常會放在 src 資料夾內 (source folder)，目前規劃的專案結構如下

// project folder
    L src/
       L User.ts
       L Company.ts
       L Map.ts
       L index.ts

而專案內還需要一個老朋友，給瀏覽器渲染用的 index.html，裡面的 html 結構會引用我們上面說的管理主功能的文件 index.ts

<html>
    <body>
         <script src="./src/index.ts"></script>
    </body>
</html>

目前為止的結構大概就這樣：

// project folder
    L index.html
    L src/
       L User.ts
       L Company.ts
       L Map.ts
       L index.ts

class 的檔案約定寫法

可以發現 src 裡面除了 index.ts 的開頭是小寫，其他 User.ts, Company.ts, Map.ts 開頭都是大寫，那是因為在 TypeScript 約定的寫法中，如果檔案的主要目的是導出一個 class (export class)，那他的文件開頭就要大寫，index.ts 中只有引入其他 class 沒有導出，所以不需要大寫

以上是今天的內容，明天會一步步的建立環境。