TS+vue3系统学习day02

简介: ts的基本数据类型和js的一样,语法上在变量后面加了type类型,Number类型支持八进制和二进制。其他的和js一样。下面我们来敲敲代码。

一.ts的基本数据类型

ts的基本数据类型和js的一样,语法上在变量后面加了type类型,Number类型支持八进制和二进制。其他的和js一样。下面我们来敲敲代码。


// 基本数据类型语法 Number类型
    // let 变量名:格式 = 值; 比如let a:Number = 10;
    // Number类型
    let a1:number = 10;
    let a2:number = 0b1010 // 二进制
    let a3:number = 0o12; // 八进制
    let a4:number = 0xa // 十六进制
    console.log(a1); //10
    console.log(a2); //10
    console.log(a3); //10
    console.log(a4); //10
    // 字符串类型 模板字符串也是可以用的
    let str1:string = "张杰";
    let str2:string = "我";
    let str3:string = "爱";
    let str4:string = "你";
    console.log(`${str1}${str2}${str3}${str4}`); //张杰我爱你
    // 字符串和数字的拼接
    let str:string = "小呆瓜"
    let a:number = 2;
    console.log(str+a); // 小呆瓜2
    // 布尔类型
    let aFlag:boolean = true;
    console.log(aFlag); // true
    // ts需要注意的点
    // 声明的时候用的数据类型和你赋值时这个值的数据类型要保持一致,否则就会报错
    // 比如let str:string="大宝贝";str = 10(不允许);
    // undefined和null类型
    let u:undefined=undefined;
    let n:null = null;
    console.log(u,n); // undefined null
    // undefined 和 null可以作为其他类型的子类型,意思就是可以赋值给其他类型
    // 比如
    a1 = null;
    str1 = undefined;
    console.log(a1,str1); // null undefined

二.ts的数组和元组

 ts的数组有三种定义方式,元组是其中的一种定义方式,看代码帮助理解。


    // 数组类型:
    // 数组定义方式1:let 变量名:数据类型[]=[值1,值2,值3]
    // 注意:值1,值2,值3必须符合定义的数据类型
    let arr1:number[]=[1,2,3];
    // 数组定义方式2:let 变量名:Array<数据类型>=[值1,值2,值3]; 泛型的写法
    let arr2:Array<string>=["小甜甜","zhangjie"];
    // 元组类型
    // 变量名:[数据类型1,数据类型2,数据类型3]=[值1,值2,值3];
    // 注意:定义的数据类型和位置与元素的数据类型及位置一一对应
    let arr3:[number,string,boolean]=[100,'zhangjie',true];


三.ts的枚举类型

 ts的枚举类型是对js基本类型的补充,如果一些变量常用且固定,可以使用枚举类型,枚举里面的每个值可以称为元素,每个元素默认从0开始为编号,依次递增加一。(可以手动赋值)枚举中的元素可以是汉字,但不推荐。


    // ts的枚举类型
    // 对js基本类型的补充,如果一些变量常用且固定,可以使用枚举类型
    // 枚举里面的每个值可以称为元素,每个元素默认从0开始为编号,依次递增加一
    enum Color{
        red,
        green,
        blue,
    }
    console.log(Color.red,Color.green,Color.blue); // 0 1 2
    console.log(Color[0],Color[1],Color[2]); // red green blue
    // 枚举中的元素可以是汉字,但不推荐
    enum Ae{
        男=100,
        女=1000
    }
    console.log(Ae.女,Ae.男); // 1000 100


四.any类型和void类型

any类型大家都懂,ts的any类型就是js,它可以包容所有数据类型,但是它编译的时候也不会报错,跟js一样。当我们不知道这个值是什么类型并且我们想保存这个变量我们就会用any来定义变量。相信很多初学者跟我一样,刚开始写vue3项目时用的any挺多的。


void类型是当函数没有返回值时我们会用到void类型,他的值就是undefined


    function strMsg():void{
        // return "a"; // 报错
        "a";    
    }
    console.log(strMsg()); // undefined


五.Object类型

ts的object类型和js的一样


    function getObj(obj:object){
        console.log(obj);   
    }
    getObj({name:"张杰",age:18});


六.基础类型之联合类型和类型断言

联合类型也是属于ts的基本数据类型,一般用于函数中,可以允许传入多种类型的形参


    // 联合类型:一个变量可以有多种数据类型
    function shoe(str:number|string):string{
        return str.toString();
    }
    console.log(shoe("123")); // 字符串123
    console.log(shoe(123)); // 字符串123


类型断言:我自己知道我在干神魔,请相信我,OK?在编译阶段起作用,告诉编译器我是谁,我在那,你别哔哔,看代码演示哈哈

语法 <数据类型>值    (值 as 数据类型)


    // 联合类型:一个变量可以有多种数据类型
    function shoe(str:number|string):number{
        if((<string>str).length){
            // return str.length; // 报错 因为编译器不知道这个形参到底是什么类型
             return (str as string).length;
        }else{
             return str.toString().length;
        }
    }
    console.log(shoe("1234")); // 4
    console.log(shoe(123)); // 3


类型推断:编译器会根据你第一次初始化的值预测出数据类型,如果只声明未赋值,那么你的数据类型就是any类型。

相关文章
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
148 64
|
2月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
118 60
|
14天前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
49 3
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
48 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
34 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
41 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
32 1
vue学习第7章(循环)
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
41 8
|
2月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
35 1
|
2月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
45 1