Typescript中的类型

编程入门 行业动态 更新时间:2024-10-24 20:15:03

Typescript中的<a href=https://www.elefans.com/category/jswz/34/1771355.html style=类型"/>

Typescript中的类型

Ts在类型上做了一些约束,以防止我们程序当中使用到不该使用的类型,下面我们来介绍这中约束

  1. 对变量的约束                                                                                                                           我们知道js对变量没有任何类型约束,也就是说js对变量没有类型,这导致可能获取到我们不想要的值在ts中我们可以对变量进行约束

Ts可以设置以下的类型:

 

变量类型设置为字面值,后面对这个变量进行赋值的时候只能够使用该字面值,若不赋值将会是undefine 

//默认设置变量类型,此处a是String类型
let a="lll";
let b=hh(a);
console.log(b);
//通过字面值来设置变量的类型,类似于常量
let c:10;
console.log(c);
//它的作用可以是
let v: "man" | "false";  //表示v既可以赋值"man"又可以赋值"false"
v="man";
v="false";
//|不仅可以作用于字面量也可以作用于类型
//通过|(或)组合起来的类型我们称之为;联合类型
let f: number | boolean;
f=0;
f=true;
//=========================
//将变量的类型设置为any,相当于对该变量关闭了ts类型检查
//在ts中不建议这么写,这么写了与原本的js没有任何区别,也不建议进行隐式any类型
//也就是声明变量没有加类型也没有进行初始化
let g:any;
g=10;
g="jjkk";
//===============
//使用unknown与any一样表示未知类型
let t:unknown;
t=10;
t="kk";
t=true;
console.log(typeof t);  //输出boolean
//unknown与any的区别在于
//any类型的变量可以赋值给一个非any类型的变量,这样做及其不安全
//而unknow就不可以这样,所以未知类型,我们一般使用unknow
let s:string;
s=g;
// s=t;  报错
//但如果我们想要将known赋给一个指定类型的变量
//我们有如下几种方法//1.在赋值的之前添加一个判断条件
if(typeof t=="string"){s=t;    //这里将不会报错
}
/*** 这种类型断言的语法格式:* known类型的变量 as 赋值变量的类型*/
//2.使用类型断言
//我们确定这个未知类型与赋值的变量的类型一致的时候可以使用
s=t as string;  //as string表示对程序说明t是string类型的//接下来我们将会去讲解void与never表示没有值
//一般我们使用这俩个来定义函数的返回值的
function jj(){return true  //返回值类型为boolean
}
//可以看到函数默认的返回值是根据返回值的类型来确定的
//如果函数不做返回,则函数的返回值类型就是void
function kk():void{// return 7;       //这里会报错,但是可以返回null或undefine
}
//如果我们有多种返回值类型的时候我们来看看函数的返回值类型
let boolean=false;
function ll(){if(boolean){    //可以看到这个函数的返回值类型是 true | 0return true}else{return 0}
}
//never表示永远也不会返回结果//==============
//对于对象我们一般限制的是它里面包含的属性及其属性类型
/*** 这种语法格式如下:* 变量:{属性1:属性类型,属性2:属性类型}*/
let d:{name:String,age:number};
// d={}  //将会报错,缺少类型
// d={name:"a"}  //将会报错,缺少age的类型
d={name:"a",age:10} //正确写法
//若是我们需要确保对象中有一个name类型为string的变量,其他的不限制
//其中的[bb:string]表示任意变量名,我们知道在js当中变量名是字符串类型的
let a:{name:string,[bb:string]:any}
a={name:"zhang",g:true};
//接下来我们看一下函数类型的结构
//这样的对象我们一般限制的是它的形参类型
// let n:function(params:type)
/*** 这里我们将采用类似于箭头函数的语法格式* let n:(形参:类型,形参:类型...)=>返回值
*/
let n:(a:number,b:number)=>number;
// n(2,3,4)  //将会报错
let i=n(1,2); 
console.log(i);
//接下来我们将来讨论array
//传统的js的数组存储的值没有类型的概念
//所以说js中的数组可以存储任何类型的值,但是这样的存储处理起来会很麻烦
//我们在ts中可以限制数组中存储的数值是一个类型的
// let 变量名 :存储值的数据类型[]
let h:string[];  //该变量的类型是存储String的数组
// h=["jj",10] //会报错
h=["jj","kk"];
let j:Number[];
// j=["h"] //报错
//也可以写成 let 变量名 :Array<类型>
let kl:Array<Number>
// kl=["kk"]  //报错
kl=[1,2,3];//接下来我们来将=讲一下元组
/**元组:元组是固定长度的数组元组的效率比数组好一些元组语法: [类型,类型]
*/
//此处我们讲点题外话:String与string的区别
//String一般是String对象,一般用在函数,
//string我们用在类型上
let lls:[string,string];
// lls=[1]; //报错
// lls=[1,2]  //报错
// lls=[2]; //报错
// lls=["ll"];  //报错
lls=["1","1"];
let kk:[String,Number];
kk=["10",10];

更多推荐

Typescript中的类型

本文发布于:2024-02-12 16:56:29,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1688645.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:类型   Typescript

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!