首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App

在 NodeJS 应用程序中有两种使用 TypeScript 的方法,要么在项目中本地安装使用,要么在电脑中全局安装使用。基于个人喜好,我会选择后者。但如果你想,你也可以坚持使用本地安装使用的方式。...yarn add express cors mongoose 我们还需要安装它们的类型作为开发依赖项,帮助 TypeScript 编译器理解这些包。...yarn add -D @types/node @types/express @types/mongoose @types/cors 现在,TypeScript 不会再对你提示错误——它将使用这些类型来定义我们刚刚安装的库...我们还需要安装其他依赖项,以便能够编译 TypeScript 代码并同时启动服务器。...getTodos() 方法会返回 promise —— 因此,我们可以调用 then 函数并用获取到的数据更新 state,或者在发生任何错误时抛出一个错误。

17K30

Node.js 搭建一个 API 接口服务(实战)

Typescript 网上特别多关于“为什么要用Typescript开发”,“Typescript开发的好处和坏处”,“为什么不用Typescript开发”等等的争论和文章,有兴趣的同学也可以去说道说道哈...,可以避免很多开发阶段的低级错误 约束开发习惯,使得代码更优雅规范 最后记住一点,适合自己的才是最好的 Mysql MySQL 是最流行的关系型数据库管理系统,在 WEB 应用方面 MySQL 是最好的...接下来在浏览器输入http://localhost:3000就能在控制台看到访问日志了。...- 比如说打个点,记录埋点出错的信息,看看是什么原因导致出错的(根据实际的需求来做) // ... } } // ... } export default new AccLogRoute...const authorization: string = ctx.header.authorization; const scheme = authorization.substr(0,

