TypeScript
[TS] Typescript

Typescript

  • Typescript is strongly type
  • almost JavaScript
let plate = "Earth";
let moon = 1;
let isLarge = false;
 
// 後面可以改變值，但必須是相同type
 
// null & undefined
 
let something: null;
let anotherThing: undefined;

Typescript Typescript

Benefits of Typescripts

  • better error feedback
  • better autocompletion & code hints
  • custom types
  • self documenting
  • static typing
  • code completion
  • refactoring
  • shorthand notations

  1. 更好的錯誤反饋（Better Error Feedback）： TypeScript 提供了靜態類型檢查，能夠在編譯期間捕獲許多常見的錯誤，從而提供更好的錯誤反饋。這可以幫助開發人員在代碼撰寫的早期階段就發現並修復問題，從而提高代碼的品質和可靠性。

  2. 更好的自動完成和程式碼提示（Better Autocompletion & Code Hints）： TypeScript 的靜態類型系統使得 IDE 能夠更準確地理解代碼的上下文，因此提供更精準的自動完成和程式碼提示。這使得開發人員能夠更快速地撰寫代碼，同時減少了因拼寫錯誤或 API 使用不當而導致的錯誤。

  3. 自定義類型（Custom Types）： TypeScript 允許開發人員定義自己的類型，這使得代碼可以更具表達性和清晰度。開發人員可以創建複雜的類型結構，並在整個應用程序中重用這些類型，從而提高了代碼的可維護性和可讀性。

  4. 自我文檔化（Self-Documenting）： 由於 TypeScript 提供了靜態類型檢查和自定義類型，代碼本身就成為了文檔的一部分。通過查看類型定義和函數簽名，開發人員可以更容易地理解代碼的作用和如何使用它。

  5. 靜態類型（Static Typing）： TypeScript 是一種靜態類型語言，這意味著它在編譯期間檢查類型，而不是在運行時。這提供了更大的可靠性，因為許多錯誤可以在實際運行代碼之前就被發現和修復。

  6. 程式碼完成（Code Completion）： 靜態類型信息使得 IDE 能夠更好地理解代碼，並提供更精準的程式碼完成功能。這使得開發人員能夠更快速地找到所需的 API 和函數，從而提高了開發效率。

  7. 重構（Refactoring）： TypeScript 提供了更安全和可靠的重構工具，這些工具能夠確保重構操作不會破壞代碼的其他部分。這使得開發人員可以更自信地進行代碼重構，從而改進代碼的結構和可維護性。

  8. 簡寫記號（Shorthand Notations）： TypeScript 允許使用簡潔的語法來表示複雜的類型結構，從而減少了代碼的冗長性和重複性。這使得代碼更容易閱讀和理解，同時提高了開發效率。

總的來說，TypeScript 通過提供靜態類型檢查、自動完成、自定義類型等功能，使得代碼更具可靠性、可讀性和可維護性，從而提高了開發人員的生產力和代碼品質。

Drawbacks:

  • compilation
  • discipline in coding

Compiling Typescript

  • because the browser couldn’t understand Typescript, we need to compile this down into JavaScript
    • open the terminal, input tsc “file name”.ts “file name”.js
    • if we have already make“file name”.js , input tsc “file name”.ts is fine
  • Cannot redeclare block-scoped variable 'name'.
    • never mind, cause the browser is never loading Typescript
  • automatically compile tsc “file name”.ts -w
  • or we can make a tsconfig.json by tsc —-init , terminal input tsc only is fine
  • tsc -w automatically update
  • we can use node to watch any changes in file node -w dist/index.js

React with Typescript (tsx)

常會用到 import React, { FC } from "react";，FC 代表的是 Functional Component（函數式組件）。在 React 中，函數式組件是一種使用函數定義的 React 組件，而不是類定義的。它們是無狀態的，並且通常以箭頭函數的形式定義。FC 是 React 庫中提供的一個類型定義，它是一個簡化版的 React 函數式組件類型定義，它提供了組件的 Props 屬性的類型定義。

指定Props的類型
import React, { FC } from "react";
 
// 使用FC定義一個函數式組件，並指定Props的類型
const MyComponent: FC<{ name: string }> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};
 
export default MyComponent;
{ children }
import React, { FC } from "react";
 
// 使用FC定義一個接受children的函數式組件
const WrapperComponent: FC = ({ children }) => {
  return <div className="wrapper">{children}</div>;
};
 
export default WrapperComponent;
多個Props
import React, { FC } from "react";
 
// 使用FC定義一個接受多個Props的函數式組件
interface Props {
  name: string;
  age: number;
}
 
const PersonComponent: FC<Props> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};
 
export default PersonComponent;

References

[HTML] HTML Tips[API] RESTful API