![Babel Coder Babel Coder https://www.babelcoder.com { a: 1, b: 2, c: 3, d: 6 } SPREAD [’A’, ‘B’, ‘C’, ‘D’, ‘E’]](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-14-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com REST const { gender, height, ...rest } = person { name: ‘Somchai’, age: 24, weight: 60 } const [ first, , third, ...rest ] = currencies [’THB’]](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-15-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com OBJECT.KEYS [’name’, ‘age’, ‘socials’]](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-19-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com OBJECT.VALUES [’Somchai’, 24, { facebook: ‘somchai’ }]](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-20-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com 1 const arr = [ , , ] 2 3 [ , , ] 2 4 6 MAP arr.map(n => n * 2)](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-26-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com 1 const arr = [ , , ] 2 3 [ , ] 2 3 FILTER arr.filter(n => n >= 2)](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-27-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com 1 const arr = [ , , ] 2 3 2 FIND arr.find(n => n >= 2)](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-28-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com 1 const arr = [ , , ] 2 3 1 FIND INDEX arr.findIndex(n => n * 2) index: 0 index: 1 index: 2](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-29-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com number BASIC TYPES let num = 2 let str = ‘hello’ str = ‘world’ const str2 = ‘hello’ str2 = ‘world’ const arr = [1, 2, 3] const arr: number[] = [1, 2, 3] string ‘hello’ number[] Literal Type](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-48-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com 9 GENERIC FUNCTIONS maxNum([2, 5, 9, 1]) maxChar([’a’, ‘e’, ‘z’, ‘i’]) z](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-59-2048.jpg)
![Babel Coder Babel Coder https://www.babelcoder.com PARAMETERS [items: unknown[], index: number]](https://image.slidesharecdn.com/recapjavascriptandtypescript-240905013517-ac0ec848/75/Recap-JavaScript-and-TypeScript-pdf-Recap-JavaScript-and-TypeScript-pdf-69-2048.jpg)
Recap JavaScript and TypeScript.pdf Recap JavaScript and TypeScript.pdf
- 1. RECAP JS AND TS BabelCoder https://www.babelcoder.com
- 2.
- 3. Babel Coder BABEL CODER NuttavutT https://www.babelcoder.com Babel Coder https://www.babelcoder.com
- 4.
- 5. Babel Coder Babel Coder https://www.babelcoder.com Runtime JAVASCRIPT RuntimeRuntime Interpreter Interpreter Interpreter JavaScript JavaScript JavaScript
- 6. Babel Coder Babel Coder https://www.babelcoder.com ES ECMASCRIPT JavaScript ES DOM ECMAScriptหรือ ES เป็นภาษาต้นแบบที่กำหนดรูปแบบไวยากรณ์ของภาษาที่มีภาษาปลายทาง เช่น JavaScript สืบทอดไวยากรณ์ไปใช้งาน อย่างไรก็ตาม JavaScript ยังมี API อื่น ๆ นอกเหนือจาก API ทาง ภาษาที่กำหนดไว้ใน ES เช่น DOM API ES2015 (ES6) ES2016 ES2017 ES2018 ES2019 ES2020 ES2021 ES2022 ES2023 ES2024
- 7.
- 8. Babel Coder Babel Coder https://www.babelcoder.com src bcrypt PACKAGEMANAGER api package.json app.controller.ts app.module.ts app.service.ts main.ts node_modules pnpm store bcrypt link
- 9. Babel Coder Babel Coder https://www.babelcoder.com person name LETAND CONST การใช้ let ในการประกาศตัวแปร สามารถเปลี่ยนค่าได้ การใช้ const ในการประกาศตัวแปร ไม่ สามารถเปลี่ยนค่าได้ อย่างไรก็ตามการใช้ const กับออบเจ็กต์ ยังคง สามารถแก้ไขค่าภายในได้ age 24 Somchai 25
- 10. Babel Coder Babel Coder https://www.babelcoder.com TEMPLATELITERAL สัญลักษณ์ ` ใช้กับไวยากรณ์ของ Template Literal Template Literal สามารถทำ Interpolation คือการ แทนที่ค่าจากตัวแปรหรือค่าข้อมูลได้ และสามารถสร้าง ข้อมูล string แบบหลายบรรทัดได้โดยไม่ต้องใช้ n
- 11. Babel Coder Babel Coder https://www.babelcoder.com PROPERTYSHORTHAND กรณีที่ชื่อของ property เหมือนกับชื่อของ ตัวแปร เราสามารถลดรูปด้วยการระบุแค่ชื่อ property เท่านั้นได้
- 12. Babel Coder Babel Coder https://www.babelcoder.com consthousingNo = address.housingNo const village = address.village DESTRUCTURING const name = person.name const age = person.age const gender = person.sex const address = person.address
- 13.
- 14. Babel Coder Babel Coder https://www.babelcoder.com {a: 1, b: 2, c: 3, d: 6 } SPREAD [’A’, ‘B’, ‘C’, ‘D’, ‘E’]
- 15. Babel Coder Babel Coder https://www.babelcoder.com REST const{ gender, height, ...rest } = person { name: ‘Somchai’, age: 24, weight: 60 } const [ first, , third, ...rest ] = currencies [’THB’]
- 16. Babel Coder Babel Coder https://www.babelcoder.com OPTIONALCHAINING socials มีค่าเป็น undefined จึงไม่สามารถเรียก facebook ต่อจาก undefined ได้ กรณีเดียวกัน เมื่อ login เป็น undefined จึงไม่ สามารถเรียกแบบฟังก์ชันได้ Optional chaining ที่ใช้สัญลักษณ์เป็น ?. จะช่วย พิจารณาว่าค่าก่อนหน้า ?. นั้นเป็น null หรือ undefined หรือไม่ หากไม่ใช่จึงจะทำการเรียกใช้ค่า หลัง ?. ต่อไป
- 17. Babel Coder Babel Coder https://www.babelcoder.com NULLISHCOALESCING 500 0
- 18. Babel Coder Babel Coder https://www.babelcoder.com hasError&& <div>Error!!</div> AND OPERATOR const hasError = true const hasError = false hasError && <div>Error!!</div> true <div>Error!!</div> false
- 19.
- 20. Babel Coder Babel Coder https://www.babelcoder.com OBJECT.VALUES [’Somchai’,24, { facebook: ‘somchai’ }]
- 21.
- 22.
- 23.
- 24. Babel Coder Babel Coder https://www.babelcoder.com ARROWFUNCTION function increase(n) { return n + 1 } const increase = (n) => { return n + 1 } const increase = (n) => n + 1 const increase = n => n + 1
- 25. Babel Coder Babel Coder https://www.babelcoder.com ARROWFUNCTION function add(n, m) { return n + m } const add = (n, m) => { return n + m } const add = (n, m) => n + m
- 26. Babel Coder Babel Coder https://www.babelcoder.com 1 constarr = [ , , ] 2 3 [ , , ] 2 4 6 MAP arr.map(n => n * 2)
- 27. Babel Coder Babel Coder https://www.babelcoder.com 1 constarr = [ , , ] 2 3 [ , ] 2 3 FILTER arr.filter(n => n >= 2)
- 28. Babel Coder Babel Coder https://www.babelcoder.com 1 constarr = [ , , ] 2 3 2 FIND arr.find(n => n >= 2)
- 29. Babel Coder Babel Coder https://www.babelcoder.com 1 constarr = [ , , ] 2 3 1 FIND INDEX arr.findIndex(n => n * 2) index: 0 index: 1 index: 2
- 30. Babel Coder Babel Coder https://www.babelcoder.com circle.js ESMODULE const DEFAULT_COLOR = ‘white‘ class Circle { } triangle.js const DEFAULT_COLOR = ‘white‘ class Triangle { } // import DEFAULT_COLOR main.js
- 31. Babel Coder Babel Coder https://www.babelcoder.com circle.js triangle.js main.js main.js ESMODULE export const DEFAULT_COLOR = ‘white‘ class Circle { } export const DEFAULT_COLOR = ‘white‘ class Triangle { } import { DEFAULT_COLOR } from 'circle' import { DEFAULT_COLOR } from 'circle' import { DEFAULT_COLOR } from 'triangle' Named export
- 32. Babel Coder Babel Coder https://www.babelcoder.com circle.js triangle.jsmain.js ES MODULE export const DEFAULT_COLOR = ‘white‘ class Circle { } export const DEFAULT_COLOR = ‘white‘ class Triangle { } import * as circle from 'circle' import * as triangle from 'triangle' circle.DEFAULT_COLOR triangle.DEFAULT_COLOR Named export
- 33. Babel Coder Babel Coder https://www.babelcoder.com ESMODULE circle.js triangle.js export const DEFAULT_COLOR = ‘white‘ export default class Circle { } export const DEFAULT_COLOR = ‘white‘ export default class Triangle { } main.js import Circle from 'circle' import Triangle from 'triangle' Default export
- 34. Babel Coder Babel Coder https://www.babelcoder.com ESMODULE circle.js export const DEFAULT_COLOR = ‘white‘ export default class Circle { } main.js import Circle, { DEFAULT_COLO R } from 'circle' default named
- 35. Babel Coder Babel Coder https://www.babelcoder.com ESMODULE circle.js export const DEFAULT_COLOR = ‘white‘ export default class Circle { } main.js import Circle, * as circle from 'circle' default named
- 36. Babel Coder Babel Coder https://www.babelcoder.com ASYNCHRONOUS console.log(1) setTimeout(()=> { console.log(2) }, 1000) console.log(3) 1 2 3 Sync Sync Async Callback function
- 37. Babel Coder Babel Coder https://www.babelcoder.com ASYNCHRONOUS import{ setTimeout } from ‘timers/promises’ console.log(1) setTimeout(10 00).then(() => { console.log(2) }) console.log(3) Promise-based API Callback function
- 38. Babel Coder Babel Coder https://www.babelcoder.com ASYNC/ AWAIT import { setTimeout } from ‘timers/promises’ console.log(1) async function myTimer() { await setTimeout(10 00) console.log(2) } myTimer() console.log(3) const myTimer = async () => { await setTimeout(10 00) console.log(2) }
- 39. Babel Coder Babel Coder https://www.babelcoder.com 200 FETCHAPI /api/products/1 200 OK Content-Type: application/json res.status res.ok true
- 40. Babel Coder Babel Coder https://www.babelcoder.com FETCHAPI /api/products/ Content-Type: application/json POST
- 41. Babel Coder Babel Coder https://www.babelcoder.com FETCHAPI Content-Type: application/json PATCH /api/products/1
- 42. Babel Coder Babel Coder https://www.babelcoder.com name price image PATCH FETCHAPI Lorem 200 File Form Data Content-Type: multipart/form-data /api/products/1
- 43. Babel Coder Babel Coder https://www.babelcoder.com DELETE FETCHAPI /api/products/1
- 44.
- 45. Babel Coder Babel Coder https://www.babelcoder.com JavaScript ES DOM TYPESCRIPT TypeScript Argumentof type 'string' is not assignable to parameter of type 'number' Argument of type 'undefined' is not assignable to parameter of type 'number'
- 46.
- 47. Babel Coder Babel Coder https://www.babelcoder.com BASICTYPES let num = 2 let num: number = 2 boolean number string unknown any null undefined void never object true, false 1, 2, 0.2 ‘A’, ‘’ ใช้กับข้อมูลที่ยังไม่ทราบชนิดข้อมูลในขณะนั้น สามารถกำหนดข้อมูลใดให้ก็ได้ null undefined ใช้ในกรณีของฟังก์ชันที่ไม่คืนค่า ใช้เพื่อบ่งชี้ว่าเป็นไปไม่ได้ที่จะเกิดค่านี้ ออปเจ็กต์ใด ๆ
- 48. Babel Coder Babel Coder https://www.babelcoder.com number BASICTYPES let num = 2 let str = ‘hello’ str = ‘world’ const str2 = ‘hello’ str2 = ‘world’ const arr = [1, 2, 3] const arr: number[] = [1, 2, 3] string ‘hello’ number[] Literal Type
- 49.
- 50.
- 51.
- 52.
- 53. Babel Coder Babel Coder https://www.babelcoder.com UNION roleจะสามารถกำหนดค่าได้เพียง ADMIN MANAGER หรือ MEMBER อย่างใดอย่างหนึ่งเท่านั้น
- 54. Babel Coder Babel Coder https://www.babelcoder.com Merginginterface INTERFACES VS TYPE ALIAS Merging interface เป็นคุณสมบัติของ interface ที่สามารถรวมการประกาศ interface ที่เกิดขึ้นซ้ำหลายครั้งให้ประกอบด้วยทุก properties จาก interface ต่าง ๆ ที่มีชื่อเดียวกัน คุณสมบัตินี้ไม่ปรากฎใน Type alias
- 55. Babel Coder Babel Coder https://www.babelcoder.com INTERFACESVS TYPE ALIAS Type alias มีความยืดหยุ่นในการประกาศโครงสร้างของชนิดข้อมูลที่ซับซ้อนได้มากกว่าการใช้งาน interface
- 56.
- 57. Babel Coder Babel Coder https://www.babelcoder.com OPTIONALPROPERTIES const somchai: Person = { name: ‘Somchai‘, gender: ‘male‘, socials: { facebook: ‘somchai‘ } } socials ไม่จำเป็นต้องมี tiktok ก็ได้เพราะเป็น optional property
- 58. Babel Coder Babel Coder https://www.babelcoder.com FUNCTIONTYPES return type สถานการณ์ส่วนใหญ่ TypeScript สามารถ infer ชนิดข้อมูลที่ return จากฟังก์ชันได้จึงไม่จำเป็นต้องระบุ return type อย่างไร ก็ตามหากการ infer นั้นไม่ถูกต้อง เรายังจำเป็นต้องระบุชนิด ข้อมูลที่คืนกลับจากฟังก์ชันอยู่
- 59. Babel Coder Babel Coder https://www.babelcoder.com 9 GENERICFUNCTIONS maxNum([2, 5, 9, 1]) maxChar([’a’, ‘e’, ‘z’, ‘i’]) z
- 60.
- 61. Babel Coder Babel Coder https://www.babelcoder.com GENERICFUNCTIONS item สามารถเป็นได้แค่ number หรือ string เท่านั้น sortItem<number>(3142); sortItem(3142);
- 62. Babel Coder Babel Coder https://www.babelcoder.com any AS constproduct = fetchApi('/products') const product = fetchApi('/products') as Product Product
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. Babel Coder Babel Coder https://www.babelcoder.com RETURNTYPE ดึงชนิดข้อมูลจาก getTheme ที่เป็นโค้ดฝั่ ง JavaScript มาสู่ TypeScript
- 69. Babel Coder Babel Coder https://www.babelcoder.com PARAMETERS [items:unknown[], index: number]
- 70. Babel Coder Babel Coder https://www.babelcoder.com KEYOF ‘name’ | ‘socials’
- 71. Babel Coder Babel Coder https://www.babelcoder.com nameLoki no 1234 amount 500 name Thor no 5678 amount 1,000 deposit CLASSES withdraw
- 72. Babel Coder Babel Coder https://www.babelcoder.com nameLoki no 1234 amount 500 name Thor no 5678 amount 1,000 deposit withdraw Data DATA AND BEHAVIOR Behavior
- 73. Babel Coder Babel Coder https://www.babelcoder.com DATAAND BEHAVIOR const acc1 = new SavingAccount(); acc1.name = "Loki"; acc1.no = 1234; acc1.balance = 500; acc1.deposit(100) acc1.balance // 600 acc1.withdraw(50) acc1.balance // 550
- 74. Babel Coder Babel Coder https://www.babelcoder.com constacc1 = new SavingAccount("Loki", 1234, 500); CONSTRUCTOR
- 75. Babel Coder Babel Coder https://www.babelcoder.com constacc1 = new SavingAccount("Loki", 1234, 500); // Property 'balance' is private and only accessible // within class 'SavingAccount' acc1.balance; MEMBER VISIBILITY
- 76. Babel Coder Babel Coder https://www.babelcoder.com constacc1 = new SavingAccount("Loki", 1234, 500); CONSTRUCTOR PROPERTY INITIALIZATION
- 77.