Tscript的基础用法和函数的用法

Posted 2021-06-28 ```飞翔的翅膀```

     Tyepscript安装 编译

一. 安装 Typescript

cnpm install -g typescript

二. 检查是否安装成功

tsc -v

三. Typescript开发工具Vscode自动编译.ts文件

1. 在当前文件夹输入cmd 打开小黑框

2. 输入tsc --init 自动生成tsconfig.json 文件

3. 打开生成的tsconfig.json 文件 outDir 解开改成 ./js

4. 然后在Vcod 里点击终端 然后点击运行任务 点击typescript

5. 然后点击监视就可以了

6. 这样就可以自动转换成js文件了

typescript 中的数据类型

一. typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验

1. 布尔类型（boolean）

2. 数字类型（number）

3. 字符串类型（string）

4. 数组类型（array）

5. 枚举类型（tuple）

6. 任意类型（any)

7. null和undefined

8. void类型

9. never类型

   // 布尔类型(boolean)
   var flag:boolean=true
   flag=false

   // 数字类型
   var a:number=123
   console.log(a);
   a=12.3
   console.log(a);
   // 字符串类型
   let str:string=“this is ts”
   str =“你好”
   console.log(str);
   // 数组类型(array) ts中定义数组有两种方式
   // 第一种方式
   // 1.数组
   let arrau:number[]=[1,2,3,4,787,9898,4]
   console.log(arrau);

   // // 字符串类型的数组
   let arr:string[]=[“1”,“2”,“3”,“45”,“11”]
   console.log(arr);
   // // 第二种方式
   let arr1:Array=[1,2,3,4,5]
   console.log(arr1);
   // // 字符串类型的数组
   let arr2:Array=[“1”,“2”,“3”,“4”,“5”,“6”]
   console.log(arr2);
   // 第三种定义数组的方式
   var arr3:any[]=[“123”,22,true]
   console.log(arr3);

   // 元组类型（tuple）属于数组的一种
   // 数组中的第一个值 对应后边数组中的第一个值是什么类型的以此类推
   let arr:[string,number,boolean]=[“ts”,3.18,true]
   console.log(arr);

   // 枚举类型
   // 他主要用来定义标识符的
   enum Flag {success=1,error=-1}
   var f:Flag=Flag.error
   console.log(f);

   enum Color{red,blue=7,origin}
   var c:Color=Color.origin
   console.log©;

   //任意类型
   var num :any=123
   num=“str”
   num=true
   console.log(num);
   // 任意类型的用处
   var oBox: any = document.getElementById(“box”)
   oBox.style.color = “red”

   // null 和undefined
   var num:undefined
   console.log(num);

   // 定义未赋值 就是undefined
   var num:number|undefined
   num =123
   console.log(num);
   var num:null
   num=null
   console.log(null);
   var num:null|number|undefined
   num=1234
   console.log(num);
   // void类型
   // es5的定义方法
   function run (){
   console.log(“run”);
   }
   run()
   // 如果这个方法里没有任何返回值
   // 表示方法没有任何的返回类型
   function run():void{
   console.log(“run”);
   }
   console.log(“run”);
   // 错误写法
   function run():number{
   console.log(“run”);

   }
   run()
   // 如果方法有返回值
   function run():number {
   return 123
   }
   run()

   // never类型
   var a:undefined
   a=undefined
   var a:never
   a=123 //错误的写法
   a=(()=>{
   throw new Error(“错误”)
   })()

typescript中的函数

// es5中的两种函数定义方式
// 1. 函数声明式
 function run(){
    return "run"
}
run()
//2. 函数表达式
 var run2=function(){
    return "run2"
}
console.log(run2);
// typescript中定义函数的方法
// ts中的函数声明式
function run():string{
    return 'run'
// }
 console.log(run);
 ts中的函数表达式
 var fun2=function ():number{
    return 123
}
alert(fun2())
//  ts中定义方法传参
// // ts中的函数声明式
 function getInfo(name:string,age:number):string{
    return `${name}---${age}`
}
alert(getInfo("张三",20))
// // ts中的函数声明式
 var getInof=function(name:string,age:number){
    return `${name}---${age}`
 }
alert(getInfo("李四",20))
// 没有返回值的方法
 function run():void{
   console.log('run');
}
 run()

// 方法可选参数

// es5里面方法的实参和形参可以不一样 ts中必须一样如果不一样 就需要配置可选参数
// 问号代表参数可以传参也可以不传
function getInfo(name:string,age?:number):string{
    if(age){
       return`${name}---${age}`;
    }else{
       return`${name}---年龄保密`
   }
}
alert(getInfo("张三")) 
// 默认参数
// es5里不可以设置默认参数  es6和ts中可以设置默认参数
// 错误写法
function getInfo(name?:string,age:number):string{
    if(age){
       return`${name}---${age}`;
    }else{
        return`${name}---年龄保密`
   }
}
 alert(getInfo("张三")) 


// 正确的默认参数
function getInfo(name:string,age:number=20):string{
    if(age){
       return`${name}---${age}`;
   }else{
        return`${name}---年龄保密`
    }
 }
 alert(getInfo("张三",30)) 

// 剩余参数
function sum(a:number,b:number,c:number,d:number):number{
    return a+b+c+d
 }
alert(sum(1,2,3,4))
// 三点运算符
 function sum1(...result:number[]):number{
  let sum=0
    for(var i=0;i<result.length;i++){
       sum+=result[i]
    }
    return sum
 }
 alert(sum1(1,2,3,4,5,6))

// 函数的重载

// ts为了兼容es5以及es6重载的写法和java中的区别
// es5中的重载写法
 function css(config){

 }
function css(config,value){

 }

// // ts中的重载
 function getInfo(name:string):string;

 function getInfo(age:number):number

 function getInfo(str:any):any{
  if(typeof str==="string"){
     return "我叫"+str;
 }else{
     return "我的年龄是"+str
  }
}
 alert(getInfo("张三",))
alert(getInfo(20))
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("张山",20))


// 箭头函数  是es6中的
// 箭头函数的this指向的是上下文
//普通函数的写法
 setTimeout (function() {
     alert("你好呀12点30分了")
 },1000);
//箭头函数写法
 setTimeout(()=>{
     alert("我心情很不好,但是我要学习")
},2000)

今天本来想学习vue3.0的 想了一下还是学习一下Ts的一些基础语法在学习vue3.0的话会更好的去理解，所以今天先学习了ts的一些基础 明天更新vue.3.0 宝宝们不要着急呀