# TypeScript讀書會

## 使用typescript的好處
- 嚴謹的格式(避免類別or打字錯誤)
- 自動提示方法協助開發
- 生態系蓬勃

## #4Object & Arrays
隱式類型
#### array
定義型別後不能變動，要mix type在array的話 一開始init要定義好(若一開始array裡是混和型別，就都可以放原始存在的型別，index位置不限)

#### object
物件的話 value會依照init的型別
且不能加入新的屬性

物件要加入其他屬性的話？

## #5Explicit Types(顯式類型)
#### array的顯式類型
沒有初始化的array指定義型別也會報錯

聯合型別(union Type)的話
`let array :(string|number)[]=[]`

let obj:object
obj ={name:'foo',des:'test'}

TypeScript之Object、object、{ }的區別
https://www.jianshu.com/p/8d7cfc4b912c

TypeScript Eslint
https://typescript-eslint.io/rules/ban-types/

## #6Dynamic(any)Types
#### array
`let arr:any[]=[]`

#### object
`
let obj:{name:any,age:any}
`

跟以下寫法any會被當作值而不是type

let obj = {
name：any,
age:any
}

## #7Better Workflow [簡報](https://docs.google.com/presentation/d/1pR6FCgCXs8YC9dI33lCrmSug6lJgllZeP9WC20_kWJU/edit?usp=sharing)
通常要管理時會將ts和js分開
tsconfig要記得設置

"outDir":
"rootDir":

command Line就可以直接 tsc按照設置啟動

[參考資料](https://ithelp.ithome.com.tw/articles/10263733)

## #8Function Basics
#### 設定型別為function
`let greet:Function`

#### input設定參數型別
若參數是optional 可用 `pa?:number`
**optional的參數要往後擺

也可以設定default
`function a(name:string,age:number=10)=>{}`

#### output設定return
其實ts會自動判斷return是什麼型別，但當function很大的時候，也可以自己在開頭寫上return的型別，這樣比較好查看

若沒有回傳值可設定 ：volid
不過js編譯出來會變undefined

## Type Aliases(類型別名)
如果型別要重複很多次
可以使用`type reType:string|number`拉出來管理

[參考資料](https://pjchender.dev/typescript/ts-functions/)

type和interface的不同？

https://www.51cto.com/article/705857.html

## DOM and Type Casting

Select DOM in TypeScript(和 JavaScript 一樣)

document.querySelector('.className')

declare const a: Element | null;

type casting`as`
什麼時候用 ?

const a = document.querySelector('.className') as HTMLElement

declare const a: HTMLElement;

## Class

class Person {
  private name: string;
  private age: number;
  //   initialize
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// Creating an instance of the Person class
const kitty = new Person("Hello Kitty", 49);

// Accessing properties and methods of the instance
console.log(kitty.name); // Error: 'name' is private and cannot be accessed outside the class
console.log(kitty.age); // Error: 'age' is private and cannot be accessed outside the class
john.greet(); // Output: Hello, my name is Hello Kitty and I'm 49 years old.

## Public, Private & Readonly

public -> 全域
private -> scope

class Person {
  private name: string;
  public age: number;
  readonly height: number;
  //   initialize
  constructor(name: string, age: number, height: number) {
    this.name = name;
    this.age = age;
    this.height = height;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old and ${this.height} cm tall.`);
  }
}

// Creating an instance of the Person class
const kitty = new Person("Hello Kitty", 49, 35);

// Accessing properties and methods of the instance
console.log(kitty.name); // Error: 'name' is private and cannot be accessed outside the class
console.log(kitty.age); 
console.log(kitty.height)
kitty.greet(); // "Hello, my name is Hello Kitty and I'm 49 years old and 35 cm tall." 

## Modules

    //tsconfig.json
    "module": "commonjs"

    // types.ts
    export interface Kitty {
      name: string;
      age: number;
    }

    // utils.ts
    import { Kitty } from "./types";
    export function greet(kitty: Kitty) {
      console.log(`Hello, ${kitty.name}!`);
    }

    // app.ts
    import { Kitty, greet } from "./utils";

    const helloKitty: Kitty = { name: "Hello Kitty", age: 49 };
    greet(helloKitty);

## Interfaces
vs Type Aliases
- Add new properties : the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.


[TypeScript doc](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases)

[【TypeScript 學起來】Interface VS Type Aliases 用法與差別](https://ithelp.ithome.com.tw/articles/10275208)

## TypeScript 的 Cheat Sheets
https://www.typescriptlang.org/cheatsheets