澤楓の小屋

四、類型縮小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 に適用できないことを ...

三、よく使われるタイプこの章では、JavaScriptコードで最も一般的な値の型をいくつか紹介し、これらの型をTypeScriptで説明するための適切な方法について説明します。これは詳細なリストではありませんが、今後の章では、他の種類の名前を付けて使用するためのより多くの方法について説明します。 タイプは、タイプコメントだけでなく、他の地方、にも表示されます。型自体を理解すると、新しい構造を形成するためにそれらの型を参照できる場所についても理解していきます。 最初に、JavaScriptまたはTypeScriptコードを書くときに遭遇するであろう最も基本的で一般的な型を見てみましょう。これは、より複雑な型を形成するコア構成要素です。 3.0 TypeScript設定ファイル学習を容易にするために、コマンドラインの引数を別の構成ファイルに保存し、 tsc を適用して構成ファイルを生成します： 構成ファイル tsconfig.json がプロジェクトのルートディレクトリに構築されました。ここでは、独自の構成について説明します： { "compilerOptions ...

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 { ...

二、TypeScriptについて2.1問題の発見JavaScriptの各値には動作のセットがあり、さまざまなアクションを実行することで確認できます。これは抽象的に聞こえるので、簡単な例として、 message という変数に対して実行する可能性のあるアクションを考えてみましょう： // 在 'message' 上访问属性 'toLowerCase'，并调用它message.toLowerCase();// 调用 'message'message(); これを分解すると、実行可能なコードの最初の行は属性 toLowerCase にアクセスし、それを呼び出します。2番目の試みは、 message を直接呼び出すことです。 しかし、 message が分からないとします。これはよくあることですが、これらのコードを実行しようとすると、どのような結果が得られるのかを確実に説明することはできません。各操作の動作は、最初に与えた message に依存します。 message を呼び出すことはできますか？ toLowerCase という属 ...

1.1 TypeScriptとはプログラミングコミュニティへの導入から20年以上が経ち、JavaScriptは今や史上最も広く利用されているクロスプラットフォーム言語の1つとなっています。JavaScriptは当初、Webページにわずかなインタラクティブ性を加えるための小さなスクリプト言語でしたが、現在ではあらゆる規模のフロントエンドおよびバックエンドのアプリケーションに最適な言語に成長しています。JavaScriptで書かれたプログラムのサイズ、範囲、複雑さは指数関数的に増加していますが、JavaScript言語は異なるコード単位間の関係を表現する能力がありません。JavaScriptの非常に特異なランタイムセマンティクスと組み合わせると、言語とプログラムの複雑さの間のこのミスマッチは、JavaScript開発を大規模な管理が困難なタスクにしてしまいます。 プログラマが書く最も一般的なエラータイプは、タイプエラーとして記述できます。タイプが異なる値が予想される場所で、あるタイプの値が使用されています。これは、単純なスペルミス、ライブラリのAPI表面を理解できない、ランタイム動作の誤っ ...

十六、声明合并16.1 简介TypeScript中的一些独特概念在类型层面上描述了JavaScript对象的形状。一个对TypeScript来说特别独特的例子是 “声明合并 “的概念。理解这个概念会让你在处理现有的JavaScript时有一个优势。它还打开了通往更高级抽象概念的大门。 就本文而言，”声明合并 “意味着编译器将两个以相同名称声明的独立声明合并为一个定义。这个合并的定义具有两个原始声明的特征。任何数量的声明都可以被合并；它并不局限于两个声明。 16.2 基本概念在TypeScript中，声明至少在三组中的一组创建实体：命名空间、类型或值。创建命名空间的声明创建了一个命名空间，其中包含使用点阵符号访问的名称。创建类型的声明就是这样做的：它们创建了一个类型，这个类型在声明的形状下是可见的，并与给定的名称绑定。最后，创建值的声明会创建在输出的JavaScript中可见的值。 Declaration Type Namespace Type Value Namespace X X Class X X Enum X X Interface X Ty ...

十五、命名空间与模块这篇文章概述了在TypeScript中使用模块和命名空间来组织你的代码的各种方法。我们还将讨论一些关于如何使用命名空间和模块的高级话题，并解决在TypeScript中使用它们时的一些常见陷阱。 关于ES模块的更多信息，请参见 Modules 文档。更多关于TypeScript命名空间的信息，请参见 Namespaces 文档。 注意：在非常老的TypeScript版本中，命名空间被称为 “内部模块”，这比JavaScript模块系统要早。 15.1 使用模块模块可以包含代码和声明。 模块也依赖于模块加载器（如CommonJs/Require.js）或支持ES模块的运行时间。模块提供了更好的代码重用，更强的隔离性和更好的捆绑工具支持。 同样值得注意的是，对于Node.js应用程序，模块是默认的，我们在现代代码中推荐模块而不是命名空间。 从ECMAScript 2015开始，模块是语言的原生部分，所有兼容的引擎实现都应该支持。因此，对于新项目，模块将是推荐的代码组织机制。 15.2 使用命名空间命名空间是一种TypeScript特有的组织代码的方式。 命名 ...

十四、命名空间 关于术语的说明：需要注意的是，在TypeScript 1.5中，术语已经改变。”内部模块 “ 现在是 “命名空间”。”外部模块 “现在只是 “模块”，以便与 ECMAScript 2015的术语保持一致，（即 module X { 等同于现在的 namespace X {）。 这篇文章概述了在TypeScript中使用命名空间（以前的 “内部模块”），用各种方法来组织你的代码。正如我们在术语说明中所暗示的，”内部模块 “现在被称为 “命名空间”。此外，在声明内部模块时，凡是使用 module 关键字的地方，都可以而且应该使用 namespace 关键字来代替。这就避免了新用户因使用类似的术语而感到困惑。 14.1 第一步让我们从本页中我们将使用的程序开始。作为例子，我们写了一小套简单的字符串验证器，用来检查用户在网页中的表单中的输入，或者检查外部提供的数据文件的格式。 14.2 单一文件中的验证器interface StringValidator { isAcceptable(s: string): boolean;}let ...

十三、模块解析模块解析是编译器用来分析一个导入什么的过程。考虑一个导入语句，如 import { a } from "moduleA"；为了检查对 a 的任何使用，编译器需要知道它到底代表什么，并需要检查它的定义 moduleA。 在这一点上，编译器会问 “moduleA的形状是什么？” 虽然这听起来很简单，但 moduleA 可能被定义在你自己的一个.ts/.tsx文件中，或者在你的代码所依赖的一个 .d.ts 中。 首先，编译器将试图找到一个代表导入模块的文件。为了做到这一点，编译器遵循两种不同的策略之一。 Classic or Node。这些策略告诉编译器去哪里寻找模块A。 如果这没有用，并且如果模块名称是非相对的（在 "moduleA"的情况下，它是相对的），那么编译器将尝试定位一个环境模块的声明。我们接下来会讨论非相对导入。 最后，如果编译器不能解决该模块，它将记录一个错误。在这种情况下，错误会是这样的：error TS2307: Cannot find module 'moduleA'。 ...

十二、模块从ECMAScript 2015开始，JavaScript有一个模块的概念。TypeScript也有这个概念。 模块在自己的范围内执行，而不是在全局范围内；这意味着在模块中声明的变量、函数、类等在模块外是不可见的，除非它们被明确地使用其中一种 导出形式导出。相反，要使用从不同模块导出的变量、函数、类、接口等，必须使用导入的形式将其导入。 模块是声明性的；模块之间的关系是在文件级别上以导入和导出的方式指定的。 模块使用模块加载器相互导入。在运行时，模块加载器负责在执行一个模块之前定位和执行该模块的所有依赖关系。在JavaScript中使用的著名的模块加载器是Node.js的CommonJS 模块的加载器和Web应用程序中AMD模块的 RequireJS 加载器。 在TypeScript中，就像在ECMAScript 2015中一样，任何包含顶级 import 或 export 的文件都被认为是一个模块。相反，一个没有任何顶级 import 或 export 声明的文件被视为一个脚本，其内容可在全局范围内使用（因此也可用于模块）。 12.1 导出12.1.1 导出声明任何声明（如 ...