前言

这是开始学习Typescript的一些笔记,涉及的都是很基础的知识点。大神们请绕路或者欢迎指点。今天开始第一部分数据类型的学习。

数据类型

Typescript中为了使代码编写更加规范,更加易于维护。增加了类型校验

所谓类型校验:就是定义的变量始终只能是定义时指定的数据类型。也就是说定义变量的时候必须指定类型。当然typescript也支持原生js的写法。

比如:我们将a定义成number类型,如果我们在后面使用a时,将其修改成了string类型。那么会出现报错。

let a:number = 12;
a = 'hello' // 报错 Type '"hello"' is not assignable to type 'number'

Typescript中常见的数据类型如下:

布尔类型(boolean)

let flag:boolean = false;
console.log(flag)
flag = true; flag = false;

在typescript中boolean类型的值只有两个true和false。不同于js中,非0的数值,非空的字符串等都可以表示true。在typscript中将boolean类型的值赋值成1,0等会报错。

let flag:boolean = true;
flag = 1; // 报错:在js中1能够代表true。但是在ts中1表示number类型。因此会出现错误。

数字类型(number)

let num:number = 12;
num = 12.4444;
console.log(num)

字符串类型(string)

let str:string = 'helloworld';
console.log(str)

数组类型(Array)

typescript中定义数组有两种方式:

第一种定义数组的方式:在元素类型后面接上[],表示由此类型元素组成的一个数组

let arr1:number[] = [1,2,3];
console.log(arr1)
let arr2:string[] = ['hello','world'];
console.log(arr2)

第二种定义数组的方式:使用数组泛型,Array<元素类型>:

let arr3:Array<number> = [11,22,33];

元组类型(tuple)

元组类型是数组类型的一种特例。数组类型只允许元素是一种数据类型。而元组类型允许元素是多种数据类型。比如,你可以定义一对值分别为 string和number类型的元组。

let tuple1:[string,number] = ['hello',12]
console.log(tuple1[0])

但是,元组类型和元素必须一一对应。

let tuple2:[string,number] = [20,'world']  // 没有一一对应

枚举类型(enum)

在计算机科学中,我们经常使用数值来表示一种状态。但是对于较多的状态使用数值来表示可能导致易读性差。比如十二生肖如果我们用0,1,2,3,4...11来表示,那么可能根本不知道究竟每一个代表什么。但是如果我们用有含义的单词来表示,那么程序就比较容易理解与阅读。比如看到猪我就知道这个生肖是猪。枚举就是考虑到所有的可能出现的值,然后用具有函数的单词来表示它。

枚举又可以成为一一列举,在计算机计算中,将一个有穷序列集所有可能的值列举出来就称为枚举。比如:星期可以使用Sunday、Monday、Tuesday、Wednesday、Thursday、Friday、Saturday来进行枚举。生肖可以使用龙、蛇、狗等十二种来进行枚举。

enum 枚举名{
标识符=[整型常数],
标识符=[整型常数],
标识符=[整型常数],
}

枚举类型的使用:枚举类型如果没有指定值,那么默认是从0开始。

enum data {
success,
error
}
console.log(data.success) // 0
console.log(data.error) // 1

如果指定了值,那么从指定的值往下递增。

enum data {
pedding,
success = 100,
error
}
console.log(data.pedding) // 0
console.log(data.success) // 100
console.log(data.error) //101

任意类型(any)

在typescript中定义变量时通常需要指定类型,但是有时候我们可能不知道这个变量会是什么类型(比如这个变量是用来接收后段发送过来的数据,这个数据类型可能不太确定。)。这时候我们就可以指定any类型。表示可以是任意类型。

let anyVar:any;
anyVar = 123;
console.log(anyVar)
anyVar = [1,2,3];
console.log(anyVar)

另外,当我们只知道一部分数据的类型时,any类型也是有用的。 比如,你有一个数组,它包含了不同的类型的数据:我们可以指定数组中元素类型为any。这样的话我们就可以随意地修改数组中的元素了。

let list:any[] = [1,'hello',false];
list[1] = true; // 将数组第二个元素从string类型修改为boolean
console.log(list[1])

Null 和 Undefined

null和undefined是其他数据类型的子类型。

我们知道在js中定义了变量但是赋值,那么得到的就是undefined。比如:

let u ;
console.log(u) // undefined

但是在ts中,如果我们定义了一个变量,没有进行赋值。如果我们使用它会出现报错。比如:

let u:number;
console.log(u) // Variable 'u' is used before being assigned

但是很多情况下,我们定义了一个变量没有进行赋值,在后续我们需要根据这个变量是否有值来进行判断。但是这种情况下就会报错。因此:我们希望能够

在没有获取值的情况下不会报错,这时候就可以使用undefined了。

let u2:number|undefined;
console.log(u2)
u2 = 123;
console.log(u2)

同理Null类型也是为了处理值为null时的情况。

void类型

void类型表示没有任何类型,一般用于定义方法的时候,方法没有返回值。

function warnUser(): void {
console.log("This is my warning message");
}

never类型

never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。

let a:never;
a = (() => {throw new Error('抛出异常')})()

如果变量有确定的类型,那么使用never类型就会报错。比如:

定义变量n为never类型。但是将n赋值为number类型了,那么就会报错。

let n1:never;
n1 = 123;

Object类型

