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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
理解AngularJs指令
2015/12/10 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
js实现聊天对话框
2020/02/08 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
Python的另外几种语言实现
2015/01/29 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
django中的数据库迁移的实现
2020/03/16 Python
python实现逻辑回归的示例
2020/10/09 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
一句话工作感言
2014/03/01 职场文书
计划生育宣传标语
2014/06/21 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2015年项目工作总结
2015/04/29 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
pt-archiver 主键自增
2022/04/26 MySQL
oracle数据库去除重复数据
2022/05/20 Oracle
python实现双向链表原理
2022/05/25 Python