TypeScript入门-基本数据类型


Posted in Javascript onMarch 28, 2017

大致介绍

TypeScript是由C#语言之父Anders Hejlsberg主导开发的一门编程语言,TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程,它相当于是JavaScript的超集

ES5、ES6和TypeScript的关系:

TypeScript入门-基本数据类型

安装

首先需要安装npm,然后在输入

npm install -g typescript

安装完成后,因为TypeScript是以.ts结尾的,要想运行就得把他编译js文件,编译的方法特别简单就是使用tsc命令

tsc hello.ts

通常在项目中ts文件比较多的情况下,我们需要自己配置tsconfig.json文件,以便能更好的编译ts文件,配置tsconfig.json文件不难,这里就不赘述,可以自行百度

基本类型

在TypeScript中有以下基本数据类型

  • 布尔类型(boolean)

  • 数字类型(number)

  • 字符串类型(string)

  • 数组类型(array)

  • 元组类型(tuple)

  • 枚举类型(enum)

  • 任意值类型(any)

  • null和undefined

  • void类型

  • never类型

布尔类型(boolean)

布尔类型是最简单的数据类型,只有true和false两种值

注意:布尔类型是不能赋予其他值的

let flag: boolean = true;
flag = 1; //报错

数字类型(number)

和JavaScript一样,TypeScript数字都是浮点型,也支持二进制、八进制、十进制和十六进制

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

字符串类型(string)

可以用单引号(')和双引号(")来表示字符串类型,除此之外还支持使用模板字符串反引号(`)来定义多行文本和内嵌表达式。使用${ expr }的形式嵌入变量或表达式

let name: string = 'Angular';
let years: string = 7;
let words: string = `今年是 ${ name } 发布 ${ years } 周年`;

数组类型(array)

TypeScript数组的操作类似于JavaScript中数组的操作,TypeScript建议开发者最好只为数组元素赋一种类型的值,定义数组有两种方式

1、在元素类型后面加上[]

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

2、使用数组泛型

let arr: Array<number> = [2,3];

元组类型(tuple)

元组类型用来表示已知数量和类型的数组,各元素的类型不必相同

let x: [string,number];
x = ['Angular',5]; //正确
x = [5,'Angular']; //报错

枚举类型(enum)

枚举是一个可被命名的整型常数的集合,枚举类型为集合成员赋予有意义的名称增强可读性

enum Color {red,green,blue};
let c: Color = Color.blue;
console.log(c); //2

枚举默认下标是0,也可以手动修改

enum Color {red = 2,green = 3,blue = 6};
let c: Color = Color.blue;
console.log(c); //6

任意值类型(any)

任意值是TypeScript针对编程时类型不明确的变量使用的一种数据类型,常用于以下三种类型

1、值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。

let x: any = 1;
x = 'I am a string';
x = false;

2、允许你在编译时可选择地包含或移除类型检查

let x: any = 4;
x.toFixed(); //正确,并不检查是否存在

3、定义储存各种类型数据的数组时

let arrarList: any[] = [1,'qwe',true];

null和undefined

默认情况下null和undefined是所有类型的子类型。 就是说你可以把null和undefined赋值给number类型的变量。

然而,如果启用--strictNullChecks,就可以使得null和undefined只能被赋值给void或本身对应的类型

let x: number;
x = 1;
x = null; //正确

启用 --strictNullChecks
let y: number;
y = 1;
y = null; //错误

void类型

使用void表示没有任何类型,例如一个函数没有返回值,意味着返回void

function hello(): void{
  alert('hello Angular');
}

never类型

never是其他类型(包括null和undefined)的子类型,代表从不会出现的值,这意味着声明为never类型的变量只能被never类型所赋值,在函数中通常表示为抛出异常或无法执行到终止点

let x: never;
let y: number;
//报错
x = 123;
//正确
y = x;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 #Javascript
Vue.js 60分钟快速入门教程
Mar 28 #Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 #Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 #Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 #Javascript
js实现多行文本框统计剩余字数功能
Mar 28 #Javascript
js实现下拉框效果(select)
Mar 28 #Javascript
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
Python lambda函数基本用法实例分析
2018/03/16 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
python TCP包注入方式
2020/05/05 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
Python中bisect的用法及示例详解
2020/07/20 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
python3判断IP地址的方法
2021/03/04 Python
中学生团员自我评价分享
2013/12/07 职场文书
英语教学随笔感言
2014/02/20 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
小学家长学校培训材料
2014/08/24 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP