中文网:https://www.tslang.cn/

官网:http://www.typescriptlang.org/

目录:

前言

typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,写 ts 代码必须指定类型。

在typescript中主要给我们提供了以下数据类型:

  • boolean(布尔类型)
  • number(数字类型)
  • string(字符串类型)
  • array(数组类型)
  • tuple(元组类型)
  • enum(枚举类型)
  • any(任意类型)
  • null 和 undefined 类型
  • void 类型
  • never 类型
  • object 对象类型

boolean(布尔类型)

  • ES5 的写法:
  1. var flag = true;
  2. flag = 456;
  • ts 写法:以上的 ES5 写法到了 ts 中就变成了错误的写法,因为将一个 number 类型值赋给了一个 Boolean 的变量。
  1. let flag:boolean = true;
  2. // flag = 123; // 错误
  3. flag = false; //正确

number(数字类型)

  • ES5 的写法:
  1. var num = 123;
  2. num = 456;
  • ts 写法:
  1. let num:number = 123;
  2. // num = '456'; // 错误
  3. num = 456; //正确

string(字符串类型)

  • ES5 的写法:
  1. var str = 'this is ts';
  2. str = 'test';
  • ts 写法:
  1. let str:string = 'this is ts';
  2. str = 'test';

array(数组类型)

  • ES5 的写法:
  1. var arr = ['12', '23'];
  2. arr = [34, 45];
  • ts 写法1:
  1. let arr:string[] = ['12', '23'];
  2. arr = ['45', '56'];
  • ts 写法2:
  1. let arr:Array<number> = [1, 2];
  2. arr = ['45', '56'];

tuple(元组类型):属于数组的一种

  1. let tupleArr:[number, string, boolean] = [12, '34', true];

赋值的类型、位置、个数需要和定义(生明)的类型、位置、个数一致。

enum(枚举类型)

随着计算机的不断普及,程序不仅只用于数值计算,还更广泛地用于处理非数值的数据。

例如:性别、月份、星期几、颜色、单位名、学历、职业等,都不是数值数据。在其它程序设计语言中,一般用一个数值来代表某一状态,这种处理方法不直观,易读性差。

如果能在程序中用自然语言中有相应含义的单词来代表某一状态,则程序就很容易阅读和理解。

也就是说,事先考虑到某一变量可能取的值,尽量用自然语言中含义清楚的单词来表示它的每一个值,

这种方法称为枚举方法,用这种方法定义的类型称枚举类型。

定义:

  1. enum 枚举名 {
  2. 标识符[=整型常数],
  3. 标识符[=整型常数],
  4. ...
  5. 标识符[=整型常数]
  6. };

举例:

  1. enum statusCode {
  2. success,
  3. fail,
  4. pending
  5. };
  6. let res:statusCode = statusCode.success;
  7. console.log(res); // 0,如果标识符没有赋值,它的值就是下标,默认从 0 开始
  1. enum statusCode {
  2. success = 2,
  3. fail,
  4. pending
  5. };
  6. let res1:statusCode = statusCode.success;
  7. console.log(res1) // 2,指定的值
  8. let res3:statusCode = statusCode.fail;
  9. console.log(res1) // 3,若没指定,从指定的往后开始
  1. enum statusCode {
  2. success = 2,
  3. fail = 1,
  4. pending = 3
  5. };
  6. let res1:statusCode = statusCode.success;
  7. console.log(res1) // 2,指定的值
  8. let res3:statusCode = statusCode.fail;
  9. console.log(res1) // 1,指定的值,可随意指定

any(任意类型)

表示可以指定任何类型的值。一般用于声明 dom 节点。

  1. let num:any = 123;
  2. num = 'str';
  3. num = true;
  1. let boxEl:object = document.getElementById('box'); // 错误,dom 节点不是真正的对象
  2. let boxEl:any = document.getElementById('box'); // 正确
  3. boxEl.style.color = 'pink';

null 和 undefined 类型

默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。

