Type script note,

### clean code methods.

### 1. Type Aliases
:::info

:::success

type Point = {
  x: number;
  y: number;
};
 
// Exactly the same as the earlier example
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

:::

### 2. Optional Properties
:::info
Object types can also specify that some or all of their properties are optional. To do this, add a ? after the property name:

:::success

function printName(obj: { first: string; last?: string }) {
  // ...
}
// Both OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

:::warning
if want to get mutil member, use < > turn to type

function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

:::

:::

### 3. Interfaces
:::info

An interface declaration is another way to name an object type:

:::success

interface Point {
  x: number;
  y: number;
}
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

:::

### 4. Interface and type different
:::info
An interface declaration is another way to name an object type:

:::success
:::

### 5. only typescript funtion use no return on (void)
:::info

function alertName(): void {
    alert('My name is Tom');
}

:::

### 6. Function Expression
:::info
:::success

### mySum is funtion name

### mySum(x,y)
### return type is "number"

let mySum = function (x: number, y: number): number {
    return x + y;
};

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

:::danger
### Good define funtion

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

:::

### 7. Argument default value methods
:::info

### setting default value

lastName: string = 'Cat'

### funtion example

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

buildName('Tom', 'Cat');

#### buildNmae funtion is input two value in funtion
#### But, have setting defalut second member , so if send one value be run it.

buildName('Tom') is ok 

:::

### 8. ES6 rest
:::info
#### this ",...rest" be last input member is rules

function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

:::

### 9. OverLoad

:::info

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

:::

### 10. Type Assertion

:::info
#### <type>vaule

function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

#### value as type

let code: any = 123; 
let employeeCode = code as number;

:::

### 11.export and declare

:::info

#### enum

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

export default Directions;

:::

### 12. operators

:::info
|名稱 |簡化的運算子 |意義|
| -------- | -------- | -------- |
|賦值| (en-US) x = y| x = y
|加法| (en-US)賦值 (en-US) x += y| x = x + y
|減法| (en-US)賦值 (en-US) x -= y| x = x - y
|乘法| (en-US)賦值 (en-US) x *= y| x = x * y
|除法| (en-US)賦值 (en-US) x /= y| x = x / y
|餘數| (en-US)賦值 (en-US) x %= y| x = x % y
|指數| (en-US)賦值 (en-US) x **= y| x = x ** y
|左移賦值| (en-US) x <<= y |x = x << y
|右移賦值| (en-US) x >>= y |x = x >> y
|無號右移賦值| (en-US) x >>>= y |x = x >>> y
|位元| AND 賦值 (en-US) x &= y |x = x & y
|位元| XOR 賦值 (en-US) x ^= y |x = x ^ y
|位元| OR 賦值 (en-US) x |= y |x = x | y

|運算子| 描述| 會回傳 True 的例子|
| -------- | -------- | -------- |
|等於 (en-US)| (==) 假如運算元等價就回傳 True。| 3 == var1 "3" == var1 3 == '3'
|不等於 (en-US)| (!=) 假如運算元等價就回傳 True。| var1 != 4 var2 != "3"
|嚴格等於 (en-US)| (===) 假如運算元具有相同型態且等價則回傳 True。|參考 Object.is (en-US) 及 JS 中的等價性。 3 === |var1
|嚴格不等於 (en-US)| (!==) 假如運算元具有相同型態但不等價，或是具有不同型態，回傳 True。| var1 !== "3" 3 !== '3'
|大於 (en-US)| (>) 假如左方運算元大於右方運算元，回傳 True。| var2 > var1 "12" > 2
|大於或等於 (en-US)| (>=) 假如左方運算元大於或等於右方運算元，回傳 True。| var2 >= var1 var1 >= 3
|小於 (en-US)| (<) 假如左方運算元小於右方運算元，回傳 True。| var1 < var2 "2" < 12
|小於或等於 (en-US)| (<=) 假如左方運算元小於或等於右方運算元，回傳 True。| var1 <= var2 var2 <= 5

:::