TypeScript的类型系统

TypeScript 提供了 JavaScript 所有功能,以及在这些功能上的附加层:TypeScript 的类型系统。

1. 原始类型

JavaScript 原始类型很好地体现在 TypeScript 类型系统中。即 stringnumber 和 boolean,如下所示:

var num: number;
var str: string;
var bool: boolean;num = 123;
num = 123.456;
num = '123'; // Errorstr = '123';
str = 123; // Errorbool = true;
bool = false;
bool = 'false'; // Error

2. 数组

TypeScript 为数组提供了专用的类型语法来使你更简单地注解和编档你的代码。语法是后置 [] 于任意有效的类型注解上(例如 :boolean[])。这允许你安全地做任何你通常会做的数组操作,以及从像是赋值一个成员以错误的类型的错误中保护你。如下所示:

var boolArray: boolean[];boolArray = [true, false];
console.log(boolArray[0]); // true
console.log(boolArray.length); // 2
boolArray[1] = true;
boolArray = [false, false];boolArray[0] = 'false'; // Error!
boolArray = 'false'; // Error!
boolArray = [true, 'false']; // Error!

3. 接口

接口在 TypeScript 中是核心的方法去组合多个类型注解到一个单独的命名注解上。考虑下面的例子:

interface Name {first: string;second: string;
}var name: Name;
name = {first: 'John',second: 'Doe'
};name = {           // Error : `second` is missingfirst: 'John'
};
name = {           // Error : `second` is the wrong typefirst: 'John',second: 1337
};

这里我们组合了注解 first: string + second: string 到一个新的注解 Name 上,以强制类型检查单独的成员。

4. 行内类型注解

取创建一个新的 interface 而代之,你可以在行内使用 :{ /*Structure*/ } 标注任何东西。行内的类型用于快速提供一次性类型标注。之前的例子用行内的方法重写:

var name: {first: string;second: string;
};
name = {first: 'John',second: 'Doe'
};name = {           // Error : `second` is missingfirst: 'John'
};
name = {           // Error : `second` is the wrong typefirst: 'John',second: 1337
};

5. 特殊类型

除了之前提到的原始类型以外,还有一些类型在 TypeScript 里有着特殊意义。它们分别是 anynullundefined 和 void

5.1 any

any 类型在 TypeScript 类型系统中保持一个特殊地位。它给了你一个逃离类型系统告诉编译器出现 bug 的方式。any 兼容类型系统中的任意所有类型。这意味着任何东西可以赋值给它而它可以赋值给任何东西。例子如下所示:

var power: any;// 获取任意所有类型
power = '123';
power = 123;// 兼容所有类型
var num: number;
power = num;
num = power;

5.2 null 和 undefined

null 和 undefined JavaScript 关键字会被类型系统简单地看作与类型 any 一样。这些关键字能被赋值到任意其他类型。例子如下所示:

var num: number;
var str: string;// 这些关键字能被赋值到任何东西
num = null;
str = undefined;

5.3 :void

使用 :void 来标识函数不会有任何返回值。

function log(message): void {console.log(message);
}

6. 泛型

计算机科学中很多算法和数据结构不依赖于对象的实际类型。然而你仍然想要在不同的变量中制定约束。一个简单的玩具例子是,一个获取一个列表然后返回一个反向列表的函数。这里的约束在于被传入函数的东西和函数返回的东西之间:

function reverse<T>(items: T[]): T[] {var toreturn = [];for (let i = items.length - 1; i >= 0; i--) {toreturn.push(items[i]);}return toreturn;
}var sample = [1, 2, 3];
var reversed = reverse(sample);
console.log(reversed); // 3,2,1// 安全!
reversed[0] = '1';     // Error!
reversed = ['1', '2']; // Error!reversed[0] = 1;       // Okay
reversed = [1, 2];     // Okay

这里基本上就是说函数 reverse 拿了一个数组(items: T[]),它是某个类型 T 的(注意 reverse<T> 里的类型参数),并且返回了一个类型为 T(注意 : T[])的数组。因为 reverse 函数返回了跟它拿到的同样类型的东西,TypeScript 知道 reversed 变量同样也是类型 number[] 并且会给予它类型安全。同样地如果你传一个 string[] 的数组给 reverse 函数,返回的结果同样也是一个 string[] 的数组,并且你得到了同样的类型安全,如下所示:

var strArr = ['1', '2'];
var reversedStrs = reverse(strArr);reversedStrs = [1, 2]; // Error!

实际上 JavaScript 数组已经有一个 .reverse 函数,TypeScript 的确使用了泛型来定义它的结构:

interface Array<T> {reverse(): T[];// ...
}

这意味着你在调用 .reverse 于任何数组时都能得到类型安全,如下所示:

var numArr = [1, 2];
var reversedNums = numArr.reverse();reversedNums = ['1', '2']; // Error!

7. 并类型

