1. 程式人生 > >typescript學習之旅----資料型別及函式、傳參、過載等

typescript學習之旅----資料型別及函式、傳參、過載等

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));