TypeScript入门-基本数据类型

大致介绍

TypeScript是由C#语言之父Anders Hejlsberg主导开发的一门编程语言，TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程，它相当于是JavaScript的超集

ES5、ES6和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;

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • TypeScript 中接口详解

    在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念. 先看看一个简单的例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } var myObj = { size: 10, label: "Size 10 Object" }; printLabel

  • 使用TypeScript开发微信小程序的方法

    使用TypeScript开发微信小程序的方法

    TypeScript简介: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.

  • TypeScript Type Innference(类型判断)

    TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销:增加一个完整的类结构,使之更新是传统的面向对象语言. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概

  • 使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

    使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码

    源码下载 源码我已经上传到 CSDN 了,无需资源分,下载地址:http://download.csdn.net/detail/zgynhqf/8565873. 源码使用 VS 2013 +TypeScript 1.4 进行开发.打开后,显示如下图: JsTankGame 1.0:老的使用 JS 编写的坦克游戏. JsTankGame 2.0:新的使用 TS 直接翻译过来的游戏. JsTankGame:在 2.0 的基础上,对类型进行了重构后的新游戏. 重构步骤 由于老的 JS 游戏是采用 MS

  • TypeScript具有的几个不同特质

    今天要讨论的话题是TypeScript.之前在转载过一篇<The Rise of TypeScript?>的文章,今天来谈一下我的感想. 很多朋友应该都了解,TypeScript是微软推出的一个开源语言,用于开发大型JS应用程序.其作者是大名鼎鼎的C#之父Anders Hejlsberg.所以从它发布beta之初,我就持续在关注. 最近发生的一件事情--Angular团队打算使用TypeScript来开发Angular 2版本,促使TJ VanToll提出这样一个疑问(观点).而对于他的这个观

  • TypeScript 学习笔记之基本类型

    在 TypeScript 中一共有 7 种基本类型. 1.boolean 复制代码 代码如下: var isDone: boolean = false; 2.number 代表 JavaScript 中的数字.在 JavaScript 中,无论是"整数"还是"浮点数",都是以双精度浮点类型存储的. 复制代码 代码如下: var height: number = 6; 3.string 代表字符串.跟 JavaScript 一样,可以使用一对双引号(")或一

  • TypeScript学习之强制类型的转换

    前言 使用强类型变量常常需要从一种类型向另一种类型转换,通常使用ToString或ParseInt可以来实现一些简单的转换,但是有时候需要像.NET语言中那样将一种类型显示的转换为另一种类型,在TypeScript规范中,被称为"类型断言",它仍然是类型转换,只是语法是有些不同.下面来详细看看TypeScript的强制类型转换. TypeScript强制类型转换 在 TypeScript 中将一个 number 转换成 string ,这样做会报错: var a:number = 12

  • c#程序员对TypeScript的认识过程

    简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript也是半罐子,本文描述了一个c#程序员认识TypeScript的过程. 注:本文编写是基于Typescript0.8版本,而且初用,可能过时,具体规范可以参考http://www.typescriptlang.org 命名空间和类 作为面向对象的开发人员思维,第一个想到的是TypeScript如何定义

  • TypeScript入门-基本数据类型

    TypeScript入门-基本数据类型

    大致介绍 TypeScript是由C#语言之父Anders Hejlsberg主导开发的一门编程语言,TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程,它相当于是JavaScript的超集 ES5.ES6和TypeScript的关系: 安装 首先需要安装npm,然后在输入 npm install -g typescript 安装完成后,因为TypeScript是以.ts结尾的,要想运行就得把他编译js文件,编译的方法特别简单就是使用tsc命令 ts

  •  typeScript入门基础介绍

     typeScript入门基础介绍

    目录 一.安装 TS 二.Vscode 自动编译 ts 三.入门 TS 基础数据类型 接口 类 TS 的特点: 始于 javaScript 归于 javaScript . 强大的类型系统. 先进的 javaScript . 适合开发大型项目,编译成纯 js 代码,js 可以运行在任何浏览器上. typeScript 是区分大小写的一门语言,本篇文章主要带你了解 ts 的安装,环境配置,以及简单的入门. 一.安装 TS 使用之前需要安装: npm install -g typescript 安装完

  • 前端开发TypeScript入门基础教程

    前端开发TypeScript入门基础教程

    TYPESCRIPT 官网 github TypeScript是一种由微软开发的开源.跨平台的编程语言.它是JavaScript的超集,最终会被编译为JavaScript代码. 可以看看官网的5分钟 TypeScript Tooling in 5 minutes 安装 TypeScript 命令行运行如下命令,全局安装 TypeScript: npm install -g typescript 安装完成后,在控制台运行如下命令,检查安装是否成功: tsc -V 第一个ts程序 新建文件 test

  • TypeScript类型系统自定义数据类型教程示例

    目录 TypeScript 类型系统和自定义数据类型 什么是类型系统 函数类型 类型别名 可选参数 默认参数 函数重载 接口类型 可选属性 只读属性 接口扩展 多重接口声明 接口的索引签名 用接口描述函数 类类型 implements关键字 类的静态端类型和实例端类型 将 this 作为类型 将 this 作为参数 枚举 枚举类型 枚举的成员类型 枚举的成员 字面量类型 联合类型 交叉类型 泛型 泛型函数 泛型接口 泛型类 在工厂函数中使用泛型 泛型约束 在泛型约束中使用类型参数 在泛型中使用条

  • Typescript中的数据类型实例总结

    目录 是什么 有哪些 boolean number string array tuple enum any null和undefined void never object 总结 是什么 typescript和javascript几乎一样,拥有相同的数据类型,另外在javascript基础上提供了更加实用的类型供开发使用. 在开发阶段,可以为明确的变量定义为某种类型,这样typescript就能在编译阶段进行类型检查,当类型不符合预期结果的时候则会出现错误提示 有哪些 typescript的数据

  • TypeScript入门-接口

    大致介绍 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 接口 例子: function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label); } let myObj = { size: 10, label: "Size 10 Object" }; printLabel(myObj); printLabel函数有一个参数,要求这个参数是个对象,并

  • 一篇文章带你入门Java数据类型

    一篇文章带你入门Java数据类型

    目录 引言 两个基本概念 说明 数据类型分类 基本数据类型 引用数据类型 两者的区别 总结 引言 ♀ 小AD:明哥,昨天气死我了,明哥要帮我出气. ♂ 明世隐:咋了,有谁惹到你了. ♀ 小AD:昨天辅助喷我小鲁班菜,我反手就对喷,然后竟然丢脸了! ♂ 明世隐:这个我是不信的,论喷的功力,你貌似不在明哥之下,没那么容易就败北的. ♀ 小AD:明明就丢脸了吗 ♂ 明世隐:你这一喷20年的功力,这些小学生顶得住? ♀ 小AD:哼..那我不说了! ♂ 明世隐:好了好了,说说看. ♀ 小AD:是小学生喷不

  • TypeScript 安装使用及基本数据类型

    TypeScript 安装使用及基本数据类型

    第一步 全局安装TypeScript 使用 npm 安装 npm install -g typescript 使用cnpm 安装 cnpm install -g typescript 使用yarn安装 yarn global add typescript 第二步 初始化TypeScript 在vscode里面 终端 >> 运行生成任务 >> tsc:监视tsconfig.json 接下来就可以开始我们的typescript旅程了~ TypeScript 的 基本数据类型 // 布尔

  • vue项目中使用ts（typescript）入门教程

    目录 1.引入Typescript 2.配置文件webpack配置 3.让项目识别.ts 4.vue组件的编写 data()中定义数据 props传值 完整代码案例 最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入Typescript npm install vue-class-component vue-property-decorator --

  • typescript在vue中的入门案例代码demo

    目录 搜索框searchBox.vue 首页Home.vue 热门城市 popularCity.vue 天气 weather.vue getWeather.ts 使用技术栈vue2+typescript+scss入门练手项目,天气预报demo,需要的朋友可以参考下.整体的实现思路比较简单,页面也只有一个,包含三部分,搜索框.热门城市和天气预报,组件库用的是ElementUI. 搜索框searchBox.vue <template> <div id="search"&g

随机推荐