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

Posted 2022-01-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 Colorred,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 宝宝们不要着急呀