# A Whole New Start ## Week 4 ---- ### Extensions + [ESLint](https://tinyurl.com/23bcc6w8) + [Prettier](https://tinyurl.com/ywhnae9v) + [Auto Rename Tag](https://tinyurl.com/3ubanevf) ---- ### Hello TypeScript + 靜態型別檢查 + JavaScript 的超集 + 副檔名為 `.ts` + ReactJS 則為 `.tsx` + By Microsoft ---- ### 語法 ```typescript= type AppState = { results: Array<ItemProps>; query: string; }; class App extends React.Component<{}, AppState> { } function handleClick( event: React.MouseEvent<HTMLInputElement>) { } ``` --- ## 分檔方法 ---- ### Method 1 ```jsx // App.tsx export default function App() { } // Main.tsx import App from "./App" ``` ---- ### Method 2 ```jsx // App.tsx class App extends React.Component { } export default App; // Main.tsx import App from "./App" ``` ---- ### Method 3 ```jsx // App.tsx export class App extends React.Component // Main.tsx import { App } from "./App" ``` --- ## 新奇的東西 ---- ### SWC? + [Speedy Web Compiler](https://github.com/swc-project/swc) + 用 Rust 寫的 TypeScript & JavaScript 編譯器 + Compilation & Bundling + Cross-Platform ---- ### PNPM? + [PNPM](https://github.com/pnpm/pnpm) + 節省硬碟空間的 Package 管理工具 ```shell= pnpm create vite@latest hello-pnpm cd hello-pnpm pnpm install pnpm dev ``` --- ## 其他 ---- ### JSON String ```jsx= // JSON.stringify() <div>State: {JSON.stringify(this.state)}</div> ``` ---- ### 危險的~~中出~~ InnerHTML ```jsx= const bodyText = { __html: this.props.snippet }; <span dangerouslySetInnerHTML={bodyText}></span> ``` [Reference](https://tinyurl.com/22hmz6rf) ---- ### Wiki API CORS + [Reference](https://stackoverflow.com/a/50432573) --- ## 後記 ---- ### onSubmit & onClick + 在 Form 裡面，有 `onSubmit` 就不需要 `onClick` ---- ### Google Apps Script + 可以寫一些 Backend Script + 可以存取 Google SDK