在 JavaScript 中很普遍的状况是,你想要允许一个属性是多个类型如string 或者 number中的一个。在这里并类型(在类型注解中用 | 标记,例如 string|number)就派上用场了。一个普遍的用例是,能够拿一个单独的对象或者一个对象数组的函数,例如:

function formatCommandline(command: string[]|string) {var line = '';if (typeof command === 'string') {line = command.trim();} else {line = command.join(' ').trim();}// 用 line:string 做些事
}

8. 交类型

extend 是一种 JavaScript 中的常见模式,用于你拿到两个对象,然后创建一个新的同时拥有这两个对象特性的对象。交类型允许你以安全的方式去使用这个模式,如下所示:

function extend<T, U>(first: T, second: U): T & U {let result = <T & U> {};for (let id in first) {result[id] = first[id];}for (let id in second) {if (!result.hasOwnProperty(id)) {result[id] = second[id];}}return result;
}var x = extend({ a: "hello" }, { b: 42 });// x 现在同时有 `a` 和 `b`
var a = x.a;
var b = x.b;

9. 元组类型

JavaScript 没有一等元组支持。人们通常使用数组当作元组。这正是 TypeScript 类型系统所支持的。元组可以使用 :[typeofmember1, typeofmember2] 等来标注。一个元祖可以有任意数量的成员。元组的示例如下:

var nameNumber: [string, number];// Okay
nameNumber = ['Jenny', 8675309];// Error!
nameNumber = ['Jenny', '867-5309'];

将这与 TypeScript 中的解构支持合并起来,元组看起来就是一等的了,尽管底层是使用数组实现的。

var nameNumber: [string, number];
nameNumber = ['Jenny', 8675309];var [name, num] = nameNumber;

10. 类型别名

TypeScript 提供了方便的语法来为你将会不只一次使用的类型注解提供名字。别名是使用 type SomeName = someValidTypeAnnotation 语法创建的。例子如下所示:

type StrOrNum = string|number;// 使用方法:就像其他类型那样
var sample: StrOrNum;
sample = 123;
sample = '123';// 检查
sample = true; // Error!

不像 interface,你可以给一个类型以字面意义上的任何类型注解(对于像是并和交类型的东西特别有用)。这里是一些例子使你更熟悉它的语法:

type Text = string | { text: string };
type Coordinates = [number, number];
type Callback = (data: string) => void;

提示:如果你需要有深层的类型注解,使用 interface。为简单的对象结构(例如 Coordinates)使用类型别名只是为了给他们一个语义的名字。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/740181.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简述类与对象

一、两者关系 类是Java语言中最重要的数据类型&#xff0c;用于创建具体实例&#xff08;对象&#xff09; 抽象出一类事物共有的属性和行为&#xff0c;即数据以及数据上的操作 类是对现实事物的模拟&#xff0c;包含属性&#xff08;成员变量&#xff09;和行为&#xff0…

详解开关电源

开关电源 基本概念 开关电源&#xff08;Switched-Mode Power Supply&#xff0c;简称SMPS&#xff09;是一种高效的电源转换设备。它通过快速开关电子元件&#xff08;如晶体管&#xff09;来控制和稳定输出电压。开关电源与传统的线性电源相比&#xff0c;具有更高的效率和…

Vue3全家桶 - Vue3 - 【1】前置准备和介绍(VsCode插件 + 组合式API和选项式API的比较)

一、前言 Vue2.7是当前、同时也是最后一个 Vue2.x 的次级版本更新。Vue2.7 会以其发布日期&#xff0c;即2022年7月1日开始计算&#xff0c;提供18个月的长期技术支持。在此期间&#xff0c;Vue2将会提供必要的bug修复和安全修复。但不再提供新特性。Vue2的终止支持时间是2023…

【C语言步行梯】自定义函数、函数递归详谈

&#x1f3af;每日努力一点点&#xff0c;技术进步看得见 &#x1f3e0;专栏介绍&#xff1a;【C语言步行梯】专栏用于介绍C语言相关内容&#xff0c;每篇文章将通过图片代码片段网络相关题目的方式编写&#xff0c;欢迎订阅~~ 文章目录 什么是函数库函数自定义函数函数执行示例…

Python docx学习笔记

个人学习笔记。 1 工具介绍 python-docx 是用于创建可修改 微软 Word 的一个 python 库&#xff0c;提供全套的 Word 操作&#xff0c;是最常用的 Word 工具。 1.1 基本概念 Document&#xff1a;是一个 Word 文档 对象&#xff0c;不同于 VBA 中 Worksheet 的概念&#xf…

李彦宏最新发声,“程序员”职业将不复存在!

文章目录 “程序员”职业不存在周鸿祎的看法我怎么看 昨天&#xff0c;百度一则新闻冲上了微博和知乎热搜。 “程序员”职业不存在 关于李彦宏的这个观点&#xff0c;瞬间激起热烈讨论。有赞同的、有直接开喷的&#xff0c;也有看热闹不嫌事大的。还有网友将这个问题抛给你百度…

嵌入式系统工程师错题总结

