First App in TypeScript

打開cmd

輸入 mkdir fetchJson (意思是創建一個叫fetchJson的資料夾)

然後輸入 cd fetchJson(進入這個資料夾)

輸入  npm init -y  (產生package.json檔)

輸入  npm install axios (安裝axios套件)

最後輸入 code . 就可以直接開啟載入這個資料夾的vscode

在資料夾內新增一個index.ts

然後輸入以下code

import axios from "axios";

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

axios.get(url).then(response => {

  console.log(response.data)

})

之後在cmd輸入 tsc index.ts 去編譯這個ts檔

結束後會看到資料夾內多了一個index.js  這就是剛剛的index.ts編譯出來的js檔

在cmd輸入 node index.js

就可以得到以下資料

或是輸入ts-node index.ts 也可以

之後將程式修改如下 再執行一次ts-node index.ts 

import axios from "axios";

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

axios.get(url).then(response => {

  const todo = response.data;

  const ID = todo.id

  const title = todo.title

  const finished = todo.completed

  console.log(`

  ID = ${ID}

  title = ${title}

  finished = ${finished}

  `)

})

最後再修改程式碼如下

定義一個Todo介面

import axios from "axios";

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

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(`

  ID = ${ID}

  title = ${title}

  finished = ${finished}

  `)

})

把console.log功能拆出來 會發現下面有紅線 代表錯誤

原因是跟傳入的參數名稱不一致  修正就好了

這也是typescript的好處  在開發時就會檢查錯誤