---
# System prepended metadata

title: typeScript
tags: [typeScript]

---

# typeScript

布魯斯
https://www.youtube.com/watch?v=GinkGJZBHIY

https://basarat.gitbook.io/typescript/
https://github.com/jkchao/typescript-book-chinese

https://www.youtube.com/watch?v=ahCwqrYpIuM 

還沒看 必看不用買客
https://www.youtube.com/watch?v=BwuLxPH8IDs&t=25s
## 基本觀念

他會轉成js
基本是轉到ES5 所以如果用async會很長

如果要用新的ES
再命令提示輸入
touch tsconfig.json


可以指定版本 exnext是最新的意思
如果要用watch也要設定
lib是對於 dom的規劃
![](https://i.imgur.com/P4z1iG0.png)

在ts裡面用js也是可以的

是js的靜態類別
靜態類別要在宣告時候加上屬性  跟 go java c一樣
動態是php js ruby python
## 
https://www.youtube.com/watch?v=dnDuUtQE7Cg

## type hint
宣告後面加入: 規範
![](https://i.imgur.com/hn1z03e.png)


當作變數的type hint

![](https://i.imgur.com/NyAe3V1.png)


OOP寫法 推薦
還可以用圖片裡面第三行的 街口在:any 很有彈性
![](https://i.imgur.com/Bz3TEf6.png)

function也宣告 跟php一樣 沒有也要void
![](https://i.imgur.com/JHTToe7.png)



array
![](https://i.imgur.com/wJmzzyV.png)
array 進階
![](https://i.imgur.com/iPAw46o.png)

**?**
![](https://i.imgur.com/KEEss4U.png)


html用法
![](https://i.imgur.com/ESdx6UV.png)

## 開始
第一 他會編譯成js
可以用tsc 檔名 
跟php一樣她會就轉
當然你也可以用t --watch 檔名 去watch

## config
tes --init
建立設置檔案
預設轉成es5 也是在裡面設置的
改設定之後直接 tes就能重啟了

裡面比較重要的是

outDir
跟
rootDir
進出口文黨
![](https://i.imgur.com/8ieCaSh.png)

dist是编译后的文件，压缩版；
src是源码文件

畫面可以debug的開關
sorceMap
跟webpack一樣
![](https://i.imgur.com/2xln4Zw.png)


## 定義變數
比較特別的是定義array裡面

還能定義tuple(元祖)
array裡面可以 string int 這樣 不同型態
tuple還能做嵌套的喔

![](https://i.imgur.com/wX5Yk8D.png)


union聯盟(php 的mix)
還有Enum
當然Enum可以 改變不從0開始

![](https://i.imgur.com/et91xiZ.png)


object開始
一般來說她的type會抽出來
不然太亂了
![](https://i.imgur.com/fmrQQaG.png)
但一般來說都用interFace 可以看下面interface的講解


賦值
可以用

```
let cid: any = 1

let customerId = <number> cid
or
let customerId = cid as number
```
    
    
function 跟 php一樣 當然也能用mix的
![](https://i.imgur.com/wNieACu.png)

interface
跟type一樣 但她不用 = 因為他本身就是一個obj
![](https://i.imgur.com/VG3sc3j.png)
可以設定readonly 只能讀 不能set
可以用? 不一定要用
跟type差別在於
也可以定義
register() : string 限制returen的
https://stackoverflow.com/questions/37233735/interfaces-vs-types-in-typescript


![](https://i.imgur.com/eqp7npl.png)


可以用()簡潔
![](https://i.imgur.com/lLbKBPF.png)

對了變數也可以prive public這樣去限制
預設就是public
但interface 在class實現 他限定的只能使用public
不能再幫他加入修飾詞

## type vs interface
interface可以擴充
![](https://i.imgur.com/tvsDKXF.png)
interface可以用覆蓋的方式擴充 type不能會覆蓋

## ?

跟php一樣
可以用在function

跟自訂
interface{
    name?: sadas
}

這樣

## fetch之類的 Api 使用(AS)

![](https://i.imgur.com/QFMaeDK.png)
利用as


如果很動態呢
![](https://i.imgur.com/qZoSAjD.png)
給他unknown 

## 泛型

使用時再決定
![](https://i.imgur.com/KeAnOrG.png)
可以class function 之類的
都可以用到
![](https://i.imgur.com/vQGhDjG.png)

## utility
![](https://i.imgur.com/K9A7LLV.png)
能用到key value都宣告


## pick
![](https://i.imgur.com/zmyAsES.png)
把其他的減幾個過來用

## omit
![](https://i.imgur.com/rxg1Asz.png)
跟pick 相反 把其他的過濾幾個來用
###### tags: `typeScript`