8.5K32
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    TypeScript 4.4 RC版来了,正式版将于月底发布

    以上示例不会引发任何错误!当 TypeScript 发现我们在测试某个常量值时,它会执行一些额外的操作以查看其中是否包含类型守卫。...但您也可能在 TypeScript 4.4 上遇到如下错误: 类型'unknown'上不存在属性'message'。 类型'unknown'上不存在属性'name'。...}; 因此,TypeScript 在默认情况下并不能区分实际值为 undefined 的属性与缺失的属性。虽然大多数情况下这并不是什么问题,但也有一些 JavaScript 代码会做出不同的假设。...为大型输出更快生成源映射 TypeScript 4.4 为超大输出文件提供了源映射生成优化功能。与旧版 TypeScript 编译器相比,新版本的发布时长可缩短约 8%。...(0, fooModule.foo)(); 在 Catch 变量中使用 unknown 用户在运行 --strict 标记时可能看到关于 catch 变量为 unknown 的新错误,特别是在现有代码假定只捕捉了

    2.6K20

    useTypescript-React Hooks和TypeScript完全指南

    event 对象去获取其 clientY 属性的值,在这里我们已经将 event 设置为 any 类型,导致 TypeScript 在编译时并不会提示我们错误, 当我们通过 event.clientY...API 对应为: // 传入唯一的参数: initialState,可以是数字,字符串等,也可以是对象或者数组。...API 对应为: // 两个参数 // 第一个是一个函数,是在第一次渲染(componentDidMount)以及之后更新渲染之后会进行的副作用。...这听起来可能有点抽象,让我们看一个实际的例子: const initialState = 0; function reducer(state, action) { switch (action.type...涵盖的功能如下: - 组件 - 基础表格 - ECharts 图表 - 表单 - 基础表单 - 分步表单 - 编辑器 - 控制台 - 错误页面 - 404 里面对于在

    8.5K30

    探索类型系统的底层 - 自己实现一个 TypeScript(硬核干货)

    例如,上面的代码在语法上是正确的,但在语义上是错误的(将变量定义为一个数字类型,但是值是一个字符串)。 接下来是 JavaScript 生态系统中的 AST 和编译器。 什么是 AST?...TypeScript 和 Flow 的编译器在将代码输出到 JavaScript 时都算作语言编译器。...(即,如果注解为数字,则调用时类型应为数字)。...这就是作用域将应用于实际类型检查器的地方。如果找不到声明,就将错误信息添加到 errors 数组中。 接下来,我们针对调用时传入的参数类型(实参类型)检查每个已定义的参数类型。...如前所述,类型编译器还有许多其他部分,我们在编译器中省略了这些部分。其中包括: 解析器:我们是手动编写的 AST 代码,它们实际上是在类型的编译器上解析生成。

    1.3K40

    MongoDB增删改查操作

    实际在数据库中产生的集合名为courses 2.创建文档 创建文档实际上就是向集合中插入数据。 方法1 分为两步: ①创建集合实例。 ②调用实例对象下的save方法将数据保存到数据库中。...User.updateMany({}, {    age: 45 }).then(result => {    console.log(result); }) 7. mongoose验证 在创建集合规则时...:error.errors['字段名称'].message // 验证规则可以跟两个参数,第二个参数表示自定义错误提示信息 const postSchema = new mongoose.Schema...(err[k]['message']);       }   }) 8.集合关联 通常不同集合的数据之间是有关系的,例如文章信息和用户信息存储在不同集合中,但文章是某个用户发表的 要查询文章的所有信息包括发表用户...},v: 0 } ]

    6.5K20

    JSDoc ,一个可替代 TypeScript 的方案?

    JSDoc语法具有多种用途,包括用类型注释值,为函数指定参数和返回类型,为函数提供文档和使用信息,以及类型错误等。...以下是TypeScript相对于JSDoc的一些优势: 更强大的静态类型:TypeScript提供了一种强大的类型模型,并在编译时捕获这些错误。...此外,您可以使用 @throws 指令添加函数可能抛出的错误。 改进除法函数,我们可以指定如果除数为零则返回错误,并在代码中处理这种情况。 /** * Divide two numbers....,以便享受使用Typescript的好处,如在编译时捕获错误、与Typescript项目集成等。...JSDoc在以下情况下特别有用:当您的Typescript编译时间/构建步骤对生产力产生相反的影响时,以及在处理遗留代码库时。

    83110

    MongoDB增删改查操作

    实际在数据库中产生的集合名为courses 1.创建文档 创建文档实际上就是向集合中插入数据。 方法1 分为两步: ①创建集合实例。 ②调用实例对象下的save方法将数据保存到数据库中。...在项目根目录下输入以下命令导入 mongoimport -d 数据库名称 -c 集合名称 --file 要导入的数据文件 4.查询文档 find()方法 返回一组文档 // 根据条件查找文档(条件为空则查找所有文档...:error.errors['字段名称'].message // 验证规则可以跟两个参数,第二个参数表示自定义错误提示信息 const postSchema = new mongoose.Schema...(err[k]['message']); } }) 8.集合关联 通常不同集合的数据之间是有关系的,例如文章信息和用户信息存储在不同集合中,但文章是某个用户发表的 要查询文章的所有信息包括发表用户...},v: 0 } ] 9.

    6.2K10

    TypeScript是什么,为什么要使用它?

    实际上,一项研究表明,TypeScript可以检测到所有JavaScript错误的15%。...尽管如果初始文件中存在类型错误,编译器会发出警告,但编译器仍然会给您返回一个正常的JavaScript文件。 在前端还是后端使用TypeScript?...它们可以从简单的类型(如数字和字符串) 到为我们的问题域完美建模的复杂结构。 编程语言分为两类:静态类型或动态类型。 在使用静态类型的语言中,变量的类型在编译时必须是已知的。...这使开发人员可以更轻松地避免错误并进行重写。 类型的定义和编译器的引入,可使你避免掉代码中的大多数愚蠢错误。...在大型系统中,能够在记住上下文的同时抽象出系统的其余部分是很重要的。类型的定义使我们能够做到这一点。 TypeScript和JavaScript实际上是可以互换的,何乐而不为呢?

    1.6K20

    异步多图加载这件小事儿(Promise与async)

    完整例子 上面我们都是在 node 命令行里面运行的,在理解整个过程之后,让我们在浏览器里面实际试试,由于兼容性问题,我们要借助 webpack 转换一下。...于是我想起了 TypeScript。 TypeScript 具有优秀的自编译能力,不需要额外引入 babel,而且比 babel 做的更好。...以我上面的代码为例,安装 TypeScript 之后,不需要任何修改,只要把后缀名改成 ts,直接就可以开始编译。 来感受一下: ?...bundle-ts.js 就是用 TypeScript 编译出来的,只有 5.5k。 看一下编译出来的文件中 async/await 的实现,不到 40 行,干净利落。 ?...当然,这里并不是说用 TypeScript 就一定比 bable 好,还是要根据项目实际情况来,但 TypeScript 绝对值得你去花时间了解一下。

    2.4K80

    全网最全的,最详细的,最友好的 Typescript 新手教程

    但是JavaScript引擎不能读取TypeScript代码,所以任何TypeScript文件都要经过“预翻译”过程,也就是编译。...只有在第一个编译步骤之后,才剩下纯JavaScript代码,可以在浏览器中运行。稍后你会看到TypeScript是如何编译的。...实际上,只要它能捕获代码中严重和愚蠢的错误,您就会看到它的好处。更重要的是,您的代码库将变得结构良好,并且几乎是自文档化的。您还将欣赏编辑器中改进的自动完成功能,但这只是一个不错的副作用。...这实际上就像根本没有类型检查一样。当strict设置为true时,你就会对TypeScript说“不要在我的代码中产生歧义”。...从现在开始,我将以文本形式向你展示错误,但请记住,ide和文本编辑器会在你在TypeScript中出现错误时显示这些红线。

    6.1K40

    掌握 TypeScript:20 个提高代码质量的最佳实践

    想象一下,在问题出现之前就能发现潜在错误,听起来太好不过了吧?这正是 TypeScript 中严格类型检查所能为你做到的。这个最佳实践的目的是捕捉那些可能会悄悄溜进你的代码并在后面引发麻烦的虫子。...类型推断是 TypeScript 编译器根据变量赋值的值自动推断变量类型的能力。这意味着你不必在每次声明变量时都显式指定类型。相反,编译器会根据值推断类型。...声明为返回一个数字,但如果分母为零,则会抛出错误。...其中,一些最佳实践包括尽可能使用 TypeScript 的类型系统、使用函数和方法参数默认值、使用可选链操作符等。此外,该文章还强调了在使用类时,应该使用访问修饰符,以避免出现不必要的错误。...例如,应该尽可能使用函数和方法参数默认值,以避免参数为空或未定义时的错误。

    4.2K30

    Mongoose学习参考文档

    1.2 准备工作 1.首先你必须安装MongoDB和NodeJS 2.在项目只能够创建一个数据库连接,如下: var mongoose = require('mongoose'); //引用...({ name:String //定义一个属性name,类型为String }); 5.将该Schema发布为Model var PersonModel = db.model...Model和Entity都有能影响数据库的操作,但仍有区别,后面我们也会做解释 二、新手指引 如果您还不清楚Mongoose是如何工作的,请参看第一章快速通道快速浏览他的用法吧 1.....name = 'd'; parent.save(callback); parent在执行保存时,由于包含children2,他是一个数据库模型对象,因此会先保存chilren2[0]和chilren2...如果子文档在更新时出现错误,将直接报在父类文档中,可以这样处理: ChildrenSchema.pre('save',function(next){ if('x' === this.name

    24.2K90

    TypeScript 在实际项目中的应用#2024年度实用技巧

    TypeScript 的内容有很多,或许一下子让人无从下手,但在实际项目中用到的特性其实并没有这么多,所以想在这篇文章中跟大家分享我们项目目前使用到的一些特性,以及踩过的一些坑。...TypeScript的安装、查看、编译 npm i -g typescript tsc -v tsc fileName.ts 数据类型与类型注解 TypeScript 的强类型检查是其一大优势,通过明确的类型注解...,能够帮助开发者在代码中区分不同的数据类型,避免潜在的错误。...,id 是只读属性 函数声明 // 约定输入和返回值为number,y为可选参数,z为默认参数 function add(x:number, y?...let myVar: string | number; myVar = "NianGao"; myVar = 17; 类型断言是在某些情况下,开发者需要告诉 TypeScript 编译器某个值的具体类型

    7521

    类型声明,分类与使用

    any 类型时,可以在这个变量上执行任何操作,而 TypeScript 编译器不会给出类型错误。...let a:any='hello'a=123unknown类型与 any 类型相似,但 unknown 更加安全,因为它不允许你在不知道其确切类型的情况下对值进行任何操作。...readonly id: number; // 只读属性 name: string;};const person: Person = { id: 1, name: 'XiaoMu'};// 下面这行代码将会引发错误...如果写的类型为undefined,则不能不返回reAturn,如果为void,既可以返回return也可以不写9、函数重载与可调用注解模拟函数重载在 TypeScript 中,你可以使用联合类型来模拟函数重载...let myColor=0// 假设你有一个接受Color类型参数的函数function printColor(color: Color) { // ...}printColor(Color.Green

    7100
    领券