TypeScript入门二:基本数据类型

  • 浅析基本数据类型
  • TypeScript类型解析

一、浅析基本数据类型

首先有一个问题TypeScript是一门编译型语言?还是解释性语言?显然已经不能被这两个分类来区分,TypeScript的并不是为了让JavaScript改变执行方式,不是为了提高机器执行效率的。而编译型和解释型的分类是基于这两个特点的。但是,TypeScript具备编译型语言一个特点,就是它对类型进行检查,如果出现类型冲突时它是无法编译成js文件的。

既然TypeScript编译需要对变量进行类型检查,这就意味着TypeScript的变量是有类型的,前面这句话可能会让你很疑惑,难道再TypeScript之前的JavaScript没有类型吗?String、Number、boolean等不是类型吗?

JavaScript的变量本身确实是不存在类型的概念,而仅仅只是变量的值存在类型,变量本身的类型随着值的类型发生改变。而TypeScript的变量是有类型的,并且它的类型不再随着值的类型发生改变,有错误检查的编辑器中出现了变量类型与值类型不一致时会提示错误,这一点是理解TypeScript的关键,非常重要。

TypeScript的基本类型包括:布尔值、数字、字符串、数组、元组、枚举、Any、Void、Null、Undefined、Never、Object。

在进行接下来的内容之前建议了解以下内容

JavaScript的严格模式,相关博客:JavaScript严格模式

JavaScript的类型转换,相关博客:类型和原生函数及类型转换(三:终结js类型转换)

ES6变量声明:ES6入门一:块级作用域(let&const)、spread展开、rest收集

更多关于ES6语法可以了解这里:关于ES6语法与API的全部解析内容

建议阅读TtpeScript的变量声明文档(其简要的解析了ES5与ES6的变量声明相关内容):变量声明官方文档

二、TypeScript类型解析

1.TypeScript基本数据类型:

TypeScript数据类型是用来描述变量本身的,然后用变量本身的类型约束值的类型,当值的类型不匹配变量本身的类型时,IDE就会提示错误。

1.1布尔值、数字、字符串变量的声明方式语法:

let 变量名称 :变量类型 = 值 ;//值的类型必须与变量类型一致,否则提示错误

示例:

1 let isDone: boolean = false;
2 let decLiteral: number = 6;
3 let hexLiteral: number = 0xf00d; //16进制
4 let binaryLiteral: number = 0b1010; //二进制
5 let octalLiteral: number = 0o744; //8进制
6 let name: string = "bob";

定义模板字符串:

1 let name: string = `Gene`;
2 let age: number = 37;
3 //模板字符串使用反引号(`)包裹,使用${expr}嵌入表达式
4 let sentence: string = `Hello, my name is ${ name }.
5 I‘ll be ${ age + 1 } years old next month.`;

1.2数组、元组、枚举

1 //数组
2 let list: number[] = [1,2,3];//list变量是一个数组,只要赋值数组就没问题
3 let numList: Array<number> = [1,2,3];//泛型数组,赋值的数组每个元素类型必须符合指定的泛型类型
4 let strList: Array<string> = ["1","2","3"];//这是一个字符串泛型数组 

泛型数组还有一种简写方式:

let names:string[] = [‘小明‘,‘小红‘];

关于泛型可以了解官方文档:https://www.tslang.cn/docs/handbook/generics.html,后期也会有博客专门来解析TtpeScript泛型。

//元组:声明数组时指定数组的每一个元素类型,并且数组长度不能超出变量声明时指定的元素个数
let arr:[string,number] = [‘1‘,2];

如果在给元组超出定义长度位置的元素赋值会出现错误提示,这个错误操作一般会出现两个(2493,2322):2493提示超出元组范围,2322提示赋值类型非undefined类型,所以如果赋值undefined不会报2322错误。详细可以查看官方错误提示文档:文档/项目配置/错误信息列表

比如下面这样给arr[3]赋一个非undefined值:

arr[3] = 10;

