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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
jQuery 性能优化指南(2)
May 21 Javascript
javascript插入样式实现代码
Feb 22 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
重置版宣传动画
2020/04/09 魔兽争霸
php中adodbzip类实例
2014/12/08 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
php实现中文转数字
2016/02/18 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Django实现学生管理系统
2019/02/26 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
python删除某个目录文件夹的方法
2020/05/26 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
安全责任书范文
2014/08/25 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
企业宣传稿范文
2015/07/23 职场文书