专栏首页张培跃2、你能读得懂的TypeScript教程之基础数据类型

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

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


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

[公众号回复“电子书”,送你经典前端电子书籍]

—————END—————

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 知识点归纳笔记:JavaScript编码规范你都了解多少?

    驼峰式命名法大家应该都比较熟悉了:驼峰式命名法又被称为骆驼命名法,它是由小(大)写字母开始,后续每个单词首字母都大写。其中首字母大写的命名称为大驼峰命名法(Pa...

    用户1272076
  • 面试官随手写了个解构赋值 ,然后问我这是什么语法?JavaScript中有这玩意?

    解构赋值的语法,在现如今的项目当中已经是烂大街般的存在了。其语法也很简单:等号左边是解构目标,等号右边是解构源。从字面当中,我们也可以轻易推断出,其天生的作用便...

    用户1272076
  • vue前端UI框架,一点都不圆润,盘它!

    VUX(读音 [v’ju:z],同 views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

    用户1272076
  • TypeScript - 类型声明、枚举、函数、接口

    4.自定义类型 当一些复杂类型需要多次使用,可以通过type来自定义类型,便于复用

    WahFung
  • 38.Swift学习之实用知识点

    Swift 中提供了很多实用的知识点,这些知识点极大提高了开发的效率。本章节主要罗列 Swift 中那些好用但未必人人都知道的知识点。

    YungFan
  • 基本类型_TypeScript笔记2

    JavaScript有7种类型:Boolean、Number、String、Undefined、Null、Object,以及ES6新增的Symbol

    ayqy贾杰
  • 写给前端的算法进阶指南,我是如何两个月零基础刷200题

    最近国内大厂面试中,出现 LeetCode 真题考察的频率越来越高了。我也观察到有越来越多的前端同学开始关注算法这个话题。

    前端迷
  • Typescript-基础类型

    Typescript支持与Javascript几乎相同的数据类型,此外还提供使用的枚举类型方便我们使用。

    用户3258338
  • Swift中的if let guard

    之前是搞java,平常判断都是用的if和else进行判断,这样稍微复杂的逻辑就要嵌套好多层

    剑行者
  • 文件拓展名、周几的写法优化

    本文主要是练习如何获取文件拓展名的练习。之前有分享过一个方案,但是早晨有复习字符串语法中有涉及到一个方法交lastIndexOf(),所以想就这个问题应该有个更...

    RobinsonZhang

扫码关注云+社区

领取腾讯云代金券