TypeScript中的枚举(enum)非常友好的提供了一个有穷序列集的数据结构,它会默认从0开始给每个元素编号,可以通过元素获取编号,也可以通过编号获取元素名称,然而其内部实现采用的是牺牲空间换时间的方式,比如枚举Color中有一个元素Blue,底层实现方式是{Blue:0,0:‘Blue‘},这就实现了当要查找值对应的元素时只需要Color[0]就能获取,而如果在前的数组或对象中要想获得值对应的元素就只能遍历数组或者对象来实现。

 1 //枚举
 2 enum Color {
 3     Red,
 4     Green,
 5     Blue
 6 }
 7 console.log(Color.Red);//0
 8 //自定义编号或者值:编号只能为数值,元素为字符串
 9 enum Name {
10     xiaoming = 3,
11     xiaohong = 5
12 }
13 console.log(Name[3]);//‘xiaoming‘
14 //枚举同样不能越界,只能在枚举有限集合中查找
15 Color.Yellow = 4; //报错(2339):类型上找不到‘Yellow’该属性

1.3任意类型(any)与无效类型(Void)

1 //any类型:同等与JavaScript的变量,变量的类型取决于值的类型,并且可以任意变化
2 let notSure: any = 4;
3 notSure = "maybe a string instead";
4 notSure = false;

这里可能会疑惑Any这个变量类型有什么用?这不又回到了JavaScript了吗?的确,它可以帮助我们回归到JavaScript变量类型模式,这就意味着我们如果在做项目升级时,在遇到无法确定的变量类型我们就可以使用Any;还有就是第三方库或者用户输入的数据,我们也可能无法确定其类型,这时候就可以解决这类问题。

还有一个很关键的应用就是TypeScript中的数组,前面的Array语法中如果需要一个元素类型不相同的数组我们只能使用元组来实现,但是元组有约束了下标和长度,还是可能无法完成一些特殊的需求,特别是对于习惯JavaScript的宽松的数组模式,Any可以帮助TtypeScript实现同等JavaScript的数组:

let list: any[] = [‘hello‘,100,true];

void类型用处就不大了,它用来表示没有任何类型,其作用就是用来描述没有类型,在一定程度上它同等与undefinde。

1 //void变量值始终为undefined
2 let a: void = undefined;
3 function foo(): void {//用来表示函数不返回任何值
4     // return void ...;以前我们可以这样表示函数不返回任何值
5     // 之前javaScript的写法不会有错误检查,阅读代码时需要查看函数内部代码
6 }

1.4 undefined、null

用来指定变量只能为undefined和null的值,undefined和null变量类型在TypeScript中还有一个含义,它们可以作为任何变量的子集,当然这时在tsconfig.json的"strictNullChecks": false的情况下。

1 let a:undefined = undefined;
2 let b:null = null;
3 let c: number = 10;
4 c = undefined;
5 c = null;
6 // tsconfig.json -- "strictNullChecks": false模式 

1.5 never:用来表示那些永远不存在的值的类型。比如抛出错误,这种情况通常出现在错误检查中。变量也可以是never类型,但是赋值除了自身类型以外的任何变量类型都会提示错误。

 1 interface Test {
 2     imgNumberPerWork: number
 3     displayCover: boolean
 4   }
 5   const test: Test = {
 6     imgNumberPerWork: 0,
 7     displayCover: true
 8   }
 9   function setValue (key: keyof Test, val: any) {
10     test[key] = val //Type ‘any‘ is not assignable to type ‘never‘
11   }
12   setValue(‘imgNumberPerWork‘, 1)

示例中因为Test.imgNumberPerWork是数字类型,但是在setValue()中赋any类型的值。在官方文档中有这样一段描述,never为任何类型的字类,可以赋值给任何类型,但是never除了自身不能赋值任何类型值。

never类型的引用场景主要有:

 1 //1.抛出异常
 2 function error(message: string): never {
 3     throw new Error(message);
 4 }
 5 //死循环
 6 function loop(): never {
 7     while (true){}
 8 }
 9 //never是所有类型的子集,例如作为number的子集:
10 let a: number;
11 y = (() => { throw new Error ‘message‘ })();

1.6 对象(Object) 、对象类型(Type)

