typescript學習之旅----資料型別及函式、傳參、過載等
阿新 • • 發佈:2018-12-17
typescript中為了使編寫的程式碼更規範,更有利於維護,增加了型別校驗,在typescript中主要給我們提供了以下資料型別
布林型別(boolean)
數字型別(number)
字串型別(string)
陣列型別(array)
元組型別(tuple)
列舉型別(enum)
任意型別(any)
null 和 undefined
void型別
never型別
console.log('ts') var str: string = '你好' var flag: boolean = false; // flag=123 錯誤型別 var num: number = 123 num = 234 // num = 'str'; 錯誤 var str: string = '123' // str = 123 錯誤 // ts中定義陣列有兩種方式 // 陣列中所有資料都為number var arr: number[] = [11, 22, 33] // 第二種 var arr2: Array<number> = [11, 22, 33, 44] // 元組型別(tuple) 屬於陣列的一種 // 給每個位置指定資料型別 let arr3: [number, string] = [11, 'ts'] //3、第三種 var arr4: any[] = ['131214', 22, true]; console.log(arr3); // 列舉型別 /* 列舉型別(enum) 隨著計算機的不斷普及,程式不僅只用於數值計算,還更廣泛地用於處理非數值的資料。 例如:性別、月份、星期幾、顏色、單位名、學歷、職業等,都不是數值資料。 在其它程式設計語言中,一般用一個數值來代表某一狀態,這種處理方法不直觀,易讀性差。 如果能在程式中用自然語言中有相應含義的單詞來代表某一狀態,則程式就很容易閱讀和理解。 也就是說,事先考慮到某一變數可能取的值,儘量用自然語言中含義清楚的單詞來表示它的每一個值, 這種方法稱為列舉方法,用這種方法定義的型別稱列舉型別。 enum 列舉名{ 識別符號[=整型常數], 識別符號[=整型常數], ... 識別符號[=整型常數], } ; */ enum Flag { success = 1, error = 2 } let s: Flag = Flag.success console.log(s) // enum Color {blue,red,'orange'}; // var c:Color=Color.red; // console.log(c); //1 如果識別符號沒有賦值 它的值就是下標 // enum Color { blue, red = 3, 'orange' }; // var c: Color = Color.red; // console.log(c); //3 // var c: Color = Color.orange; // console.log(c); //4 enum Err { 'undefined' = -1, 'null' = -2, 'success' = 1 }; var e: Err = Err.success; console.log(e); // 任意型別(any) // var num: any = 123; // num = 'str'; // num = true; // console.log(num) var oBox: any = document.getElementById('box'); oBox.style.color = 'red'; // null 和 undefined 其他(never型別)資料型別的子型別 // var num:number; // console.log(num) //輸出:undefined 報錯 // var num:undefined; // console.log(num) //輸出:undefined //正確 //一個元素可能是 number型別 可能是null 可能是undefined var num2: number | null | undefined; num2 = 1234; console.log(num2) // void型別 typescript中的void表示沒有任何型別,一般用於定義方法的時候方法沒有返回值。 //表示方法沒有返回任何型別 //正確寫法 function rua(): void { console.log('run') } rua(); // never型別:是其他型別 (包括 null 和 undefined)的子型別,代表從不會出現的值。這意味著宣告never的變數只能被never型別所賦值。 var a: never; // a=123; //錯誤的寫法 a = (() => { throw new Error('錯誤'); })() // 函式的定義 function run(): string { return 'run' } run(); // 匿名函式 var fun2 = function (): number { return 123 } // ts中定義方法傳參 function getInfo(name: string, age: number): string { return `${name}---${age}` } getInfo('ts', 1) // 匿名函式 var getInfos = function (name: string, age: number): string { return `${name}---${age}` } // 沒有返回值的方法yong void function run2(): void { console.log('ts') } run2() // 方法選引數 // es5裡面方法的實參和行參可以不一樣,但是ts中必須一樣,如果不一樣就需要配置可選引數 // 加個?表示可選 //注意:可選引數必須配置到引數的最後面 function getInfo3(name: string, age?: number): string { if (age) { return `${name} --- ${age}`; } else { return `${name} ---年齡保密`; } } alert(getInfo3('1')) alert(getInfo3('1', 123)) // 預設引數 // es5裡面沒法設定預設引數,es6和ts中都可以設定預設引數 function getInfo4(name: string, age: number = 20): string { if (age) { return `${name} --- ${age}`; } else { return `${name} ---年齡保密`; } } // alert( getInfo4('張三')); alert(getInfo4('張三', 30)); // 剩餘引數 function sum(a: number, b: number, c: number, d: number): number { return a + b + c + d; } alert(sum(1, 2, 3, 4)); //三點運算子 接受新參傳過來的值 function sum2(...result: number[]): number { var sum = 0; for (var i = 0; i < result.length; i++) { sum += result[i]; } return sum; } alert(sum2(1, 2, 3, 4, 5, 6)); // 另一種寫法 先賦值a function sum3(a: number, b: number, ...result: number[]): number { var sum = a + b; for (var i = 0; i < result.length; i++) { sum += result[i]; } return sum; } alert(sum3(1, 2, 3, 4, 5, 6)); // 3.5、ts函式過載 // java中方法的過載:過載指的是兩個或者兩個以上同名函式,但它們的引數不一樣,這時會出現函式過載的情況。 // typescript中的過載:通過為同一個函式提供多個函式型別定義來試下多種功能的目的。 // ts為了相容es5 以及 es6 過載的寫法和java中有區別。 //es5中出現同名方法,下面的會替換上面的方法 /* function css(config){ } function css(config,value){ } */ //ts中的過載 function getIn(name: string): string; function getIn(age: number): string; function getIn(str: any): any { if (typeof str === 'string') { return '我叫:' + str; } else { return '我的年齡是' + str; } } alert(getIn('張三')); //正確 alert(getIn(20)); //正確 // alert(getInfo(true)); //錯誤寫法 ,沒有布林值的判斷 function getName(name: string): string; function getName(name: string, age: number): string; function getName(name: any, age?: any): any { if (age) { return '我叫:' + name + '我的年齡是' + age; } else { return '我叫:' + name; } } alert(getName('zh')); /*正確*/ // alert(getName(123)); 錯誤 alert(getName('zh', 20));