前言

这是开始学习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. 前端之JavaScript基础及使用方法

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  2. 【HTML】---常用标签(1)

    Html常用标签(1) 重新整理学习下前端知识从Html标签开始.我们先看HTML 骨架格式: <!DOCTYPE html> <!--这句话就是告诉我们使用哪个html版本--&g ...

  3. Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限

    场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  4. 利用Azure虚拟机安装Dynamics 365 Customer Engagement之八:安装报表扩展及最新更新

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  5. OSI参考模型总结

    OSI(Open System Interconnect),即开放式系统互联. 一般都叫OSI参考模型,是ISO(国际标准化组织)组织在1985年研究的网络互连模型.下面我们将一层一层的看OSI协议. ...

  6. cookies和sessions组件

    目录 cookie与session cookie介绍 session介绍 token django操作cookie 设置cookie 获取cookie 删除cookie 基于cookie实现的登录认证 ...

  7. Android程序中,内嵌ELF可执行文件-- Android开发C语言混合编程总结

    前言 都知道的,Android基于Linux系统,然后覆盖了一层由Java虚拟机为核心的壳系统.跟一般常见的Linux+Java系统不同的,是其中有对硬件驱动进行支持,以避开GPL开源协议限制的HAL ...

  8. 洛谷 P5638 光骓者的荣耀

    洛谷 P5638 [CSGRound2]光骓者的荣耀 洛谷传送门 题目背景 小 K 又在做白日梦了.他进入到他的幻想中,发现他打下了一片江山. 题目描述 小 K 打下的江山一共有nn个城市,城市ii和 ...

  9. SQL查询--关于查询的练习题

    下面的练习题出自LeetCode:https://leetcode-cn.com/problemset/database/,有兴趣的可以去上面刷刷题 练习题1:超过经理收入的员工  分析: 使用sql ...

  10. Paper | Deep Mutual Learning

    目录 1. 动机详述和方法简介 2. 相关工作 3. 方法 3.1 Formulation 3.2 实现 3.3 弱监督学习 4. 实验 4.1 基本实验 4.2 深入实验 [算法和公式很simple ...