# ==TypeScript== ## Do's and Don'ts --- ==General Types== --- ==ชนิดตัวแปร ที่ไม่ควรประกาศใน TypeScript== | Do | Don't | ความหมายของแต่ละประเภท | | -------- | -------- | -------- | | number | Number | ตัวเลข เช่น 1,2,3,4,..n | | string | String | ตัวอักษร เช่น ชื่อ นามสกุล | | boolean | Boolean | บูลีน เช่น true / false | | symbol | Symbol | สัญลักษณ์ :smile: | | object | Object | ข้อมูลแบบอ็อปเจ็ก เช่น {key:value}| --- ==ชนิดตัวแปร ที่ไม่ควรประกาศใน TypeScript== ตัวอย่าง ```javascript= /** wrong */ function foo(str: String): String; ``` ```javascript= /** OK */ function foo(str: string): string; ``` --- ==Callback Types== --- ==Return Types of Callbacks== <small>กรณีเป็น funtion ที่ไม่มีการคืนค่า (no return) อย่า return type **==any==** ให้ใช้ return type **==void==** แทน </small> ```javascript= /* WRONG */ function fn(x: () => any) { x(); } ``` ```javascript= /* OK */ function fn(x: () => void) { x(); } ``` --- <small> *** การใช้ void นั้นปลอดภัยกว่า เพราะมันจะป้องกันจากการ คืนค่าของ x ในวิธีที่ไม่ได้ตรวจสอบ ตัวอย่าง เช่น </small> ```javascript= function fn(x: () => void) { var k = x(); // oops! meant to do something else k.doSomething(); // error, // but would be OK if the return type had been 'any' } ``` --- ==Optional Parameters in Callbacks== --- >อย่าใช้ พารามิเตอร์ ที่เป็น optional ==(?)== ในการทำ callback >เว้นซะแต่ว่า เราตั้งใจเขียนให้มันเป็นแบบนั้นจริงๆ ตัวอย่าง ```javascript= /* WRONG */ interface Fetcher { getObject(done: (data: any, elapsedTime?: number) => void): void; } ``` ```javascript= /* OK */ interface Fetcher { getObject(done:(data: any, elapsedTime: number) => void): void; } ``` --- :::info <small> เหตุผลคือ : หลังจากที่ callback ทำงานเสร็จแล้ว อาจเป็นไปได้ว่า จะมีการเรียก argument 1 ตัว 2 ตัว ผู้เขียน (โปรแกรมเมอร์ ) อาจจะตั้งใจให้ callback ทำแบบนั้น แต่แย่สุดมีการประกาศ parameter elapsedTime มา แต่ไม่ได้สนใจ จะถูกใช้งาน หรือ ไม่ถูกใช้งานก็ได้ แต่ถ้าเป็นแบบนั้น เราก็ไม่ควรจะประกาศขึ้นมาเลยดีกว่า ถ้ามีการทำงานน้อย อาจจะไม่เห็นผลมากนัก ฉะนั้นควรเขียนให้มีประสิทธิภาพมากที่สุดตั้งแต่เริ่มดีกว่า </small> ::: --- ==Overloads and Callbacks== --- >อย่าเขียนติดกันแบบนี้ จริงๆไม่มีไรมาก คือ อ่านเเล้ว งง แตกต่างกันแค่ callback ==wtf== :-1: ```javascript= /* WRONG */ declare function beforeAll(action: () => void, timeout?: number): void; declare function beforeAll( action: (done: DoneFn) => void, timeout?: number ): void; ``` --- >มาเขียนแบบนี้กันดีกว่า code สะอาด อ่านก็ง่ายด้วย :+1: ```javascript= /* OK */ declare function beforeAll( action: (done: DoneFn) => void, timeout?: number ): void; ``` --- ==Function Overloads== --- ==Ordering== --- <small> อันนี้ก็ไม่มีไรมากนอกจากเรื่อง Performance แล้วก็คือ **ปวดหัว** เนี่ยแหละ ให้เขียนเรียงใหม่ เขียน type ที่เฉพาะเจาะจงไว้ก่อน เพราะว่าโปรแกรมมันอ่านจากบนลงล่าง </small> :-1: ```javascript= /* WRONG */ declare function fn(x: any): any; declare function fn(x: HTMLElement): number; declare function fn(x: HTMLDivElement): string; var myElem: HTMLDivElement; var x = fn(myElem); // x: any, wat? ``` --- <small>code เดิม เพิ่มเติมขึ้น Performance ดีขึ้น เขียนเรียงแบบนี้</small> :+1: ```javascript= /* OK */ declare function fn(x: HTMLDivElement): string; declare function fn(x: HTMLElement): number; declare function fn(x: any): any; var myElem: HTMLDivElement; var x = fn(myElem); // x: string, :) ``` --- ==Use Optional Parameters== --- <small>ไม่ควรเขียน overload โดยที่แตกต่างกันแค่ Param เยอะๆแบบนี้ นอกจากเรื่อง Performance ก็ ปวดหัวเนี่ยละ</small> :-1: ```javascript= /* WRONG */ interface Example { diff(one: string): number; diff(one: string, two: string): number; diff(one: string, two: string, three: boolean): number; } ``` --- <small> ถึงเวลาที่ต้องเอา optional (?) มาช่วยแบบเหมาะสมเเล้ว Good job! </small> :+1: ```javascript= /* OK */ interface Example { diff(one: string, two?: string, three?: boolean): number; } ``` --- ==Use Union Types== --- <small> กรณีที่ type ของ param แตกต่าง เราไม่ควรทำแบบนี้เลย มันดู ไก่กา มาก </small> :-1: ```javascript= /* WRONG */ interface Moment { utcOffset(): number; utcOffset(b: number): Moment; utcOffset(b: string): Moment; } ``` --- <small> ให้ใช้วิธีการ union type แบบนี้ ดูเป็นผู้เล่น Pro player ขึ้นมาทันที </small> :+1: ```javascript= /* OK */ interface Moment { utcOffset(): number; utcOffset(b: number | string): Moment; } ``` --- กรณีที่ผู้อ่าน อ่านแล้วไม่เข้า __เขียนไรวะเนี่ย ก็ขออภัยไว้ ณ ที่นี้เลยครับผม สามารถเข้าไปอ่านได้ที่ [Credit Link](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html) --- ## The End ---