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类型。

相关文章
|
9天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
13天前
|
API
vue3知识点:provide 与 inject
vue3知识点:provide 与 inject
27 4
vue3知识点:provide 与 inject
|
13天前
|
API
vue3知识点:readonly 与 shallowReadonly
vue3知识点:readonly 与 shallowReadonly
23 1
vue3知识点:readonly 与 shallowReadonly
|
6天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
19 7
|
7天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
25 3
|
6天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
24 1
|
6天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
25 1
|
9天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
9天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
12天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
26 5