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

相关文章
|
6天前
|
JSON JavaScript 前端开发
在Vue3项目中,Vite起到的作用及其可以做的事情
Vite是Vue 3项目的关键快速开发服务器和高效的热模块替换(HMR)。它的亮点包括:使用ES模块实现快速启动和动态加载,模块级别HMR提升开发效率,Rollup打包优化生产构建。此外,Vite还支持插件系统、自定义配置、静态资源处理和现代JS特性。通过`npm create vite`可快速搭建Vue项目,配置文件`vite.config.js`可定制行为,`.env`文件管理环境变量。Vite优化了开发与构建流程,提高开发者效率并保证构建性能。
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
23 6
|
2天前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
20 0
|
2天前
|
存储 JavaScript API
vite+vue3+ts从0到1搭建企业级项目(3)
vite+vue3+ts从0到1搭建企业级项目
16 0
|
2天前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
13 1
|
2天前
|
资源调度 JavaScript 测试技术
vite+vue3+ts从0到1搭建企业级项目(1)
vite+vue3+ts从0到1搭建企业级项目
32 0
|
2天前
|
JavaScript 前端开发 API
什么是响应式❓Vue2/Vue3中响应式的原理
什么是响应式❓Vue2/Vue3中响应式的原理
14 2
|
2天前
|
JavaScript 前端开发 编译器
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
跨越时代的框架对决:深度剖析Vue 2与Vue 3核心差异
11 0
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的乡村养老服务管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的乡村养老服务管理系统附带文章源码部署视频讲解等
20 5
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的线上学习资源智能推荐系统附带文章源码部署视频讲解等
17 5