小玩一下 TypeScript

這邊用一個 api 測試網頁https://jsonplaceholder.typicode.com/

建資料夾與套件

先到專案位置，然後

npm init -y
npm install axios

加入檔案 index.ts

import axios from "axios";

const url = "https://jsonplaceholder.typicode.com/todos/1";

axios.get(url).then((response) => {
  console.log(response.data);
});

我們不能直接執行 typescript 檔案，必須要先編譯成 js

用終端機

tsc index.ts

這時檔案夾內會多一個編譯好的 js 檔案，這時用 node index.js 就可以看到結果。

但這樣太麻煩了，要先編譯再執行。

而直接用 $ ts-node index.ts 就可以直接編譯並執行 ts 檔。(執行時間會比較久是正常的)。

我們來體驗一下 typescript 開發的好處，在編譯以前就可以知道問題:

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

axios.get(url).then((response) => {
  const todo = response.data as Todo;

  const ID = todo.id; // 如果這邊打錯字就會先提醒您
  const title = todo.title; // 不用等到執行就知道錯誤
  const finished = todo.completed;

  console.log(`
  The todo id: ${ID}
  The title is: ${title}
  Is the todo finished? ${finished}
`);
});