/*
1、vscode配置自動編譯
1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js",
2、第二步 任務 - 運行任務 監視tsconfig.json
2、typeScript中的數據類型
typescript中為了使編寫的代碼更規范,更有利於維護,增加了類型校驗,在typescript中主要給我們提供了以下數據類型
布爾類型(boolean)
數字類型(number)
字符串類型(string)
數組類型(array)
元組類型(tuple)
枚舉類型(enum)
任意類型(any)
null 和 undefined
void類型
never類型
3、typeScript中的函數
3.1、函數的定義
3.2、可選參數
3.3、默認參數
3.4、剩余參數
3.5、函數重載
3.6、箭頭函數 es6
*/
// 3.1、函數的定義
//es5定義函數的方法
/*
//函數聲明法
function run(){
return 'run';
}
//匿名函數
var run2=function(){
return 'run2';
}
*/
//ts中定義函數的方法
//函數聲明法
// function run():string{
// return 'run';
// }
//錯誤寫法
// function run():string{
// return 123;
// }
//匿名函數
// var fun2=function():number{
// return 123;
// }
// alert(fun2()); /*調用方法*/
//ts中定義方法傳參
/*
function getInfo(name:string,age:number):string{
return `${name} --- ${age}`;
}
alert(getInfo('zhangsan',20));
*/
// var getInfo=function(name:string,age:number):string{
// return `${name} --- ${age}`;
// }
// alert(getInfo('zhangsan',40));
//沒有返回值的方法
// function run():void{
// console.log('run')
// }
// run();
// 3.2、方法可選參數
// es5里面方法的實參和行參可以不一樣,但是ts中必須一樣,如果不一樣就需要配置可選參數
/*
function getInfo(name:string,age?:number):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年齡保密`;
}
}
alert(getInfo('zhangsan'))
alert(getInfo('zhangsan',123))
*/
//注意:可選參數必須配置到參數的最后面
//錯誤寫法
/*
function getInfo(name?:string,age:number):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年齡保密`;
}
}
alert(getInfo('zhangsan'))
*/
// 3.3、默認參數 可選參數
// es5里面沒法設置默認參數,es6和ts中都可以設置默認參數
/*
function getInfo(name:string,age:number=20):string{
if(age){
return `${name} --- ${age}`;
}else{
return `${name} ---年齡保密`;
}
}
// alert( getInfo('張三'));
alert( getInfo('張三',30));
*/
// 3.4、剩余參數
// function sum(a:number,b:number,c:number,d:number):number{
// return a+b+c+d;
// }
// alert(sum(1,2,3,4)) ;
//三點運算符 接受新參傳過來的值
/*
function sum(...result:number[]):number{
var sum=0;
for(var i=0;i<result.length;i++){
sum+=result[i];
}
return sum;
}
alert(sum(1,2,3,4,5,6)) ;
*/
/*
function sum(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(sum(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 getInfo(name:string):string;
// function getInfo(age:number):string;
// function getInfo(str:any):any{
// if(typeof str==='string'){
// return '我叫:'+str;
// }else{
// return '我的年齡是'+str;
// }
// }
// alert(getInfo('張三')); //正確
// alert(getInfo(20)); //正確
// alert(getInfo(true)); //錯誤寫法
function getInfo(name:string):string;
function getInfo(name:string,age:number):string;
function getInfo(name:any,age?:any):any{
if(age){
return '我叫:'+name+'我的年齡是'+age;
}else{
return '我叫:'+name;
}
}
// alert(getInfo('zhangsan')); /*正確*/
// alert(getInfo(123)); 錯誤
// alert(getInfo('zhangsan',20));
// 3.6、箭頭函數 es6
//this指向的問題 箭頭函數里面的this指向上下文
// setTimeout(function(){
// alert('run')
// },1000)
setTimeout(()=>{
alert('run')
},1000)