• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

2、你能读得懂的TypeScript教程之基础数据类型

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

今天要讲的的是TypeScript中的基础数据类型。该知识点虽然是TypeScript的基础中的基础,但是你也只有把基础打扎实了,将来在闯荡江湖的时候才能够做到所向披靡,横行于天下!

1、强类型与弱类型

在正式开篇之前,小伙伴们应该先弄清楚两个概念:强类型与弱类型。没错,这两个词都是形容编程语言的,即强类型语言与弱类型语言。

强类型语言,顾名思义,指的是在定义变量时需要强制定义类型的语言!有的地方也把他称为强类型定义语言。再通俗的讲就是你在定义变量的时候必须要先定义完类型以后才能使用!
强类型语言代表:java.NETC++当然还有咱们的TypeScript

需要注意的是,强类型语言当中的变量一旦被定义为某种数据类型后,便不可以轻易将其它类型的值赋予它。因为强类型语言是用情比较专一的!除非你对其进行强制转换,否则它就会永远用情专一下去了。


与强类型语言相对应的是弱类型语言。弱类型指的是数据类型可以被忽略,一个变量允许赋予不同数据类型的值。也就是说你给他什么类型的值,它就是什么类型的变量。
弱类型语言代表:vbphp自然还有你非常熟悉的JavaScript

弱类型语言这货对于开发者而言自然是极方便的,用起来也是超爽的,因为开发者可以将注意力集中在业务的处理以及逻辑的开发上。但是随着时间的推移,你的项目很有可能壮大了,功能也复杂了,那么问题也将一一暴露了!

  • 问题1:由于你在开发过程中对变量类型的检测力度不足,势必会在将来提高数据类型方面出现问题。例如支付的货币单位必须是数值等。
  • 问题2:弱类型语言在内存利用率上是要低于强类型语言的。因为弱类型在运行过程中需要对变量类型进行隐式转换(注:比如你将某类型的值赋值给一个变量,该变量需要经过大脑思考一下,你给它的是一个什么类型的值,思考完毕之后它才会接纳你的值,并给你的值安排位置),在分配内存时,也会考虑多分配一些。而强类型语言则不同,因为人家已经提前将类型确定好了,内存也是量身定做的,所以在内存利用率上要明显高于弱类型语言。

2、TypeScript变量声明

JavaScript声明变量有三种方式:varlet以及const。在这里推荐小伙伴们使用let来代替var
因为TypeScriptJavaScript的超集,所以它本身就支持letconst,同时还有var


TypeScript 变量的命名规则与JS是相同的:

  • 变量名称可以包含数字和字母。
  • 除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格。
  • 变量名不能以数字开头。
  • 建议使用驼峰命名法

TypeScript的变量在使用前需要先声明:

  • 声明变量的类型及初始值:
let [变量名] : [类型] = 值;

例如:

let userName:string = "张培跃";
console.log(userName);// 张培跃
  • 声明变量的类型但没有给予初始值,变量值默认为undefined
let [变量名] : [类型];

例如:

let userName:string;
console.log(userName);// undefined

3、TypeScript的基本类型

  • 布尔类型(boolean)
  • 数字类型(number)
  • 字符串类型(string)
  • 数组类型(array)
  • 元组类型(tuple)
  • 枚举类型(enum)
  • 任意值类型(any)
  • null 与 undefined
  • void 类型
  • never 类型

布尔类型(boolean)

boolean用于最直接的逻辑处理,它只有两种值:对(true)、错(false)

let isShow:boolean = true;
console.log(isShow);// true

这里需要注意的是,因为TypeScript是强类型语言,初始值必须要为指定的类型,否则会提示错误:

let isShow:boolean = "对";// Error

当然,更不允许修改为其它类型,以下会提示错误:

let isShow:boolean = true;
isShow = 34;

数字类型(number)

JavaScript一样,TypeScript里的所有数字都是number类型,在这里不分整数与小数。

let age:number = 18;
let price:number = 12.56;
console.log(age,price);// 18 12.56

字符串类型(string)

JavaScript一样,可以使用双引号(")或单引号(')表示字符串:

let init:string = "同事说,他在写i++的时候总觉的自己写的是我艹";
init = '杀一个程序员不需要用枪,改三次需求就可以了。';

当然你还可以使用字符串模板:

let one:string = "熟悉哪种语言?";
let two:string = "TypeScript";
let three:string = "你被录取了";
let num:number = 9000;
let str:string = `
面试官:"${one}"
应聘者:"${two}"
面试官:"${three},薪资:${num+90000}"
`
console.log(str);
/*
打印结果:
面试官:"熟悉哪种语言?"
应聘者:"TypeScript"
面试官:"你被录取了,薪资:99000"
*/

数组类型(array)

在类型后面接上 [],表示数组:

let arr: number[] = [1, 2, 3];

以上示例指定了数组元素必须为number类型,如果指定其它类型,会给予错误提示:

let arr: number[] = [1, 2, 3,"四"];

另外还有一种定义数组的方法即泛型数组,在这儿先不涉及,后面讲泛型的时候再细唠。


元组类型(tuple)

元组类型在JavaScript当中是木有的,但是在其它语言,例如pythonc#当中是有的。所以语言了解多了的话,总能找到一些相通点。
元组类型可以用于表示元素类型不同的数组,但前提是你要知道元素的数量与类型。 如下,我定义了第一个元素为string类型,第二个元素为number类型的元组。

let arr: [string, number] = ["TypeScript",2];

注意相对应值的类型一定要相同,否则会有错误提示:

let arr: [string, number] = [2,"TypeScript"];// Error

任意值类型(any)

any类型就比较厉害了,因为它可以表示任意类型,可见它是多么的没有原则!
当你数据类型不确定时,或者数组当中只知道部分元素的类型时,你就可以使用它了。

let arr:any[] = [1,true,2, "TypeScript"];
let str:any = "你过来啊!";
str = true;

null与undefined

nullundefined在学习JS时应该已经很熟悉了。关于nullundefined类型定义自身的这种行为,本身没有什么意义:

let un: undefined = undefined;
let nu: null = null;

你可以将nullundefined赋值给任意类型的变量,比如string类型:

let str : string = undefined;

void类型

void类型与any类型相反,它表示没有任何类型。声明一个void类型的变量是没有什么意义的,因为它的值只能是undefinednull:

let a: void = undefined;
let b: void = null;

void类型主要用于当函数没有返回值时,将返回的类型定义为void类型。以下代码的意思是fn函数无返回值。

function fn(): void {
    console.log("无,万物之始也!");
}

枚举类型(enum)与 never 类型

在此不做解释,后续会单独来讲……


最后,一定要将代码多敲打几遍!
[公众号回复“电子书”,送你经典前端电子书籍]
—————END—————
喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
(React+TypeScript实战篇)二.ReactHook发布时间:2022-07-18
下一篇:
TypeScript和Nodemon终极设置!发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap