TypeScript Type Compatibility
TS 允许将一些不同类型的变量相互赋值,虽然某种程度上可能会产生一些不可靠的行为,但增加了语言的灵活性,毕竟它的祖宗 JS 就是靠灵活性起家的,而灵活性已经深入前端的骨髓,有时会不得不做一些妥协。
当一个类型 Y 可以被赋值给另一个类型 X 时,我们就可以说类型 X 兼容类型 Y。
X (目标类型) = Y (源类型)
Primitive type compatibility
原始类型的兼容性主要关注三点:
TS 允许将一些不同类型的变量相互赋值,虽然某种程度上可能会产生一些不可靠的行为,但增加了语言的灵活性,毕竟它的祖宗 JS 就是靠灵活性起家的,而灵活性已经深入前端的骨髓,有时会不得不做一些妥协。
当一个类型 Y 可以被赋值给另一个类型 X 时,我们就可以说类型 X 兼容类型 Y。
X (目标类型) = Y (源类型)
原始类型的兼容性主要关注三点:
泛型即不预先确定的数据类型,具体的类型在使用的时候才能确定。本节将学习ts中的泛型函数。
在软件工程中,开发定义良好且可重用的组件是非常重要的,因为这确保了程序的灵活性和长期可扩展性。使用泛型可以创建可重用的组件,一个组件可以支持多种类型的数据,而用户就可以根据自己的需要的数据类型来使用组件。
概述中泛型的概念比较抽象,为了理解什么是泛型函数,我们可以结合一个例子来说明。
如下例所示,identity函数返回传入的参数,但是这个函数的可重用性很差,只能支持number类型。
function identity(arg: number): number {
return arg;
}
为了支持更多的类型,我们可以将参数设置为联合类型或者any类型。
Interfaces can extend one or more interfaces. This makes writing interfaces flexible and reusable.
interface Person {
name: string;
gender: string;
}
interface Employee extends Person {
department: string;
}
let empObj: Employee = {
name: 'Kimi',
gender: 'male',
department: 'Payment',
};
Interface in TypeScript can be used to define a type and also to implement it in the class. The most scenarios can be summarized as following:
In this section, we mainly focus on the object and array type definition using interface. As function type definition will be introduced in Function: Types section.
Interface likes contract which defines the structure of the object, array, function and also class. However, we need to note that the TypeScript compiler does not convert interface to JavaScript. It uses interface for type checking.
在TypeScript项目中,tsconfig.json文件指定了用来编译这个项目的根文件和编译选项,通过自定义tsconfig.json文件中的配置项,可以达到我们想要的编译结果。
tsc
当我们使用tsc命令对项目进行编译时,编译器会从当前目录开始去查找tsconfig.json文件,逐级向上搜索父目录。
下面我们将通过以下三个方面来讲述tsconfig.json配置:
files、include、excludecompilerOptionsextends、referencesfiles指定一个包含相对或绝对文件路径的列表,列举在files中的所有文件,编译器在编译时都会将它们包含在内。
// tsconfig.json
"files": [
"src/core.ts",
"src/index.ts",
]
当配置文件中的files字段值如上所示时,使用tsc命令编译时,src目录下的core.ts和index.ts文件会被编译为core.js和index.js文件。
有时我们并不想立即执行一个函数,而是等待特定一段时间之后再执行,目前有两种方式可以实现:
setTimeout 将函数的执行推迟到一段时间之后再执行。setInterval 让函数间隔一定时间周期性执行。这两个方法并不存在于 JavaScript 的规范中。但是大多数运行环境都有内置的定时器,而且也提供了这两个方法的实现。目前来讲,所有浏览器,包括 Node.js 都支持这两个方法。
前面四个方法除了定义在 document 对象上,还定义在 Element 上,即在元素节点上也可以调用。
document.querySelector 方法接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。
let el1 = document.querySelector('.myclass');
let el2 = document.querySelector('#myParent > [ng-click]');
Since HTML5 it’s been valid to start an HTML element ID with a number. For example <div id="10">. From an HTML perspective, that’s fine.
JavaScript 和 HTML 之间的交互是通过事件来实现的。事件,就是文档或浏览器窗 口之间发生的一些交互瞬间。可以使用侦听器(或处理程序)来监听事件,以便事情发生时执行相应的代码。
一个完整的事件系统,通常存在以下三个角色:
通俗点讲,事件源对象相当于”当事人“,事件监听函数相当于”监护人“,事件对象相当于”事故详情“。一个事件可以理解为,当事人出了点事,至于什么事情(被打了,还是被抢了)都记录在事故详情里,监护人根据事故详情得做出点反应(回调函数)。
