ts的语法规则

ts与js的区别

类型上的区别

ts必须指定数据类型（给人理解将数据类型分成3种）

1.js有的类型

boolean类型、number类型、string类型、array类型、undefined、null

2.ts多出的类型

tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型）

3.特别的类型

void类型（没有任何类型）表示定义方法没有返回值 never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值 这意味着声明never变量只能被never类型所赋值

类型定义：

 `var或let 变量名 类型    值` 
    var      a  :  b  =  c   


// 第一种定义array类型方法
        var arr1:number[] = [1,2,3]
    // 第二种定义array类型方法
        var arr2:Array<number> = [11,22,33] 
// 定义元组类型的方法
    let arr3:[number,string] = [111,'111']
​
// 定义enum枚举类型方法（在程序中用自然语言和计算机状态联系起来，方便理解）
    enum Flag {success=1,error=2}
    let s:Flag = Flag.success
    console.log(s)
​
    enum Color {red,blue,orange}
    let num:Color = Color.red
    console.log(num)
​
// 定义any任意类型方法
    var num1:any = 123
    num1 = true
    var obox:any = document.getElementById('box')
    obox.style.color = 'red'
​
// undefined类型
    var num2:number | undefined
    console.log(num2)
​
// void类型,函数没有返回值
    function run():void{
        console.log('run')
    }
​
    function run1():number{
        return 123
    }
​
// never类型定义方法
    var a:undefined
    a = undefined
​
    var b:null
    b = null
​
    // var c:never
    // c = (()=>{
    //     throw new Error('错误')
    // })()

函数定义

`固定function  函数名          参数                   返回类型               函数体`
     function   a   (name:string,age:number)   :    string   { return `$(name)---$(age)`}


    // es5函数声明
        function run3(){
            return 'run'
        }
        // es5匿名函数
        var run4 = function(){
            return 'run'
        }
    // ts函数声明                 
                                  `ts更为严谨有返回类型`
    function run5():string{
        return 'run'
    }
    // ts匿名函数
    var run6 = function():number{
        return 123
    }
​
    // ts中定义方法传参
    function getInfo(name:string,age:number):string{
        return 'info'+`$(name)---$(age)`
    }
    var getInfo1 = function(name:string,age:number):string{
        return 'info'+`$(name)---$(age)` 
    }
    // 没有返回值的方法
    function getInfo2():void{
        console.log(123)
    }

箭头函数

setTimeout(function(){
        alert('run')         `()=>代替了function()`
    },1000)
    setTimeout(()=>{
        alert('run')
    },1000)

组件调用

setup

组件不用注册，引入即可使用

<script setup lang="ts">
    import user from './user';
    const name =user.name;
</script>