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

今天要讲的的是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 类型

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


最后,一定要将代码多敲打几遍!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 2,707评论 2 9
  • 继上一篇的快速入门之后,开始学习 TypeScript 的基础类型 布尔值 为了让程序有价值,我们需要能够处理最简...
    闪耀堪比星辰阅读 554评论 0 1
  • 关于TypeScript TypeScript是JavaScript的超集,主要提供类型系统和对ES6的支持,由M...
    kim_jin阅读 728评论 0 1
  • 今年过年不回家,家人相邀,同去北京相聚。 一早踏上北京之旅
    查查汪阅读 137评论 0 0
  • 魅族最具性价比的一款手机,中端处理器中的王者,刘海屏不多见!任何一个手机都有着它非常独特的那个卖点,虽然在国内的品...
    娱乐1阅读 134评论 0 0