TypeScript(TS) 入門學習

2021-10-12 17:31:26 字數 3325 閱讀 3465

$ npm

install -g ts-node

# 執行檔案:

$ ts-node index.ts

設定 vscode 自動編譯 ts 檔案

1. 在對應終端執行:tsc --init ,建立 tsconfig.js 檔案

2. 修改 tsconfig.js 檔案,設定編譯後的輸入 js 檔案目錄:"outdor"

:"./js/"

3. 終端設定 vscode 監視任務,之後修改專案中的 ts 會自動生成 js檔案

ts 中的型別註解:是一種為變數新增型別約定的方式

注意:約定了什麼型別,就只能給變數賦什麼型別的值

let tup1:

[string

,number

,boolean]=

['ab',1

,true

]

物件(推薦使用介面來作為物件的型別註解)

// 建立物件

let obj:=}

// or

// 物件的型別註解 (分號可以省略):建立一種契約,約束物件結構

let obj:

// 建立物件

let obj =

}

介面(介面名稱約定以i開頭)

直接在物件後面寫型別註解的壞處:1. **結構不簡潔;2. 無法復用型別註解。

介面:為物件的型別註解命名,並為你的**建立契約約束物件的結構

// 介面定義 

inte***ce

iuser

// 建立物件

let obj: iuser =

}// 函式中使用介面

function

fn(obj: iuser)

let o =

fn(o)

inte***ce

iuser

inte***ce

igril

extends

iuser

型別斷言(手動指定更加具體的型別)

// 不指定,預設返回 element 型別,可以用 as 指定具體型別

let img = document.

queryselector

('#img'

)as htmlimageelement

列舉(js 中沒有列舉型別,ts 中存在)

// 語法: enum 列舉名稱 

enum gender

// 注意:約定列舉名稱以大寫字母開頭,多個成員用,隔開

// 列舉成員是唯讀的

let ***: gender = gender.female // 0

*** = gender.male // 1

// 列舉成員的值預設是從 0 開始自增的數字(數字列舉)

// 初始化列舉成員的值

enum gender

let ***: gender = gender.female // 1

*** = gender.male // 2

// 字串列舉(沒有自增)

enum gender1

let ***1: gender1 = gender1.female // 女

***1 = gender1.male // 男

泛型

// 舉例一

function join<

t>

(a:t

, b:t)

join<

number

>(1

,2)// 舉例二

function join2p>

(a:t

, b:p)

join2<

number

,string

>(1

,'2'

)// 舉例三

function myfun<

t>

(a:t

)myfun<

number

>([

1,2]

)

class

selectgirl

getgirl

(index:

number):

string

}const selectgirl =

newselectgirl([

'小紅'

,'小白'

,'小紫'])

// 使用泛型一

class

selectgirl

<

t>

getgirl

(index:

number):

string

}const selectgirl =

newselectgirl

<

string

>([

'小紅'

,'小白'

,'小紫'])

// 使用泛型二

inte***ce

igril

class

selectgirl

<

textends

igril

>

getgirl

(index:

number):

string

}const selectgirl =

newselectgirl

<

string

>([

,,])

// 泛型的約束 通過 extends 繼承

class

selectgirl

<

textends

number

|string

>

getgirl

(index:

number):

string

}const selectgirl =

newselectgirl

<

string

>([

'小紅'

,'小白'

,'小紫'

])

typescript ts 宣告檔案

在typescript中存在兩種檔案字尾名,一種是.ts,另一種是.d.ts結尾的檔案,我們主要的 都是寫在以.ts檔案結尾的檔案中。而.d.ts結尾的檔案就是宣告檔案。我們都知道,ts 是 js 的超集,ts 是乙個靜態的型別檢查系統,ts 比 js 多的就是型別檢查,而實現型別檢查的關鍵就是 t...

統計學入門

參考學習資料 可汗學院 統計學 課程12 26 樣本均值 sample mean 計算方法 樣本總數求和 樣本個數 總體方差 sum 單個數值 平均值 2 數值個數 sum 樣本數值 樣本平均值 2 樣本個數 問題 會出現因取樣偏差導致的方差偏移 優化方法 sum 樣本數值 樣本平均值 2 樣本個數...

跟我學XSL XSL入門

跟我學xsl xsl入門 上期我們講到用css 層疊樣式表 來格式化xml文件,其效果並不很令人滿意。實際上css用來格式化html標記比較合適些,只是因為它簡單才在上例中採用。xml在更多的時候只是一種資料檔案,怎樣將它變為我們日常所看到的html格式那樣的檔案呢?如果我們將xml檔案比作結構化的...