小玩一下 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}
`);
});