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控制iFrame(实例代码)
Nov 19 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
Angular单元测试之事件触发的实现
Jan 20 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的魔术常量__METHOD__简介
2014/07/08 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
Python实现简单状态框架的方法
2015/03/19 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
企业演讲比赛主持词
2014/03/18 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
培根随笔读书笔记
2015/07/01 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
员工安全责任协议书
2016/03/22 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
讲解MySQL增删改操作
2022/05/06 MySQL