object类型表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型。

declare function create(o: object | null): void;

object类型的值与js中相同。数组,函数,null等都可以是Object类型。

create({ prop: 0 }); // OK
create(null); // OK
create([1,2,3]); // OK
create(function(){}) // OK
create(42); // 报错
create("string"); // 报错
create(false); // 报错

说明

以前学习一些新的知识的时候,学过了如果没有频繁地使用,过一段时间就很容易忘记。因此希望使用博客园和github记录学习过程中的一些笔记,这样的话,下次再捡起来就比较快了。而且每一次地记录其实都是对知识点的一次总结,这样可以加深对知识点的理解和记忆,当然学习过程中,尤其是初学者肯定存在不正确的地方,欢迎大家指正。github中保存了学习过程中的代码,欢迎star和issue。

github

Typescript基础(1)——数据类型的更多相关文章

  1. TypeScript基础数据类型

    Typescript与Javascript 二者的区别 作为前端开发的基础语言javascript已经深入人心,人人皆知.作为变成入门的最简单语言,Javascript语言以动态.弱类型语言而著名,学 ...

  2. TypeScript之基本数据类型

    前言 最近项目很急,所以没有什么时间回答关于Xamarin.Android方面的问题,也有一段时间没有更新.主要是手头很缺人,如果有谁有兴趣加入我们的话,可以私聊我,这样我就能继续造福社区了,同时还有 ...

  3. TypeScript基础以及在Vue中的应用

    TypeScript推出已经很长时间了,在Angular项目中开发比较普遍,随着Vue 3.0的即将推出,TypeScript在Vue项目中使用也即将成为很大的趋势,笔者也是最近才开始研究如何在Vue ...

  4. C#基础--之数据类型

    C#基础--之数据类型 摘自:http://www.cnblogs.com/tonney/archive/2011/03/18/1987577.html 在第一章我们了解了C#的输入.输出语句后,我这 ...

  5. page74-泛型可迭代的基础集合数据类型的API-Bag+Queue+Stack

    [泛型可迭代的基础集合数据类型的API] 背包:就是一种不支持从中删除元素的集合数据类型——它的目的就是帮助用例收集元素并迭代遍历所有收集到的元素.(用例也可以检查背包是否为空, 或者获取背包中元素的 ...

  6. JavaScript基础:数据类型的中的那些少见多怪

    原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...

  7. Python基础之数据类型

    Python基础之数据类型 变量赋值 Python中的变量不需要声明,变量的赋值操作既是变量声明和定义的过程. 每个变量在内存中创建,都包括变量的标识,名称和数据这些信息. 每个变量在使用前都必须赋值 ...

  8. java基础(数据类型,运算符)

    java基础之数据类型(变量) java中存在的数据有常量和变量 常量:在程序执行的过程中其值不可以发生改变 常量的分类 字面值常量 字面值常量的分类 常量 描述 字符串常量 用双引号括起来的内容 整 ...

  9. js基础--javaScript数据类型你都弄明白了吗?绝对干货

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...

随机推荐

  1. Spring常用注解式开发

    1.组件注册@Configuration.@Bean给容器中注册组件. 注解,@Configuration告诉Spring这是一个配置类,相当于bean.xml配置文件. 注解,@Bean给Sprin ...

  2. [转]Outlook 2016 will not display Web linked images

    本文转自:https://community.spiceworks.com/topic/1952626-outlook-2016-will-not-display-web-linked-images ...

  3. UITableView HeaderView,FooterView 使用SnapKit布局导致约束异常

    今天做一个APP里面设置页面(个人中心) 就是一个列表菜单 顶部是一个头像和账户标题, 底部为一个退出登录按钮 当然我第一时间就想到了UITableView, HeaderView, FooterVi ...

  4. MySQL 优化 (四)

    参数优化 innodb_log_buffer_size 此参数确定些日志文件所用的内存大小,以M为单位.缓冲区更大能提高性能,对于较大的事务,可以增大缓存大小. innodb_log_buffer_s ...

  5. Java基础之IO技术(一)

    ---恢复内容开始--- Java基础中的IO技术可谓是非常重要,俗话说的好,万丈高楼起于垒土之间.所以学习Java一定要把基础学好,今天我们来学习IO技术的基础. IO无非就是输入与输出,而其中处理 ...

  6. 201871010102-常龙龙《面向对象程序设计(java)》第一周学习总结

    博文正文开头:(3分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/p/11435127.html 这个作业的要求在哪里 https://e ...

  7. 201871010132-张潇潇《面向对象程序设计(java)》第一周学习总结

    面向对象程序设计(Java) 博文正文开头 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cn ...

  8. acwing 47. 二叉树中和为某一值的路径

    地址 https://www.acwing.com/problem/content/description/45/ 输入一棵二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径. 从树的根结 ...

  9. matlab练习程序(读取列不一致的数据)

    通常情况我们使用matlab载入数据时,使用load或importdata函数基本就能满足需求. 不过如果数据列是不一致的,又不想读数据的时候每一行去遍历,那么可以使用textscan这个函数. 比如 ...

  10. nacos 的服务注册与发现

    nacos的服务注册于发现. 这个要求服务统一注册到注册中心,然后调用的时候就不需要通过ip来调用,直接通过服务名即可. 服务提供者 pom.xml配置,需要spring-cloud-starter- ...