TypeScript+VUE3之详解TypeScript中简单的数据类型

285 阅读4分钟

类型声明

  • 类型声明

    • 类型声明是TS中非常重要的特点

    • 通过类型声明可以指定TS中变量(形参)的类型

    • 指定类型后,当变量赋值时,TS编译器就会自动检查值是否符合声明类型,如果符合就赋值,不符合就报错

    • 简单的说,类型声明就是给变量设置了类型。使得变量只能存储某种类型的值。

    • 语法:

      类型声明:
          let 变量名:类型;//只声明,未赋值
          let 变量名:类型=值;//声明并赋值    
          function fun(参数:类型,参数:类型):类型{
          }
      

TS中的自动类型判断

  • 什么是自动类型判断?

    • TS拥有自动类型判断机制
    • 当对变量的声明和赋值同时进行时,TS编译器会自动判断变量类型
    • 所以如果你的变量的声明和赋值是同时进行的,可以省略掉类型声明
  • 对应的案例

    • let one:number;//声明未赋值
      one=7;
      let two=8;// 声明一个变量并赋值two='xdclass';//此时会提示报错
      console.log(typeof one);
      console.log(typeof two);
      

TS中字面量声明

1、字面量

字面量:是个客观存在无法改变的值。   
    例如: 1 2 3 4 5 6 true 'hello'

2、字面量声明的

let a:23;
使用字面量声明后a的值,永远是23 相当于常量不能修改
const a=23;
如果修改ts就会提
​

any类型的细节

1、声明any类型

any:表示任意数据类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
let a:any;//显式的any类型声明
a=12;
a=true;
a="xdclass";
​
let b;//隐私的any类型声明,声明如果不指定类型,则TS解析器会自动判断变量的类型为any
b=23;
b=false;
b="xdclass";

2、使用any存在的隐患

使用any声明的变量它不仅影响自己,同时还影响别人

image.png

unknown类型的细节

1、声明unknow类型

unknown:表示未知类型的值;
let b:unknown;
b=123;
b=true;
b='xdclass';
​
let c:unknown;
c='123';
let d:string;
d=c;//此时TS解析器提示是报错的
//虽然 变量中的字面量都是string,但是 d是string类型c是unknown所以不能赋值
//假如我就想让c的值赋值给d,该怎么操作呢?
​
//这个也可以实现 
//我们需要先判断
if(typeof c ==='string'){
    d=c;//这样就可以完成赋值了
}

2、unknown可看成安全的any

TS中的类型断言

类型断言:可以用来告诉TS解析器变量的实际类型

语法规则:

语法:
    变量 as 类型;
    <string> 变量;
利用类型断言来处理上一节的unknown赋值的小问题
let c:string;
let d:unknown;
d="xdclass";
c=d as 'string';
ok解决问题

TS中的函数定义的细节

1、对函数中形参进行类型声明

如何设置函数声明中的形参的类型声明呢?
语法:
    function fun(形参1:number,形参2:number){
        console.log(形参1+形参2);
    }
    //调用
    //传递不是number的实参
    fun('xdclass','net');//TS解析器提示报错,不允许这样做,我们必须按照函数声明的形参类型传递参数
    //正确的参数
    fun(123,456);
    //多参数
    fun(123,4556,55,56);//TS解析器报错
    //少参数
    fun(11);//TS解析器报错

2、函数中返回值类型的声明

第一种情况:不设置返回值类型,但是有返回值
function fun(){
    return true;
}
这个时候TS解析器会根据返回值的类型进行判断,返回值类型是什么函数返回值类型就是什么
let result=fun();
console.log(typeof result);


第二种情况:设置返回值类型为void
void:用来表示空,以函数为例,就表示没有返回值的函数
function fun():void{
    return 'a';//提示报错
    return 123;//提示报错
    return true;//提示报错
    return undefined;//不提示报错
    return null;//不提示报错
    return;//不提示报错
}
​
​
第三种情况:设置返回值类型为 never
never:永远不会返回结果
function fun():never{
    throw new Error("出错了!!");
    //程序报错代码立即结束,立即结束以后就不会有返回值了,这个东西用的相对比较少,了解一下知道一下就行了
}