中文网: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 的写法:
var flag = true;
flag = 456;
  • ts 写法:以上的 ES5 写法到了 ts 中就变成了错误的写法,因为将一个 number 类型值赋给了一个 Boolean 的变量。
let flag:boolean = true;
// flag = 123; // 错误
flag = false; //正确

number(数字类型)

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

string(字符串类型)

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

array(数组类型)

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

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

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

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

enum(枚举类型)

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

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

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

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

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

定义:

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

举例:

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

any(任意类型)

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

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

null 和 undefined 类型

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

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

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

void 类型

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

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

无返回值

function fn ():void { // 正确的写法
console.log('fn);
}
fn(); function fn ():undefined { // 错误的写法
console.log('fn);
}
fn();

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

有返回值

function fn ():number {
return 123;
}
console.log(fn());

never 类型

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

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

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

object 对象类型

let obj:object;
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. html5移动端查找

    用form包裹住input,修改input的类型为seach,然后给input绑定seach事件,当输入状态是输入键盘上会出现搜索,点击搜索就可以查找了 <form action="& ...

  2. BlockTrain网络

    [BlockTrain网络] 1.每个节点都参与全⽹络的路由功能,同时也可能包含其他功能.每个节点都参与验证并传播交易及区块信息,发现并维持与对等节点的连接.在图6-1所⽰的全节点⽤例中,名为“⽹络路 ...

  3. Selenium WebDriver 对Cookie进行处理绕过登录验证码

    首先需要手动登录一次你的测试网站,去Chrome的F12中获取这个网站的cookie信息,找到对应的保存登录信息的cookie,接下来在代码中将上述的cookie信息通过webdriver写入的自动化 ...

  4. Python设计模式 - UML - 类图(Class Diagram)

    简介 类图是面向对象分析和设计的核心,用来描述系统各个模块中类与类之间.接口与接口之间.类与接口之间的关系,以及每个类的属性.操作等特性,一般在详细设计过程中实施. 类图本身就是现实世界的抽象,是对系 ...

  5. dede织梦动态页面通过手机模板实现wap浏览

    https://jingyan.baidu.com/article/a948d6517be0eb0a2dcd2ebc.html

  6. Metasploit用法大全

    Metasploit用户接口msfconsoleArmitage:  KaliGUI启动:armitage命令启动 Metasploit功能程序msfvenom集成了载荷生成器.载荷编码器.空指令生成 ...

  7. mysql之my.cnf详解

    以下是 my.cnf 配置文件参数解释: #*** client options 相关选项 ***# #以下选项会被MySQL客户端应用读取.注意只有MySQL附带的客户端应用程序保证可以读取这段内容 ...

  8. GitHub下载子目录

    背景 整个Github目录太大,国内网速不好,且其他部分也不需要. 方法 把 /tree/master 改成 trunk. svn checkout https://github.com/lodash ...

  9. Django自动获取项目中的全部URL

    import re from collections import OrderedDict from django.conf import settings from django.utils.mod ...

  10. node.js中使用 http-proxy 创建代理服务器

    代理,也称网络代理,是一种特殊网络服务,允许一个终端通过代理服务与另一个终端进行非直接的连接,这样利于安全和防止被攻击. 代理服务器,就是代理网络用户去获取网络信息,就是信息的中转,负责转发. 代理又 ...