Typescript 學習筆記 - Section 1

這是有關於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}
  `);
};

Typescript Overview

What is Typescript

實作

Related Posts