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 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
在node中如何使用 ES6
Apr 22 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
JavaScript实现简单拖拽效果
Sep 15 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初学者头疼问题总结
2006/10/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
php 文件上传实例代码
2012/04/19 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
基于js中document.cookie全面解析
2017/09/14 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
Django实现跨域的2种方法
2019/07/31 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
会计工作检讨书
2015/02/19 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL