---
# System prepended metadata

title: 'Type script note,'

---

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
![type and interface](https://hackmd.io/_uploads/ry6qyhB8T.png)
:::

### 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
  
:::