1.TypeScript 常用類型

1.1原始類型

let age:number = 18
let Nmae: string = 'Shaolong'
let IsFine: boolean = true
let abc: null = null
let efg: undefined = undefined 
let sfun: symbol = symbol() 

完全按照JS中類型的名稱來書寫

1.2數(shù)組類型

//數(shù)組中只能是number類型
let numbers:number[] = [1, 2, 3]
//數(shù)組中既有number又有string
let arr: (number | string)[] = [1, 2, 3, 'a', 'b']

1.3聯(lián)合類型

//數(shù)組中既可以是number又可以是string[]
//兩個或多個類型中間用 | 隔開
let arr1: number | string[] = 1
let arr2: number | string[] = ['a', 'b']

1.4類型別名

type CustomName = (number | string)[]
let arr3: CustomName = ['a', 'b', 1, 2]
let arr4: CustomName = ['a', 'b', 1, 'c']

常用或多次使用的類型定義別名方便下次使用
使用type創(chuàng)建類型別名,CustomName可以是任何合法的變量名

1.5函數(shù)類型

//1.單獨指定參數(shù)、返回值類型
function add(num1: number, num2: number) : number{
    return num1 + num2
}
add(1,2)

const addFun = (num1: number, num2: number) : number =>{
    return num1 + num2
}
addFun(3,2)

//2.同時指定參數(shù)、返回值類型
const addFuna = (num1: number, num2: number) : number = (num1, num2) => {
    return num1 + num2
}
addFuna(6,6)
//(num1: number, num2: number) : number 為指定類型代碼
//通過類似箭頭形式的語法來為函數(shù)添加類型
//只適用于函數(shù)類型

//3.void類型
function getName(name: string): void {
    console.log('MyName is ' + name)
}
getName('Tom')
//函數(shù)沒有返回值時使用void類型

//4.可選參數(shù)(?):可傳可不傳
function IsOptionalParam(param1?: string, param2?: number): void {
    console.log('參數(shù)1:' + param1 + ',參數(shù)2:' + param2)
}
IsOptionalParam() //參數(shù)1:,參數(shù)2:
IsOptionalParam('a') //參數(shù)1:a,參數(shù)2:
IsOptionalParam('a','b') //參數(shù)1:a,參數(shù)2:b
//可選參數(shù)只能出現(xiàn)在參數(shù)列表的最后,可選參數(shù)后面不能再出現(xiàn)必選參數(shù)

1.6 對象類型

//1.單行時用;分開
let person = {
    name: string
    age: number
    //sayHi(): void
    sayHi:()=> void
    greet(name: string): void 
} = {
    name: 'Tom',
    age: 16,
    sayHi() {},
    greet(name) {}
}

//2.可選屬性
function myAxios(config:{url: string, method?: string}) {
    console.log(config)
}
myAxios({url:'baidu.com'})
myAxios({url:'baidu.com', method:'POST'})

//3.interface聲明接口后可多次使用
interface Iperson  {
    name: string
    age: number
    sayHi:()=> void
} 
let person1: Iperson= {
    name: 'Tom',
    age: 16,
    sayHi() {}
}
//interface 與 type 區(qū)別 { 前面需要加 = 
//interface只能為對象類型指定別名,type可以為任意類型定義別名

//interface 繼承
interface point2d { x: number; y: number }
interface point3d { x: number; y: number; z: number}
//===
interface point2d1 { x: number; y: number }
interface point3d1 extends point2d1 { z: number }
let p3: point3d1 = {
    x: 100,
    y: 100,
    z: 100
}
//extends 繼承實現(xiàn)復(fù)用
//point3d1 通過extends擁有了point2d1所有的類型

1.7 元組

let position: [number, number] = [32.11, 36.66]
//明確的知道數(shù)組中包含多少個元素以及索引指定的類型就可使用元組
//上面例子中少一個多一個元素都會報錯

1.8 類型斷言

//當你比ts更加明確的知道元素類型的時候使用類型斷言
//通過類型斷言獲取標簽特有的屬性和方法
//瀏覽器控制臺通過console.dir() 獲取元素標簽類型(a => HTMLAnchorElement)
const aLink = document.getElementById('ID') as HTMLAnchorElement
aLink.href

1.9 字面量類型

//字面量類型一般和聯(lián)合類型配合使用
//表示一組明確的可選值列表
funstion changeDir(direction: 'up' | 'down' | 'left' | 'right') {
    console.log(direction)
}
changeDir('up')
//相比string更加嚴謹、精確

1.10枚舉

enum Direction {
    Up,
    Down,
    Left,
    Right
}
funstion changeDire(direction: Direction) {
    console.log(direction)
}
changeDire(Direction.Up) //0
//枚舉的成員是有值的,默認從0開始自增數(shù)值
enum Direction {
    Up = 2,
    Down = 4,
    Left = 6,
    Right = 10
}
funstion changeDire(direction: Direction) {
    console.log(direction)
}
changeDire(Direction.Up) //2
//也可以給數(shù)字枚舉中的成員設(shè)置初始值
enum Direction {
    Up = 'up',
    Down = 'down',
    Left = 'left',
    Right = 'right'
}
funstion changeDire(direction: Direction) {
    console.log(direction)
}
changeDire(Direction.Up) //up
//字符串枚舉
//枚舉字符串必須要有初始值
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容