笔者来介绍一下嵌入式系统工程师考试的一些易错题目 题目介绍  流水线指令计算公式&#xff1a;一条指令总时间max&#xff08;单个指令执行时间&#xff09;*&#xff08;指令数-1&#xff09;  平均故障间隔时间  ICMP协议&#xff1a;传送通信问题相关的消息。 …

力扣每日练习3.12

151. 反转字符串中的单词 1.1 题目大意 描述&#xff1a;给定一个字符串 s。 要求&#xff1a;反转字符串中所有单词的顺序。 说明&#xff1a; 单词&#xff1a;由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的单词分隔开。 输入字符串 s中可能会存在前导空格、尾…

【网络】数据在同网段和跨网段通信流程

情景一&#xff1a;同一广播域内&#xff0c;两台主机通信过程&#xff1a; 当NO要和N1通信时&#xff0c;假如N0知道N1的IP但却不知道它的MAC地址&#xff0c;那NO就会发送一个ARP的广播请求<1>&#xff08;里面源IP是NO 目标IP是N1 源MAC是N0 目标MAC是12个F&#xff0…

VUE中常用的4种高级方法

1. provide/inject provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术&#xff0c;它可以将数据注入到一个组件中&#xff0c;然后让它的所有子孙组件都可以访问到这个数据。通常情况下&#xff0c;我们在父组件中使用 provide 来提供数据&#xff0c;然后在子孙组…

Learn OpenGL 08 颜色+基础光照+材质+光照贴图

我们在现实生活中看到某一物体的颜色并不是这个物体真正拥有的颜色&#xff0c;而是它所反射的(Reflected)颜色。物体的颜色为物体从一个光源反射各个颜色分量的大小。 创建光照场景 首先需要创建一个光源&#xff0c;因为我们以及有一个立方体数据&#xff0c;我们只需要进行…

LEETCODE3

法一:记忆化递归 int climbStairsRecursive(int n, int* memo) {if (n < 2) {return n;}if (memo[n] > 0) {return memo[n];}memo[n] climbStairsRecursive(n - 1, memo) climbStairsRecursive(n - 2, memo);return memo[n]; }int climbStairs(int n) {int* memo (in…

代码随想录训练营Day21:● 530.二叉搜索树的最小绝对差 ● 501.二叉搜索树中的众数 ● 236. 二叉树的最近公共祖先

530.二叉搜索树的最小绝对差 题目链接 https://leetcode.cn/problems/minimum-absolute-difference-in-bst/description/ 题目描述 思路 遇到在二叉搜索树上求什么最值&#xff0c;求差值之类的&#xff0c;都要思考一下二叉搜索树可是有序的&#xff0c;要利用好这一特点。…

【More Effective C++】条款24:了解虚函数的成本

每个包含了虚函数的class会包含一个虚函数表&#xff0c;对于C1和C2的虚函数表的结构如下&#xff1a; 非虚函数不会加入到虚函数表中子类中如果对虚函数重写&#xff0c;虚函数表中会覆盖父类的虚函数 C1::~C1()C1::~f1()C1::~f2()C1::~f3() C2::~C2()C2::~f1()C1::~f2()C1:…

Java 拦截器Interceptor详解

1、拦截器概念 先看一下web请求的流程。 &#xff08;1&#xff09;、当浏览器发送一个请求时&#xff0c;请求到达tomcat容器&#xff0c;tomcat容器会区分静态还是动态资源。 &#xff08;2&#xff09;、动态请求会先经过过滤器链filter&#xff0c;直到全部过滤完成之后&am…

MySQL 事务的原理以及长事务的预防和处置

transaction_isolation 隔离级别 读未提交 读提交 视图是在每个 SQL 语句开始执行的时候创建的 可重复读 视图是在事务启动时创建的&#xff0c;整个事务存在期间都用这个视图 串行化…

Claude3系统解读与使用测评

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

Character类中的方法总结

Character.isDigit(char ch): 检查指定的字符是否是一个数字。 Character.isWhitespace(char ch): 检查指定的字符是否是一个空白字符。空白字符包括空格、制表符、换页符等。 Character.isUpperCase(char ch): 检查指定的字符是否是大写字母。 Character.isLowerCase(char ch)…

3/12/24交换排序、插入排序、选择排序、归并排序

目录 交换排序 冒泡排序 快速排序 插入排序 直接插入排序 选择排序 简单选择排序 堆排序 归并排序 各种排序的时间复杂度、空间复杂度、稳定性和复杂度 快排真题2016 选排真题2022 排序算法分为交换类排序、插入类排序、选择类排序、归并类排序。 交换排序 交换排…

2024基于协同过滤算法springboot微信订餐小程序项目

项目介绍 基于springboot开发的订餐小程序,用户在微信小程序里面进行注册登录,点餐,收藏,评论等,管理员在后台网页端进行对菜品,分类,订单,用户,角色,评论等进行管理,小程序界面通过协同过滤算法给用户推荐菜品 技术栈 后端:springboot+JPA+Mysql8+redis+maven+…