关于TypeScript的Object变量声明:

 1 let dataObject = {
 2   name: "xiaoming",
 3   age: 31
 4 }
 5 //错误一
 6 // dataObject = {}
 7 //错误提示:type ‘{}‘ is missing the following properties from type ‘{name:tring;age:number;}‘:name, age ts
 8 //        类型“{}”缺少类型“{name:tring;age:number;}”的以下属性:name, age ts
 9
10 //错误二
11 // dataObject = {
12 //   a: ‘str‘
13 // }
14 // 错误提示:type ‘{a:tring;}‘ is not assignable to type ‘{name:string;age:number}‘
15 // Object literal may only specify known properties, and ‘a‘ does not exist in type ‘{name:tring;age:number}‘
16 // 类型“{a:tring;}”不能分配给类型“{name:string;age:number}”
17 // 对象字段只能指定已知的属性,类型“{name:tring;age:number}”中不存在“a”

这两个错误信息都提到了类型‘{name:string;age:number}‘,这个类型的意思就是dataObject这个变量的类型,这个类型只有name、age两个字段,并且这两个字段分别指定了string、number类型,如果要赋值给dataObject对象值就必须是符合这个类型的。不能擅自添加字段,也不能删除字段,所以下面这样写也是错误的:

1 //错误三:缺少字段
2 //dataObject = {
3 //  name:‘xiaohong‘
4 //}

实际上,TypeScript中Object类型的变量声明的完整方式是下面这样的:

1 //声明TypeScript的Object对象
2 let dataObject:{name:string;age:number} = {
3   name: "xiaoming",
4   age: 31
5 }

复杂类型的声明与type关键字

1 let complex: {datas:number[]; myfunc:(item:number) => number[]} = {
2   datas:[1,2,3],
3   myfunc:function(item:number){
4     this.datas.push(item);
5     return this.datas;
6   }
7 }

如果我们需要声明多个相同结构的类型甚至更复杂的类型,最好的方式是将Object变量类型声明与赋值分离,比如还以上面这个复杂的Object变量类型为例,声明多个相同结构的Object变量:

 1 //通过type关键字定义Object变量类型
 2 type MyObject = {datas:number[]; myfunc:(item:number) => number[]} ;
 3 //声明Object变量类型为MyObject的变量
 4 let complex1 : MyObject = {
 5   datas:[1,2,3],
 6   myfunc:function(item:number){
 7     this.datas.push(item);
 8     return this.datas;
 9   }
10 }
11 let complex2 : MyObject = {
12   datas:[1,2,3,5,6,7,8,9],
13   myfunc:function(item:number){
14     this.datas.unshift(item);
15     return this.datas;
16   }
17 }

1.7 函数类型function

在前面的对象变量类型中已经有了TypeScript函数声明的代码,函数声明关键字还是function,但需要在声明时指定参数和返回值的类型:

1 function add1(x:number,y:number):number{
2   return x+y;
3 }
4
5 let add2 = function(x:number,y:number):number{
6   return x + y;
7 }

函数声明还有一种方式,可以先声明函数类型,在赋值函数:

1 let myAdd : (baseValue: number, increment: number) => number =
2 function(x:number,y:number) : number{
3   return x + y;
4 }

函数类型的参数名称和实际赋值的函数参数名称可以不一致,但类型和参数个数必须一致。关于函数返回值在void(没有任何类型)变量类型的时候就提到过函数不返回值的处理方式,就是将函数的返回值设置为void类型:

1 let hintStamp(str:string):void{
2   console.log(str);
3 }

关于TypeScript中函数类型还有更多内容,这里仅仅是展示了声明的语法,详细关注这篇博客:(待补充)

原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/11762563.html

时间: 2024-11-08 21:48:21

TypeScript入门二:基本数据类型的相关文章

Python入门(二)——IDE选择PyCharm,输入和输出,基础规范,数据类型和变量,常量,字符串和编码,格式化

Python入门(二)--IDE选择PyCharm,输入和输出,基础规范,数据类型和变量,常量,字符串和编码,格式化 我们从今天就开始正式的学习PY交易了,PY交易还行,我们有基础之后学习起来倒不是说那么的被动,我学习的是Python2.7,虽然现在随着版本的迁移至Python3,但是这个并不会对我们造成什么困扰,毕竟只是一个适应阶段 我们的学习资料:廖雪峰官方网站Python2.7教程 一.IDE选择PyCharm 我们虽然在前面一章已经配置过,但是我们还是有很多的IDE可以开发Py,比如su

