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 相关文章推荐
JS控制日期显示的小例子
Nov 23 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
Vue组件开发初探
Feb 14 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
vue input标签通用指令校验的实现
Nov 05 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
收集的PHP中与数组相关的函数
2007/03/22 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php三元运算符知识汇总
2015/07/02 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
Python实现excel转sqlite的方法
2017/07/17 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python Django路径配置实现过程解析
2020/11/05 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
企业授权委托书范本
2014/09/22 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL