澤楓の小屋

一、变量声明let和const是JavaScript中变量声明的两个相对较新的概念。正如我们前面提到的，let在某些方面与var相似，但允许用户避免在JavaScript中遇到的一些常见的 “麻烦”。 const是let的一个扩展，它可以防止重新赋值给一个变量。 由于TypeScript是JavaScript的扩展，该语言自然支持let和const。在这里，我们将进一步阐述这些新的声明，以及为什么它们比var更适合。 如果你已经不经意地使用了JavaScript，那么下一节可能是刷新你记忆的一个好方法。如果你对JavaScript中var声明的所有怪癖非常熟悉，你可能会发现跳过前面会更容易。 1.1 var 变量声明在JavaScript中声明一个变量，传统上都是用var关键字来完成。 var a = 10; 正如你可能已经发现的，我们刚刚声明了一个名为a的变量，其值为10。 我们也可以在一个函数中声明一个变量： function f() { var message = "Hello, world!"; return message;} ...

九、模块JavaScript有很长的历史，有不同的方式来处理模块化的代码。TypeScript从2012年开始出现，已经实现了对许多这些格式的支持，但随着时间的推移，社区和JavaScript规范已经趋向于一种名为ES模块（或ES6模块）的格式。你可能知道它是import/export语法。 ES Modules在2015年被加入到JavaScript规范中，到2020年，在大多数网络浏览器和JavaScript运行时中都有广泛的支持。 为了突出重点，本手册将涵盖ES Modules及其流行的前驱CommonJS module.exports =语法。 9.1 如何定义JavaScript模块在TypeScript中，就像在ECMAScript 2015中一样，任何包含顶级import或export的文件都被认为是一个模块。 相反，一个没有任何顶级导入或导出声明的文件被视为一个脚本，其内容可在全局范围内使用（因此也可用于模块）。 模块在自己的范围内执行，而不是在全局范围内。这意味着在模块中声明的变量、函数、类等在模块外是不可见的，除非它们被明确地用某种导出形式导出。相反，要使用从不同模 ...

八、类TypeScript提供了对ES2015中引入的 class 关键词的完全支持。 与其他JavaScript语言功能一样，TypeScript增加了类型注释和其他语法，允许你表达类和其他类型之间的关系。 8.1 类成员这里有一个最基本的类——一个空的类： class Point {} 这个类还不是很有用，所以我们开始添加一些成员。 8.1.1 类属性在一个类上声明字段，创建一个公共的可写属性：A mapped type is a generic type which uses a union of PropertyKeys (frequently created via a keyof) to iterate through keys to create a type: class Point { x: number; y: number;}const pt = new Point();pt.x = 0;pt.y = 0; 与其他位置一样，类型注解是可选的，但如果不指定，将是一个隐含的 any 类型。 字段也可以有初始化器；这些 ...

七、类型操纵7.0 从类型中创建类型TypeScript的类型系统非常强大，因为它允许用其他类型的术语来表达类型。 这个想法的最简单的形式是泛型，我们实际上有各种各样的类型操作符可以使用。也可以用我们已经有的值来表达类型。 通过结合各种类型操作符，我们可以用一种简洁、可维护的方式来表达复杂的操作和值。在本节中，我们将介绍用现有的类型或值来表达一个新类型的方法。 泛型型 - 带参数的类型 Keyof 类型操作符- keyof 操作符创建新类型 Typeof 类型操作符 - 使用 typeof 操作符来创建新的类型` 索引访问类型 - 使用 Type['a'] 语法来访问一个类型的子集 条件类型 - 在类型系统中像if语句一样行事的类型 映射类型 - 通过映射现有类型中的每个属性来创建类型 模板字面量类型 - 通过模板字面字符串改变属性的映射类型 7.1 泛型软件工程的一个主要部分是建立组件，这些组件不仅有定义明确和一致的API，而且还可以重复使用。能够处理今天的数据和明天的数据的组件将为你建立大型软件系统提供最灵活的能力。 在像C#和Java这样 ...

六、对象类型在JavaScript中，我们分组和传递数据的基本方式是通过对象。在TypeScript中，我们通过对象类型来表示这些对象。 正如我们所见，它们可以是匿名的： function greet(person: { name: string; age: number }) { return "Hello " + person.name;} 或者可以通过使用一个接口来命名它们： interface Person { name: string; age: number;}function greet(person: Person) { return "Hello " + person.name;} 或一个类型别名： type Person = { name: string; age: number;};function greet(person: Person) { return "Hello " ...

五、函数更多函数是任何应用程序的基本构件，无论它们是本地函数，从另一个模块导入，还是一个类上的方法。它们也是值，就像其他值一样，TypeScript有很多方法来描述如何调用函数。让我们来学习一下如何编写描述函数的类型。 5.1 函数类型表达式描述一个函数的最简单方法是用一个函数类型表达式。这些类型在语法上类似于箭头函数。 function greeter(fn: (a: string) => void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToConsole); 语法(a: string) => void意味着 “有一个参数的函数，名为 a，类型为字符串，没有返回值”。就像函数声明一样，如果没有指定参数类型，它就隐含为 any 类型。 当然，我们可以用一个类型别名来命名一个函数类型。 type GreetFunction = (a: string) => void; ...

四、类型缩小假设我们有一个名为padLeft的函数： function padLeft(padding: number | string, input: string): string { throw new Error("尚未实现!");} 我们来扩充一下功能：如果padding是 number，它会将其视为我们想要添加到input的空格数；如果padding是 string，它只在input上做padding 。让我们尝试实现： function padLeft(padding: number | string, input: string) { return new Array(padding + 1).join(" ") + input;} 呃-哦，在padding + 1处我们遇到错误。TypeScript 警告我们，运算符 + 不能应用于类型 string | number和 number，这是对的。换句话说，我们没有明确检查 padding是否为 number，也没有处理它是 str ...

三、常用类型在本章中，我们将介绍一些在 JavaScript 代码中最常见的值类型，并解释在 TypeScript 中描述这些类型的相应方法。这不是一个详尽的列表，未来的章节将描述命名和使用其他类型的更多方法。 类型还可以出现在更多的地方，而不仅仅是类型注释。当我们了解类型本身时，我们还将了解可以引用这些类型以形成新结构的地方。 我们将首先回顾你在编写 JavaScript 或 TypeScript 代码时，可能遇到的最基本和最常见的类型，它是形成更复杂类型的核心构建块。 3.0 TypeScript配置文件为了方便学习，我们可以在一个单独的配置文件中保存命令行中的参数，应用 tsc 生成配置文件： 在项目根目录下生成了一个配置文件 tsconfig.json。这里给出我们自己的配置： { "compilerOptions": { /* Language and Environment */ "target": "es6", /* Modules */ "rootDi ...

二、TypeScript入门2.1 发现问题JavaScript 中的每个值都有一组行为，您可以通过运行不同的操作来观察。这听起来很抽象，我们来举一个简单的例子，考虑我们可能对名为message的变量运行的一些操作： // 在 'message' 上访问属性 'toLowerCase'，并调用它message.toLowerCase();// 调用 'message'message(); 如果我们分解它，第一行可运行的代码访问一个属性toLowerCase，然后调用它。第二个尝试 message 直接调用。 但是假设我们不知道message。这很常见——我们无法可靠地说出尝试运行任何这些代码会得到什么结果。每个操作的行为完全取决于我们最初给message的赋值。 可以调用message吗？ 它有toLowerCase这个属性吗？ 如果能，toLowerCase可以调用吗？ 如果这两个值都是可调用的，它们返回什么？ 这些问题的答案通常是我们在编写 JavaScript 时牢记在心的东西，我们必须希望所有细节都正确。 假设m ...

1. 出现的原因CSS hover时出现抖动的原因通常与盒模型和布局有关，可能是由于元素在hover状态下增加了一些样式，导致元素的尺寸或位置发生了变化，从而引发抖动。 2. 解决方式2.1边框的影响/* 如果在hover状态下添加了边框，而没有在非hover状态下考虑到边框的宽度，可能导致抖动。确保在非hover状态下也为元素预留足够的空间。 *//* 不好的例子 */.box { border: 1px solid transparent; transition: border-color 0.3s;}.box:hover { border-color: red;}/* 好的例子 */.box { border: 1px solid transparent; transition: border-color 0.3s; box-sizing: border-box;}.box:hover { border-color: red;} 2.2 宽度和高度的变化/* 如果在hover状态下改 ...