MongooooooooooooooooooooDB入门二:基本概念介绍

前言 工欲善其事必先利其器.在学习MongoDB之前,需要对MongoDB的一些基本概念有系统的了解. 所以,本篇文章主要介绍MongoDB的一些基本概念,这些概念的定义均来自<MongoDB权威指南>,关于此书想要了解更多,请点击此处. 我尽量使用最简洁的语言来尽可能完整地描述这些基本概念,如有遗漏或不妥之处欢迎指正. 文档 文档是MongoDB的核心概念之一.多个键值对有序地放在一起便是文档.例如: {"name":"Jerry","sco

【第11篇】最全的中文TypeScript入门指南详解案例教程与代码案例

一.最全的中文TypeScript入门指南详解案例教程           文档下载 二.代码案例 源代码下载 手机微信扫一扫有惊喜... ================================================================================================================= 1.详细安装文章请看 http://blog.csdn.net/jilongliang/article/details/219429

Python 3 学习笔记(二)----数据类型

一.初识模块2 标准库: sys模块: 1 import sys 2 3 print(sys.path) #新建文件名不能与导入的模块名相同 4 print(sys.argv) os模块: 1 import os 2 3 cmd_res = os.system("dir")#执行命令,不保存结果 4 cmd_res = os.popen("dir").read() 5 print("-->",cmd_res) 6 7 os.mkdir(&q

C#基础入门 二

C#基础入门 二 循环语句 与C语言中用法相同. continue:结束本次循环(continue)后面的代码不再执行,进入下次循环(通常与if连用). 数组 一维数组定义:int[] intArray; 一维数组初始化:定义后,必须对其初始化才能使用 动态初始化:数据类型[] 数组名=new 数据类型[数组长度]{元素1,元素2...}:动态初始化借助new运算符为数组元素分配内存空间,并赋初值. 不给定初值情况下,各元素取默认值,数值型初始值为0,布尔型为false. 静态初始化:数据类型[

TypeScript入门五:TypeScript的接口

TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的基本使用 1.1定义TypeScript接口的指令(interface) 接口让我们想到的第一个短语就是(API).比如日常我们所说的调用某某程序的API一般都是跨应用的接口,如别的网站的或者APP的接口:还有我们每天都是用的编程语言的指令和内置的方法及属性,这些可以叫做编程语言的接口:还有令我们既

感受typescript定义变量和数据类型的神奇魔力

你的Javascript能力到达瓶颈?那是因为你还不会typescript.掌握TS,让你的开发更加准确简洁.今天的学习中,我们接着从TS的数据类型和变量入手,感受它们的奇妙魔力.一. 变量声明方式1.1. 声明变量的格式 我们已经强调过很多次,在TypeScript中定义变量需要指定 标识符 的类型. 所以完整的声明格式如下: var/let/const 标识符: 数据类型 = 赋值; 比如我们声明一个message,完整的写法如下: 注意:这里的string是小写的,和String是有区别的

[WebGL入门]二十,绘制立体模型(圆环体)

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 立体的模型 这次稍微喘口气,开始绘制立体模型.这里说的[喘口气]是指本次的文章中没有出现任何新的技术知识点.只是利用到现在为止所介绍过的内容,来绘制一个立体的圆环体.到现在为止,只绘制了三角形和四边形,当然,在三维空间中绘制简单的多边形也没什么不对,但是缺点儿说服力.

kafka入门二:Kafka的设计思想、理念

本节主要从整体角度介绍Kafka的设计思想,其中的每个理念都可以深入研究,以后我可能会发专题文章做深入介绍,在这里只做较概括的描述以便大家更好的理解Kafka的独特之处.本节主要涉及到如下主要内容: Kafka设计基本思想 Kafka中的数据压缩 Kafka消息转运过程中的可靠性 Kafka集群镜像复制 Kafka 备份机制 一.kafka由来 由于对JMS日常管理的过度开支和传统JMS可扩展性方面的局限,LinkedIn(www.linkedin.com)开发了Kafka以满足他们对实时数据流