首页 > 其他分享 >思考 TypeScript namespace,复习 class 语法

思考 TypeScript namespace,复习 class 语法

时间:2023-04-06 15:11:24浏览次数:43  
标签:TypeScript return name namespace js class 变量

前言

据我所知,早期 JavaScript 没有 class 语法,很多都是函数,即便是现在的 class 本质上也是一个函数。在这里不说函数与 class 之间的关系和区别。

下面将从 class 语法上讲解,阐述为什么有 class 以及作用;

对 class 语法进行了探讨之后,再思考 TypeScript 的 namespace 给我们带来了什么好处。

class 语法

class 可以很好的组织一段代码,封装变量、函数。class 能保留在此运行阶段的变量变化(记忆功能),并且 class 也可以解决变量在全局作用域下的冲突问题。

class Person {
  constructor(name) {
    this._name = name;
    this._count = 0;
  }

  set name(value) {
    this._name = value;
  }

  get name() {
    return this._name;
  }

  get count() {
    return this._count;
  }

  say(msg) {
    console.log(this._name + "say, " + msg);
    this._count++;
  }
}

const p = new Person("小明");
p.say("hello");
p.say("world");
p.say("!");

console.log(p.count); // 3

类里面的 count 变量被记录,类可以封装一段代码,保留这段代码的记忆。类与类之间的变量、函数等都不会因为重复命名而冲突。

类就是模块化、整体开发的一种体现

模块化

与上面 class 相反,一些不需要保存变量状态,很多函数之间没有强联系(不适合组织在一个 class 里)时,尝试通过 .js 文件(脚本文件)分割代码:

// a.js
function getDate() { return new Date(); }
// b.js
function getDate() { return new Date(); }

引入到同一个 html 下,它们的顶层作用域都是一个。因此,a 与 b 两个脚本文件中定义的相同名称的函数会引起变量命重复定义的冲突。

<script src="./a.js"></script>
<script src="./b.js"></script>

多个脚本文件引入到 html 文件时有变量冲突问题,此问题迫切需要解决。

在现代 JavaScript 中,已经有了模块化开发的语法支持,importexport

// a.js
function getDate() { return new Date(); }
// b.js
function getDate() { return new Date(); }

同一个文件引入同一个函数时只需要在导入端重命名即可,不影响源文件中定义的函数名称,对代码入侵性更小

// main.js
import { getDate as aGetDate } from "./a.js";
import { getDate as bGetDate } from "./b.js";

可以简单地把一个脚本文件视为一个模块。模块可以更方便地组织无状态、相关性不强的代码,提升项目工程的管理能力。

namespace

TypeScript namespace 以前叫内部模块(internal modules)。namespace 扩展和补充模块。随着业务的增加,代码越来越多,在一个脚本文件中定义的代码,需再新建一个脚本文件写新的代码。从逻辑上来讲应该还是定义在同一个脚本文件中。

namespace 可以对模块再拆分,这样即可以不新建脚本文件、减少具名 import,还能解决变量名重复的问题。

// validator.ts

namespace Validation {
  // 导出该接口,通过 Validation.StringValidator 访问
  export interface StringValidator {
    isAcceptable(s: string): boolean;
  }

  // Validation 命名空间私有的变量
  const lettersRegexp = /^[A-Za-z]+$/;
  const numberRegexp = /^[0-9]+$/;

  export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
      return lettersRegexp.test(s);
    }
  }

  export class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
      return s.length === 5 && numberRegexp.test(s);
    }
  }
}

总结

namespaceimport/export 组织的是一堆函数、类、常量。状态是不变化的,因此一般定义的是常量,而不是 letvar 定义的变量。

class 也是组织函数、变量、常量,变量的变化可以记忆在类中,是有状态的代码组织。

namespace 是对 import/export 的补充和扩展,一个模块内的代码太多,可以通过 namespace 来重新组织。

标签:TypeScript,return,name,namespace,js,class,变量
From: https://www.cnblogs.com/Himmelbleu/p/17292823.html

相关文章

  • Java中的Class类 小的总结
    *点击查看代码publicclassProjectConfig{//合作方产品唯一标示publicstaticStringSOURCEID="hthx_swyyssys_0001";//AES加密解密keypublicstaticfinalStringAESKEY="B62i45TKqs1qwJaD";//本地公钥publicstaticfinalString......
  • 微信公众号 过滤 typescript cheerio
    E:\公众号文章采集\fi_filter_过滤器\src\exact_新浪博客手机版提取连接.jsconstfs=require('fs');constjsdom=require('jsdom');const{JSDOM}=jsdom;fs.readdir('./html',function(err,files){files.forEach((file)=>{fs.read......
  • js用前缀名查找class或id节点,js模糊查询某个dom节点
    js在操作dom的场景中,有时候会有类似的场景需求。js用前缀名查找class节点//参数dom为htmldom节点//参数key为需模糊查询的名称字段functionqueryClassNode(dom,key){letcollectArray=[];for(vari=0;i<dom.childNodes.length;i++){ //核心点......
  • c++ struct和class
    c++中对象通常用struct和class表示。在c语言中,struct用来创建结构体,结构体中只能包含基本数据成员。而在c++中struct能包含成员函数,能实现多态(继承)。c++中struct和class的功能十分类似,但是在面向对象的过程中class的使用较多,两者的区别如下:struct与class的主要区别在于默认......
  • java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/ConditionalTagSuppor
    1.报错截图2.问题原因缺少对应的类3.问题解决<dependency><groupId>taglibs</groupId><artifactId>standard</artifactId><version>1.1.2</version></dependency><......
  • js dom className classList
    classListdom.classList.contains('black')//删除blackdom.classList.remove('black')//新增.reddom.classList.add('red')classNameletcName=elementNodeReference.className;elementNodeReference.className=cName;详情见官网......
  • TypeScript 报错 解决
    持续更新中tsconfig.ts中报错找不到“vite/client”的类型定义文件。程序包含该文件是因为:在compilerOptions中指定的类型库"vite/client"的入口点原因tsconfig.ts中已经配置"types":["vite/client"]{"compilerOptions":{"target":"ESNext"......
  • cpp: create class
    PigInfo.h#ifndefPIGINFO_H#definePIGINFO_H#include<iostream>#include<string.h>#include<math.h>usingnamespacestd;/*实体类https://learn.microsoft.com/zh-cn/cpp/standard-library/cpp-standard-library-header-files?view=msvc-170......
  • 属性指令之class和style
    目录说明classstyle说明class与style本身是属性指令,但是他们比较特殊,应用更广泛。#class:class='变量' 变量可以为:字符串、数组、对象 推荐使用数组,因为class可以使用多个参数#style:style='变量' 变量可以为:字符串、数组、对象 推荐使用对象class#先......
  • DecisionTreeClassifier&DecisionTreeClassRegression
    DecisionTreeClassifierfromsklearn.datasetsimportload_wine#红酒数据集fromsklearn.treeimportDecisionTreeClassifier,export_graphviz#决策树,画树fromsklearn.model_selectionimporttrain_test_split#数据集划分importgraphvizimportmatplotlib.pyplo......