Bun 是一款新的 JavaScript 运行时环境,与 Node.js 有一些明显的不同和优势。以下是一篇简单的 Bun 上手教程,包含了 Bun 和 Node.js 的比较、Bun 的优势、使用方法以及如何在现有的 Node.js 项目中替换为 Bun。一、Bun 和 Node.js 的比较1. 性能Bun 在性能上相较于 Node.js 有显著提升。这得益于其底层的优化和更高效的垃圾回收机制。在某些基准测试中,Bun 的性能甚至超过了 Node.js。2. 体积Bun 的可执行文件体积非常小,这使得它在部署和分发时更加便捷。相比之下,Node.js 的安装体积较大。3. API 和兼容性Bun 的 API 与 Node.js 非常相似,因此大多数 Node.js 代码在 Bun 上可以无需修改地运行。但需要注意的是,由于 Bun 的版本较新,可能还未完全支持 Node.js 的所有特性。二、Bun 的优势1. 简化开发体验Bun 提供了更简洁的开发体验,无需配置复杂的构建工具或打包器。你可以直接运行 .bun 文件,就像运行普通的 JavaScript 文件一样。2. 内置包管理
在 Vue 中使用 TypeScript 的入门教程TypeScript 是 JavaScript 的一个超集,它为开发者提供了更强的类型检查、代码提示以及更好的可维护性。在 Vue 应用程序中使用 TypeScript 可以帮助我们更好地理解和管理代码库。本文将介绍如何在 Vue 项目中使用 TypeScript。安装 TypeScript首先,确保你已经安装了 Node.js 环境。然后,在终端运行以下命令来全局安装 TypeScript:npm install -g typescript创建 Vue 项目使用 Vue CLI 可以方便地创建一个默认配置的 Vue 项目,其中包含了一些常用插件和工具。如果你还没有安装 Vue CLI,可以通过以下命令安装:npm install -g @vue/cli使用 Vue CLI 创建 Vue 项目非常简单,只需运行以下命令并根据提示回答即可:vue create my-project配置 TypeScript创建完项目之后,我们需要对项目进行一些配置才能够开始使用 TypeScript。打开 tsconfig.json 文件,配置如下:{
问题原因使用了 Vite 添加了别名 ,但是TS没有对应的路径,tsconfig.json和vite.config.ts需要相互设置好解决方法vite.config.ts{ resolve: { alias: { "@": path.join(__dirname, "./src"), // 这里定义了别名 @ 相当于 ./src }, }, }tsconfig.json{ "extends": "@tsconfig/svelte/tsconfig.json", "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "module": "ESNext", &quo
问题原因使用了 "allowJs": true 这一项解决方法将 "outDir" 这一项指向打包的文件夹 例如 "outDir": "./dist" // Vite框架的默认打包文件夹为dist
报错内容Flag 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify 'ignoreDeprecations: "5.0"' to silence this error. Use 'verbatimModuleSyntax' instead.ts可以通过在项目中添加以下命令来隐藏此警告:tsconfig.json{ "compilerOptions": { "ignoreDeprecations": "5.0", .... } }
JavaScript代码整洁( Clean Coding )最佳实践代码整洁( Clean Coding )是什么意思?所谓的clean code 字面上就是整洁代码的含义,落实到我们工程师日常coding中就是如何写出看上去干净、逻辑清晰、有一定抽象能力扩展性好的代码。写的代码是方便和同事协作开发,不单单是为机器编写,所有,代码尽可能让人容易理解。这些文字的定义显得不那么生动形象,看看下图左侧的就是clean code,右侧的就是WTF(让人看见想骂xx的意思) code。那么有的人会问clean code也有WTF,是不是还不是真正的clean code,如果你是一个追求极致的人那么这个问题没毛病。但是我想说的是没有什么代码没有0 WTF的,及时所谓非常整洁规范、干净的代码也或多或少是些小毛病。所以我们工程师能够向着0 WTF的方向去努力去优化自己的代码就是成功的。现在我们知道了开发者的目标是什么了,下面来一起看看最佳实践吧!变量应该如何命名?使用有意义且准确的名称,不要因为有长的名称而节省几个键盘敲击。如果您遵循此实践,变量会变得方便搜索,当你需要重构或者查找某些关键字的时候会有
父组件是不能直接访问子组件的方法。需要子组件手动的抛出才行。setup写法// 父组件 <template> <div> <h1>父组件</h1> <a-button type="primary" @click="create">调用子组件</a-button> <Operate ref="operateRef" @childClick="childClick" msg="hello"></Operate> </div> </template> <script lang="ts"> import { ref } from 'vue'; import Operate from './operate.vue'; export default defineComponent(
class test { private int:number = 0; private double:number = 0; public getInt():number { return this.int; } public setInt(value:number):void { this.int = value; } public getDouble():number { return this.double; } public setDouble(value:number):void { this.double = value; } }比如这里有两个私有属性并提供get/set方法,和直接设置public有什么区别?如果仅仅是图中的例子,那么你说的这两种方式是没什么区别的。外部调用的结果都可以对属性进行读取与修改。但是这个例子只是展示了一个常规的私有属性与 get/set 方法的使用模式,仅仅从这个例子中看不出来这个模式有
命名使用 PascalCase 为类型、枚举类型命名使用 UPPER_CASE 为常量和枚举值命名使用 camelCase 为函数命名使用 camelCase 为属性或本地变量命名不要为私有属性名添加_前缀,如果某些属性你不想任何人访问它,可以添加$前缀尽可能使用完整的单词拼写命名函数名采用 动词 或 动词+名词 的方式start()startLevel(level: number)使用有意义的变量命名正确示范clickCallback tempValue错误示范 func a b类型不要使用 namespace 使用 ES Module不要导出类型/函数,除非你要在不同的组件中共享它在一个文件里,类型定义应该出现在顶部尽量使用 **undefined**,而不是 null组件1个文件对应一个逻辑组件 (比如:资源类型,资源加载器)gen目录下的文件是自动生成的,不要手动改它。一般假设假设外部不需要修改的成员,需要添加 readonly 修饰假设外部不需要访问的成员,应添加 private 或 protected 修饰假设不会变的对象,应声明为Readonly<T>注释为类
Gonwe
一念智即般若生。
CC BY-SA 4.0