一般用于可能为 undefined 或 null 的变量。

  • undefined: 定义没有赋值就是 undefined
  1. let num:number;
  2. console.log(num); // 输出:undefined 报错
  3. let num:undefined;
  4. console.log(num); // 输出:undefined 正确
  1. let num:number | undefined; // | 表示或者
  2. console.log(num); // 正确
  3. num = 123;
  4. console.log(num); // 正确
  • null
  1. let num:null;
  2. num = null;
  • 一个变量可能是 number 类型,可能是 null,可能是 undefined
  1. let num:number | null | undefined;
  2. num = 1234;

void 类型

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

  • ES5 的写法:
  1. function fn () {
  2. console.log('fn');
  3. }
  4. fn();
  • ts 的写法:

无返回值

  1. function fn ():void { // 正确的写法
  2. console.log('fn);
  3. }
  4. fn();
  5. function fn ():undefined { // 错误的写法
  6. console.log('fn);
  7. }
  8. fn();

函数没有返回值的时候,只能为 void,不能为 undefined。

有返回值

  1. function fn ():number {
  2. return 123;
  3. }
  4. console.log(fn());

never 类型

typescript 中的 never 是其他类型 (包括 null 和 undefined)的子类型,可以赋值给任何类型,代表从不会出现的值。但是没有类型是 never 的子类型,这意味着声明 never 的变量只能被 never 类型所赋值。

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

  1. let a:never;
  2. a = 123; // 错误的写法
  3. a = (() => { // 正确的写法
  4. throw new Error('错误');
  5. })()

object 对象类型

  1. let obj:object;
  2. obj = {name: 'Wang', age: 25};

Typescript 学习笔记二:数据类型的更多相关文章

  1. (C/C++学习笔记) 二. 数据类型

    二. 数据类型 ● 数据类型和sizeof关键字(也是一个操作符) ※ 在现代半导体存储器中, 例如在随机存取存储器或闪存中, 位(bit)的两个值可以由存储电容器的两个层级的电荷表示(In mode ...

  2. C语言学习笔记二---数据类型运算符与表达式

    一.C的基本语法单位 1.标识符:有效长度:31(DOS环境下) 2.关键字:main不是 3.分隔符:空格符,制表符,换行符,换页符 4.注释符:a./*.....*/   b.// 二.C的常用输 ...

  3. python学习笔记二 数据类型(基础篇)

    Python基础 对于Python,一切事物都是对象,对象基于类创建         不同类型的类可以创造出字符串,数字,列表这样的对象,比如"koka".24.['北京', '上 ...

  4. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  5. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. Typescript 学习笔记三:函数

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  9. Typescript 学习笔记一:介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

随机推荐

  1. 导出word文档 通过DocX组件

    根据DocX官方描述如下: In the application development process, it uses COM libraries and requires MS Word or ...

  2. centos7 smplayer 安装 安装视频播放器

    # yum -y install http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noar ...

  3. 配置apache虚拟域名(phpStudy2016)

    以前也一个个的配置过apache.php和mysql,现在嫌麻烦,就用的phpStudy. 装好之后,发现127.0.0.1可以访问,但是localhost就不可以访问.大概是因为apache没有配置 ...

  4. c#npoi 报错Cannot get a numeric value from a text cell 的解决

    一般是因为cell里边的值为数字导致,有时变成文本格式还是解决不了这个问题. 下边的代码是c# 改变设置cell类型的方法 是用这个参数 CellType.String Row.GetCell((in ...

  5. AES-GCM算法

    一.简介 http://blog.csdn.net/t0mato_/article/details/53160772

  6. iOS10 UIImageWriteToSavedPhotosAlbum程序奔溃crash解决办法

    Xcode报错: This app has crashed because it attempted to access privacy-sensitive data without a usage ...

  7. dpkg: error: dpkg status database is locked by another process

    First run: lsof /var/lib/dpkg/lock Then make sure that process isn't running: ps cax | grep PID If i ...

  8. flex布局之flex-basis采坑

    场景: 容器设置为display: flex,容器里的子项目部分设置 flex: auto,子项目的宽高自适应正常,但如果再往子项目里嵌套一个(如:div),并设置高度(如:height: 100%) ...

  9. tensorflow nan

    https://github.com/tensorflow/tensorflow/issues/3212 NaNs usually indicate something wrong with your ...

  10. JS判断是否有js、css文件的引入方法

    在页面头部有个 <script type="text/javascript" src="abc.js"></script> <li ...