TypeScript 學習筆記（未完）

原始資料型別

包括：boolean (布林值)、number (數值)、string (字串)、null、undefined 以及 ES6 中的新型別 Symbol。

let isDone: boolean = false;
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let myName: string = 'Tom';

JavaScript 沒有空值（Void）的概念，在 TypeScript 中，可以用 void 表示沒有任何返回值的函式：
function alertName(): void {
alert('My name is Tom');
}

undefined 和 null 是所有型別的子型別。也就是說 undefined 型別的變數，可以賦值給 number 型別的變數：

let num: number = undefined;// 這樣不會報錯

任意值（Any）

用來表示允許賦值為任意型別。
變數如果在宣告的時候，未指定其型別，那麼它會被識別為任意值型別

型別推論

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
雖然沒有定義他是string type但會自動推論是string所以如果在賦值過程中改變型別是不被允許的

聯合型別（Union Types）

表示取值可以為多種型別中的一種。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

物件的型別——介面

在 TypeScript 中，我們使用介面（Interfaces）來定義物件的型別。

• 可選屬性(加上問號)
• 任意屬性
  interface Person {
  name: string;
  age?: number;
  [propName: string]: any;
  }

let tom: Person = {
name: 'Tom',
gender: 'male'
};
使用 [propName: string] 定義了任意屬性取 string 型別的值。
需要注意的是，一旦定義了任意屬性，那麼確定屬性和可選屬性的型別都必須是它的型別的子集（就是age的型別只能是string了

• 唯讀屬性
  有時候我們希望物件中的一些欄位只能在建立的時候被賦值，那麼可以用 readonly 定義唯讀屬性：
  interface Person {
  readonly id: number;
  name: string;
  }

陣列

• 「型別 + 方括號」表示法
  最簡單的方法是使用「型別 + 方括號」來表示陣列：
  let fibonacci: number[] = [1, 1, 2, 3, 5];
• 陣列泛型
  我們也可以使用陣列泛型（Array Generic） Array<elemType> 來表示陣列：
  let fibonacci: Array<number> = [1, 1, 2, 3, 5];

函式

​​​​一個函式有輸入和輸出，要在 TypeScript 中對其進行約束，需要把輸入和輸出都考慮到，其中函式宣告的型別定義較簡單
​​​​function sum(x: number, y: number): number {
​​​​return x + y;

}

​​​​介面：
​​​​interface SearchFunc {
​​​​(source: string, subString？:string): boolean;

}
可選引數：加問號，可選引數後面不允許再出現必需引數了
如果有加預設值TypeScript 會將添加了預設值的引數識別為可選引數

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
return source.search(subString) !== -1;
}
過載：
過載允許一個函式接受不同數量或型別的引數時，作出不同的處理。

型別斷言

型別斷言（Type Assertion）可以用來手動指定一個值的型別。

<型別>值
在 tsx 語法（React 的 jsx 語法的 ts 版）中必須用後一種。
值 as 型別

// 聲明一個字串類型變數
let message: string = "Hello, TypeScript!";

// 聲明一個函數，接受一個字串參數，返回字串
function sayHello(name: string): string {
  return `Hello, ${name}!`;
}

// 定義一個介面，表示一個人的基本信息
interface Person {
  name: string;
  age: number;
  address?: string; // address屬性是可選的
}

// 定義一個類，表示一個人的詳細信息
class DetailedPerson implements Person {
  constructor(public name: string, public age: number, public address?: string) {}
  
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}
    
//基本的函數聲明：
interface Props {
  name: string;
  age: number;
}

const Person: React.FC<Props> = ({ name, age }) => {
  return <div>{name}, {age} years old</div>;
};
    
    
//Hooks
const Counter: React.FC = () => {
  const [count, setCount] = useState(0);
  const counterRef = useRef<HTMLDivElement>(null);
  
  const increment = () => {
    setCount(count + 1);
    counterRef.current?.classList.add("active");
  };
  
  return (
    <div>
      <div ref={counterRef}>Count: {count}</div>
      <button onClick={increment}>Increment</button>
    </div>
  );
};