Site updated: 2024-07-14 15:21:04

2024/06/02/浏览器插件入门/index.html

@@ -413,9 +413,9 @@ <h3 id="用法">用法</h3>
                   <article class="post-prev col-6">
 
 
-                      <a href="/2024/07/12/test/" title="test">
+                      <a href="/2024/07/12/Typescript%20namespace/" title="Typescript namespace">
                         <i class="iconfont icon-arrowleft"></i>
-                        <span class="hidden-mobile">test</span>
+                        <span class="hidden-mobile">Typescript namespace</span>
                         <span class="visible-mobile">Previous</span>
                       </a>
 

2024/07/12/test/index.html → 2024/07/12/Typescript namespace/index.html

@@ -16,19 +16,21 @@
   <meta name="author" content="Shanyujia">
   <meta name="keywords" content="">
 
-    <meta property="og:type" content="article">
-<meta property="og:title" content="test">
-<meta property="og:url" content="http://example.com/2024/07/12/test/index.html">
+    <meta name="description" content="Typescript namespace namespace 是一种将相关代码组织在一起的方式，中文译为“命名空间”。 它出现在 ES 模块诞生之前，作为 TypeScript 自己的模块格式而发明的。但是，自从有了 ES 模块，官方已经不推荐使用 namespace 了。 基本用法 namespace 用来建立一个容器，内部的所有变量和函数，都必须在这个容器里面使用。 12345678910na">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Typescript namespace">
+<meta property="og:url" content="http://example.com/2024/07/12/Typescript%20namespace/index.html">
 <meta property="og:site_name" content="Shanyujia&#39;s Blog">
+<meta property="og:description" content="Typescript namespace namespace 是一种将相关代码组织在一起的方式，中文译为“命名空间”。 它出现在 ES 模块诞生之前，作为 TypeScript 自己的模块格式而发明的。但是，自从有了 ES 模块，官方已经不推荐使用 namespace 了。 基本用法 namespace 用来建立一个容器，内部的所有变量和函数，都必须在这个容器里面使用。 12345678910na">
 <meta property="og:locale" content="en_US">
 <meta property="article:published_time" content="2024-07-12T00:55:09.000Z">
-<meta property="article:modified_time" content="2024-07-12T00:55:09.384Z">
+<meta property="article:modified_time" content="2024-07-14T07:20:41.939Z">
 <meta property="article:author" content="Shanyujia">
 <meta name="twitter:card" content="summary_large_image">
 
 
 
-  <title>test - Shanyujia&#39;s Blog</title>
+  <title>Typescript namespace - Shanyujia&#39;s Blog</title>
 
   <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />
 
@@ -194,7 +196,7 @@
       <div class="banner-text text-center fade-in-up">
         <div class="h2">
 
-            <span id="subtitle" data-typed-text="test"></span>
+            <span id="subtitle" data-typed-text="Typescript namespace"></span>
 
         </div>
 
@@ -217,7 +219,7 @@
       <span class="post-meta mr-2">
         <i class="iconfont icon-chart"></i>
 
-          0 words
+          924 words
 
       </span>
 
@@ -228,7 +230,7 @@
 
 
 
-          1 mins
+          8 mins
 
       </span>
 
@@ -265,12 +267,44 @@
       <div class="container nopadding-x-md" id="board-ctn">
         <div id="board">
           <article class="post-content mx-auto">
-            <h1 id="seo-header">test</h1>
+            <h1 id="seo-header">Typescript namespace</h1>
 
 
               <div class="markdown-body">
 
