Published on

Typescript 學習筆記 - Section 1

Authors
  • avatar
    Name
    Alex Yu
    Twitter

這是有關於Udemy線上課程Typescript The Complete Developer's Guide的學習筆記，導師是Stephen Grider。 我滿喜歡這位老師的教學方式，之前就有買過一些他的課程，課程講解大都淺顯易懂，講解過程會有圖型解釋跟流程圖方便理解觀念。

這一系列筆記將會記錄一些我在上課時覺得是重點的地方，過於簡單的就不贅述。

Typescript Overview

What is Typescript

Typescript 其實就只是 javascript + a type system，在寫 Typescript 的時候其實就只是在寫 javascript。這個 type system 可以幫助我們

  • 在開發時 debug，找到 error
  • 使用 type annotation 分析程式碼
  • 只會在 development 環境 active
  • 不會有任何效能提升

當我們在開發 Typescript code(javascript + type annotation)的時候，經過 Typescript Compiler 編譯，轉譯成 Plain old javascript，brower 在執行這些 javascript，從 brower 端並不會知道我們程式碼是用Ｔ ypescript 編寫

實作

// index.ts
axios.get(url).then((response) => console.log(response.data));

then run tsc index.ts，這會將 ts 檔案編譯成 js 檔，產生index.js，接著便可以 run node index.js。 也可以執行ts-node index.ts，將兩個指令tsc index.ts與node index.js合成一個。

接著可以定義一個interface，叫Todo

// index.ts
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

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

  // typescript compiler will detect error
  const ID = todo.ID;
  const title = todo.Title;
  const finished = todo.finished;

  console.log(`
    The Todo with ID: ${ID}
    Has a title of: ${title}
    Is it finished? ${finished}
  `);
});

fixed to

// index.ts
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

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

  // typescript compiler will detect error
  const id = todo.id;
  const title = todo.title;
  const completed = todo.completed;

  console.log(`
    The Todo with ID: ${id}
    Has a title of: ${title}
    Is it finished? ${completed}
  `);
});

定義 log function

// index.ts
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

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

  // typescript compiler will detect error
  const id = todo.id;
  const title = todo.title;
  const completed = todo.completed;

  logTodo(id, title, completed);
});

const logTodo = (id: number, title: string, completed: boolean) => {
  console.log(`
    The Todo with ID: ${id}
    Has a title of: ${title}
    Is it finished? ${completed}
  `);
};
View on GitHub