TypeScript学习记录

TypeScript学习记录

vscode设置自动编译

首先使用tsc --init 生成tsconfig.json配置文件 (可以根据需要修改设置)

终端->运行任务->typescript->tsc:监视

此时就可以实时编译(保存后编译)

数据类型

// String
let str:string='爱你哟，ts'
console.log(str)
// number
let age:number=18
console.log(age)
// boolean
let istrue:boolean=true
console.log(istrue)
// array
let numlist:number[]=[1,2,3]
console.log(numlist)
let numlist2:Array<string>=['1','2','3']
console.log(numlist2)
// touple
let toup:[string,number]=['aaa',12]  // 元素与类型一一对应
console.log(toup)
// Enum  自定义枚举类型，然后给变量赋枚举类型
enum Flag{
   
    success,erro,a=5,b    // 默认从0开始，当有一个元素被赋值，后面的会以赋值往后排
}
let enum1:Flag=Flag.success
let enum2:Flag=Flag.b
console.log(enum1)
console.log(enum2)
// any 类型，相当于任意类型，可以赋值任意值
// 相当于js中的对象
let a:any=0  
console.log(a)
a='哈哈哈'
console.log(a)
//let b:any=document.getElementById('box')
// 当变量赋值为dom元素对象时，只能编译(tsc)，如果要直接运行会报错
// 当变量接收到的是dom元素时，类型是any
// console.log(b)
// undifined    变量定义了未赋值
// 在ts中，当某个变量定义了未赋值会报错
let num22:number|undefined   // 这样就可以
console.log(num22)

// null 空

let null1:null
null1=null    // null类型的变量只能被赋值null
// 当不确定一个变量是否为空，是否未被赋值，是否为指定类型可以给变量指定多种类型

let v1:string|number|undefined|null
// v1可以使字符串，可以是数字也可以不赋值也可以是null
console.log(v1)    // undifined
console.log(typeof(v1))   // undifined
v1='ha'
console.log(v1)          
console.log(typeof(v1))    // string
v1=1
console.log(v1)
console.log(typeof(v1))    // number
v1=1
v1=null
console.log(v1)
console.log(typeof(v1))      // null        

// void    当函数没有返回值时，定义返回值类型时使用
function run2(a:number):void{
         // ES5中可以不定义返回值类型
    console.log(a)
    // return a+1                    // 当有返回值时，会报错
}
// never 其他类型(包括undifined和null)
let abc:never

类和函数

// 函数
function run(){
         // ES5
    return '返回值'
}
/*
var a = function(){   // 匿名函数
    return 
}
*/

// ts函数  可以指定返回值类型
function func1():number{
   
    return 1      // 返回值的类型必须和指定类型一致
}

console.log(func1())

// 当函数有参数时，需要给参数指定类型
function func2(num1:number,str1:string):string{
   
    return `${
     num1} -----${
     str1}`    
}

console.log(func2(10,'aaaaa'))

// ts中如果给形参指定了类型，就必须传
// 方法的可选参数
// 如果实参可传可不传 类型为   ?:类型

function func3(num1:number,str?:string):string{
      // str可传可不传
    if(str){
   
        return `${
     str}----${
     num1}`
    }else{
   
        return `${
     num1}`
    }
}

console.log(func3(10))
console.log(func3(10,'hahahaha'))

// 默认参数    默认参数和可选参数的区别在于，默认参数需要指定默认值，当不传值时取默认参数
// 可选参数是可传可不传   不传时获取不到该参数值

function func4(a:number,b:number=10):number{
   
    return a+b
}

console.log(func4