-
+                <h1>Typescript namespace</h1>
+<p>namespace 是一种将相关代码组织在一起的方式，中文译为“命名空间”。</p>
+<p>它出现在 ES 模块诞生之前，作为 TypeScript 自己的模块格式而发明的。但是，自从有了 ES 模块，官方已经不推荐使用 namespace 了。</p>
+<h2 id="基本用法">基本用法</h2>
+<p>namespace 用来建立一个容器，内部的所有变量和函数，都必须在这个容器里面使用。</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">namespace</span> <span class="hljs-title class_">Utils</span> &#123;<br>  <span class="hljs-keyword">function</span> <span class="hljs-title function_">isString</span>(<span class="hljs-params">value: <span class="hljs-built_in">any</span></span>) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">&quot;string&quot;</span>;<br>  &#125;<br><br>  <span class="hljs-comment">// 正确</span><br>  <span class="hljs-title function_">isString</span>(<span class="hljs-string">&quot;yes&quot;</span>);<br>&#125;<br><br><span class="hljs-title class_">Utils</span>.<span class="hljs-title function_">isString</span>(<span class="hljs-string">&quot;no&quot;</span>); <span class="hljs-comment">// 报错</span><br></code></pre></td></tr></table></figure>
+<p>上面示例中，命名空间<code>Utils</code>里面定义了一个函数<code>isString()</code>，它只能在<code>Utils</code>里面使用，如果用于外部就会报错。</p>
+<p>如果要在命名空间以外使用内部成员，就必须为该成员加上<code>export</code>前缀，表示对外输出该成员。</p>
+<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs typescript"><span class="hljs-keyword">namespace</span> <span class="hljs-title class_">Utility</span> &#123;<br>  <span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">log</span>(<span class="hljs-params">msg: <span class="hljs-built_in">string</span></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(msg);<br>  &#125;<br>  <span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">error</span>(<span class="hljs-params">msg: <span class="hljs-built_in">string</span></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(msg);<br>  &#125;<br>&#125;<br><br><span class="hljs-title class_">Utility</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;Call me&quot;</span>);<br><span class="hljs-title class_">Utility</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&quot;maybe!&quot;</span>);<br></code></pre></td></tr></table></figure>
+<p>上面示例中，只要加上<code>export</code>前缀，就可以在命名空间外部使用内部成员。</p>
+<p>编译出来的js代码长这个样🤔</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">var</span> <span class="hljs-title class_">Utility</span>;<br><br>(<span class="hljs-keyword">function</span> (<span class="hljs-params">Utility</span>) &#123;<br>  <span class="hljs-keyword">function</span> <span class="hljs-title function_">log</span>(<span class="hljs-params">msg</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(msg);<br>  &#125;<br>  <span class="hljs-title class_">Utility</span>.<span class="hljs-property">log</span> = log;<br>  <span class="hljs-keyword">function</span> <span class="hljs-title function_">error</span>(<span class="hljs-params">msg</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(msg);<br>  &#125;<br>  <span class="hljs-title class_">Utility</span>.<span class="hljs-property">error</span> = error;<br>&#125;)(<span class="hljs-title class_">Utility</span> || (<span class="hljs-title class_">Utility</span> = &#123;&#125;));<br></code></pre></td></tr></table></figure>
+<p>上面代码中，命名空间<code>Utility</code>变成了 JavaScript 的一个对象，凡是<code>export</code>的内部成员，都成了该对象的属性。</p>
+<p>这就是说，namespace 会变成一个值，保留在编译后的代码中。这一点要小心，它不是纯的类型代码。</p>
+<p>namespace 内部还可以使用<code>import</code>命令输入外部成员，相当于为外部成员起别名。当外部成员的名字比较长时，别名能够简化代码</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">namespace</span> <span class="hljs-title class_">Utils</span> &#123;<br>  <span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">isString</span>(<span class="hljs-params">value: <span class="hljs-built_in">any</span></span>) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">typeof</span> value === <span class="hljs-string">&quot;string&quot;</span>;<br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">namespace</span> <span class="hljs-title class_">App</span> &#123;<br>  <span class="hljs-keyword">import</span> isString = <span class="hljs-title class_">Utils</span>.<span class="hljs-property">isString</span>;<br><br>  <span class="hljs-title function_">isString</span>(<span class="hljs-string">&quot;yes&quot;</span>);<br>  <span class="hljs-comment">// 等同于</span><br>  <span class="hljs-title class_">Utils</span>.<span class="hljs-title function_">isString</span>(<span class="hljs-string">&quot;yes&quot;</span>);<br>&#125;<br></code></pre></td></tr></table></figure>
+<p>上面示例中，<code>import</code>命令指定在命名空间<code>App</code>里面，外部成员<code>Utils.isString</code>的别名为<code>isString</code>。</p>
+<p><code>import</code>命令也可以在 namespace 外部，指定别名</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">namespace</span> <span class="hljs-title class_">Shapes</span> &#123;<br>  <span class="hljs-keyword">export</span> <span class="hljs-keyword">namespace</span> <span class="hljs-title class_">Polygons</span> &#123;<br>    <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Triangle</span> &#123;&#125;<br>    <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">Square</span> &#123;&#125;<br>  &#125;<br>&#125;<br><br><span class="hljs-keyword">import</span> polygons = <span class="hljs-title class_">Shapes</span>.<span class="hljs-property">Polygons</span>;<br><br><span class="hljs-comment">// 等同于 new Shapes.Polygons.Square()</span><br><span class="hljs-keyword">let</span> sq = <span class="hljs-keyword">new</span> polygons.<span class="hljs-title class_">Square</span>();<br></code></pre></td></tr></table></figure>
+<p>上面示例中，<code>import</code>命令在命名空间<code>Shapes</code>的外部，指定<code> Shapes.Polygons</code>的别名为<code>polygons</code>。</p>
+<p>namespace 可以嵌套 💁‍♂️</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">namespace</span> <span class="hljs-title class_">Utils</span> &#123;<br>  <span class="hljs-keyword">export</span> <span class="hljs-keyword">namespace</span> <span class="hljs-title class_">Messaging</span> &#123;<br>    <span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">log</span>(<span class="hljs-params">msg: <span class="hljs-built_in">string</span></span>) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(msg);<br>    &#125;<br>  &#125;<br>&#125;<br><br><span class="hljs-title class_">Utils</span>.<span class="hljs-property">Messaging</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;hello&quot;</span>); <span class="hljs-comment">// &quot;hello&quot;</span><br></code></pre></td></tr></table></figure>
+<p>上面示例中，命名空间<code>Utils</code>内部还有一个命名空间<code>Messaging</code>。注意，如果要在外部使用<code>Messaging</code>，必须在它前面加上<code>export</code>命令。</p>
+<p>使用嵌套的命名空间，必须从最外层开始引用，比如<code>Utils.Messaging.log()</code>。</p>
+<p>namespace 不仅可以包含实义代码，还可以包括类型代码。</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-keyword">namespace</span> N &#123;<br>  <span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyInterface</span> &#123;&#125;<br>  <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyClass</span> &#123;&#125;<br>&#125;<br></code></pre></td></tr></table></figure>
+<p>上面代码中，命令空间<code>N</code>不仅对外输出类，还对外输出一个接口，它们都可以用作类型。</p>
+<p>namespace 与模块的作用是一致的，都是把相关代码组织在一起，对外输出接口。区别是一个文件只能有一个模块，但可以有多个 namespace。由于模块可以取代 namespace，而且是 JavaScript 的标准语法，还不需要编译转换，所以建议总是使用模块，替代 namespace。</p>
+<p>如果 namespace 代码放在一个单独的文件里，那么引入这个文件需要使用三斜杠的语法。</p>
+<figure class="highlight ts"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ts"><span class="hljs-comment">/// &lt;reference path = &quot;SomeFileName.ts&quot; /&gt;</span><br></code></pre></td></tr></table></figure>
+<p>PS: 三斜杠指令是特殊注释，为编译器提供有关如何处理文件的说明。这些指令以三个连续斜杠 (<code>///</code>) 开头，通常放置在 TypeScript 文件的顶部，对运行时行为没有影响。</p>
+<p>三斜杠指令用于引用外部依赖项、指定模块加载行为、启用/禁用某些编译器功能等等。</p>
+
 
               </div>
 
@@ -287,8 +321,8 @@ <h1 id="seo-header">test</h1>
 
   <div class="license-box my-3">
     <div class="license-title">
-      <div>test</div>
-      <div>http://example.com/2024/07/12/test/</div>
+      <div>Typescript namespace</div>
+      <div>http://example.com/2024/07/12/Typescript namespace/</div>
     </div>
     <div class="license-meta">
 

archives/2024/07/index.html

@@ -222,9 +222,9 @@
 
       <p class="h5">2024</p>
 
-    <a href="/2024/07/12/test/" class="list-group-item list-group-item-action">
+    <a href="/2024/07/12/Typescript%20namespace/" class="list-group-item list-group-item-action">
       <time>07-12</time>
-      <div class="list-group-item-title">test</div>
+      <div class="list-group-item-title">Typescript namespace</div>
     </a>
 
 </div>

archives/2024/index.html

@@ -222,9 +222,9 @@
 
       <p class="h5">2024</p>
 
-    <a href="/2024/07/12/test/" class="list-group-item list-group-item-action">
+    <a href="/2024/07/12/Typescript%20namespace/" class="list-group-item list-group-item-action">
       <time>07-12</time>
-      <div class="list-group-item-title">test</div>
+      <div class="list-group-item-title">Typescript namespace</div>
     </a>
 
 

archives/index.html

@@ -222,9 +222,9 @@
 
       <p class="h5">2024</p>
 
-    <a href="/2024/07/12/test/" class="list-group-item list-group-item-action">
+    <a href="/2024/07/12/Typescript%20namespace/" class="list-group-item list-group-item-action">
       <time>07-12</time>
-      <div class="list-group-item-title">test</div>
+      <div class="list-group-item-title">Typescript namespace</div>
     </a>
 
 

index.html

@@ -224,15 +224,15 @@
     <article class="col-12 col-md-12 mx-auto index-info">
       <h2 class="index-header">
 
-        <a href="/2024/07/12/test/" target="_self">
-          test
+        <a href="/2024/07/12/Typescript%20namespace/" target="_self">
+          Typescript namespace
         </a>
       </h2>
 
 
-      <a class="index-excerpt index-excerpt__noimg" href="/2024/07/12/test/" target="_self">
+      <a class="index-excerpt index-excerpt__noimg" href="/2024/07/12/Typescript%20namespace/" target="_self">
         <div>
-
+          Typescript namespace namespace 是一种将相关代码组织在一起的方式，中文译为“命名空间”。 它出现在 ES 模块诞生之前，作为 TypeScript 自己的模块格式而发明的。但是，自从有了 ES 模块，官方已经不推荐使用 namespace 了。 基本用法 namespace 用来建立一个容器，内部的所有变量和函数，都必须在这个容器里面使用。 12345678910na
         </div>
       </a>