文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

深度讲解TS：这样学TS，迟早进大厂【13】：内置对象

博主是一个专注于前端开发的程序猿~ 曾经主做于vue，react，小程序，uniapp，RN等各大框架~ 现在主攻web安全，数据加密，项目架构，性能优化~ 技术之路，任道重远。...TS系列地址： 21篇文章带你玩转ts 内置对象 JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。...TypeScript 核心库的定义文件§ TypeScript 核心库的定义文件中定义了所有浏览器环境需要用到的类型，并且是预置在 TypeScript 中的。...当你在使用一些常用的方法的时候，TypeScript 实际上已经帮你做了很多类型判断的工作了，比如： Math.pow(10, '2'); // index.ts(1,14): error TS2345...上面的例子中，addEventListener 方法是在 TypeScript 核心库中定义的： interface Document extends Node, GlobalEventHandlers

92730
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    深度讲解TS：这样学TS，迟早进大厂【19】：泛型

    TS系列地址： 21篇文章带你玩转ts # 泛型 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。...我们在函数名后添加了 ``，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array 中即可使用了。...泛型约束§ 在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法： function loggingIdentity(arg: T): T { console.log...(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'....当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。

    83930

    前端定期小复盘, 每期都有小收获(一)

    所以为了让自己, 也让大家有个持续的提升, 我会定期总结复盘一些自己工作, 学习中遇到的问题, 并给出自己的解答, 最终以文章的形式分享出来, 让大家少走弯路, 每周都能学到新知识....抱错就解决了, 同时平时工作中注意这样的简写也可以让我们的代码更简洁, 如果你遇到了这样的情况, 是不是就知道怎么解决了呢 Unexpected string concatenation image.png...公共组件库发布npm之后对于不同react版本出现报错 这个问题主要是在我前一阵子开源的滑动验证组件 react-slider-vertify 中暴露出来的, 当时也是第一时间找到了问题的答案: 是因为同一个工程里存在两个...原来我在 组件库的 dependencies 中依赖了 react16.9 版本, 但是项目中依赖的是 react17.0 版本, 所以组件库开发最佳的实践是把第三方依赖包配置在 peerDependencies...如果你或者你的朋友, 遇到这样的问题, 是不是就知道怎么解决了呢 3. tsconfig中compilerOptions选项各个属性及其含义 "compilerOptions": { "incremental

    75310

    【TS】217-TypeScript - 一种思维方式

    举例来说，比如说我们用 TS 定义一个函数，TS 会要求我们对函数的参数及返回值有一个明确的定义，简单的定义一些类型，却能帮助我们定位函数的作用，比如说我们设置其返回值类型为 void ，就明确的表明了我们想利用这个函数的副作用...2.8 — medium The TypeScript Tax — medium 在阅读上述资料的过程中，我使用 TS 重写了一个基于 CRA 的简单但是很完整的前端项目，现在觉得，使用 TS 来开发工作中的常见需求...在命令行中执行下述命令即可生产可直接使用的项目： # 使用 yarn $ yarn create react-app TS-react-playground --typescript # 使用 npx...$ npx create-react-app TS-react-playground --typescript 随后如果需要，可以在tsconfig.json中添加额外的配置。...后来发现，当你知道有这么一个功能，在实际使用过程中，就会发现能用得着，比如说迁移遗留项目时。 Generics(泛型)：泛型让我们的数据结构更为抽象可复用，因为这种抽象，也让它有时候不是那么好理解。

    1.1K20

    React 播客专栏 Vol.6｜TypeScript 是什么？为啥写 React 要加它？

    欢迎回到《前端达人 · React 播客书单》第 6 期（正文内容为学习笔记摘要，音频内容是详细的解读，方便你理解），请点击下方收听 你是不是刚学 React，结果发现教程里全是 .tsx 后缀、还动不动加个冒号加个类型...TypeScript，简称 TS，是由微软打造的 JavaScript 超集。什么意思？简单说，你所有能写的 JS 代码在 TS 里都能写，只不过它多了个强大武器：类型系统。...支持大项目的重构和模块管理 你改一个组件名、改一个接口字段名，TS 会全项目跟踪提醒你改哪里，不怕改崩项目。 一句话总结：TS 让你的开发体验从“野路子”变“企业级”。...： const handleClick = (e: React.MouseEvent) => { // ... }; 这些小细节，在 TS 的加持下都更规范、...✅ 总结 Key Takeaways： TypeScript 是 JavaScript 的强类型升级版 它的类型系统帮你在开发阶段发现问题 支持 React 的组件、事件、状态进行强类型约束 类型推断让代码更简洁

    39410

    用 Redux 做状态管理，真的很简单🦆！

    集中管理： 集中管理应用的状态和逻辑可以让你开发出强大的功能，如 撤销/重做、 状态持久化 等等。 可调试： Redux DevTools 让你 轻松追踪 到 应用的状态在何时、何处以及如何改变。...Store（存储） 中 单一数据源使得同构应用开发变得容易，将状态在统一的 对象树 中维护管理也会更加容易！...(4) 纯函数更新 state 纯函数： 相同的输入，总是会得到相同的输出，并且在执行过程中没有任何副作用的函数。..."; // 在 store/index.ts 中声明的类型 // 借助 createSlice 创建 reducer、action const CounterSlice = createSlice({...，是不是会有一种 React 和 Redux 就是俩亲兄弟的感觉？？？

    4.2K40

    从 0 到 1 搭建一个企业级前端开发规范

    因为 tsconfig.json 中的编译选项仅仅针对代码类型检查，而不是代码编译,因此不需要让 TypeScript 生成编译文件 以下是tsconfig.json中一些设置的解释 lib: TS 需要引用的库...关闭了explicit-module-boundary-types,Typescript 中,必须明确指定函数的返回值类型。...return 1; }; TS 中可以通过类型推断判断出函数的返回值类型，因此可以关闭此 Lint 添加 NPM 脚本 { "script": { "lint-staged:js": "...通过在“设置”中勾选“保存时进行格式化”选项， 就可以在文件保存时使用 Prettier 进行自动格式化 ?...{js,jsx,tsx,ts,less,md,json}": ["prettier --write"] } } 在每次 git commit 之前会进入工作区文件扫描，自动修复 eslint/stylelint

    3.6K20

    用TypeScript编写React的最佳实践

    React 和 TypeScript 如何一起使用 在开始之前，让我们回顾一下 React 和 TypeScript 是如何一起工作的。...一个经常被提到的常见问题是 TypeScript 是否编译你的 React 代码。TypeScript 的工作原理类似于下面的方式： TS：“嘿，这是你所有的UI代码吗？” React：“是的！”...在第一个例子中，我们使用函数声明式写法，我们注明了这个函数返回值是 React.ReactNode 类型。相反，第二个例子使用了一个函数表达式。...因为第二个实例返回一个函数，而不是一个值或表达式，所以我们我们注明了这个函数返回值是 React.FC 类型。 记住这两种方式可能会让人混淆。这主要取决于设计选择。...如果您希望看到它的实际效果，可以在GitHub上看到这个示例。 https://github.com/jsjoeio/react-ts-example

    5.6K51

    超性感的React Hooks（三）：useState

    那么也就意味着，之前在class中由于this带来的困扰就自然消失了。 Hooks Hooks并不是神秘，它就是函数式组件。更准确的概述是：有状态的函数式组件。...useState 每次渲染，函数都会重新执行。我们知道，每当函数执行完毕，所有的内存都会被释放掉。因此想让函数式组件拥有内部状态，并不是一件理所当然的事情。...当然，也不是完全没有办法，useState就是帮助我们做这个事情。 从上一章再谈闭包中我们知道，useState利用闭包，在函数内部创建一个当前函数组件的状态。并提供一个修改该状态的方法。...因此，我们只要在这个模块中定义一个变量，并且在函数组件中访问，那么闭包就有了。 因此，将变量定义到函数的外面。...但也不是完全没有隐患，因为善后工作还没有做，因为这个闭包中的变量，即使在组件被销毁了，它的值还会存在。当新的组件实例被渲染，param就无法得到初始值了。

    2.8K20

    【总结】1773- 前端简洁架构

    即使我们跳过了其他的层，也会更容易使用提取出来的领域进行工作和重构，因为它并没有分布在代码库中。其他层可以根据需要添加。...众所周知，没有副作用的函数和系统更容易工作和调试。并且我们的大多数域函数已经被编写为纯函数。 未了让整洁的转换层和带有副作用的外界交互可以整合起来，我们可以将应用层作为一个非纯净的上下文来使用。...在 API 和函数签名方面，我们希望将用户和购物车作为参数传递，并让函数自行完成其他所有操作。...目前，orderProducts 函数很难在与React分离的情况下进行测试，这是不好的。理想情况下，应该能够以最小的工作量进行测试。...在这个特定的应用程序中，我认为设置依赖注入没有太多意义。这会分散注意力并使代码变得过于复杂。而且在React和钩子函数的情况下，我们可以将它们用作返回指定接口实现的“容器”。

    69530

    React实战精讲(React_TSAPI)

    ---- 箭头函数在jsx中的泛型语法 在前面的例子中，我们只举例了如何用泛型定义常规的函数语法，而不是ES6中引入的箭头函数语法。...---- TS_React:Hook类型化 类型推断 ❝在绝大部分，TS都可以根据hook中的值来推断它们的类型：也就是我们常说的「类型推断」 ❞ 何为类型推断，简单来说：「类型推断」就是「基于赋值表达式推断类型的能...在 React 中，React 「不允许ref通过props传递」，因为ref是组件中固定存在的，在组件调和的过程中，会被特殊处理，而forwardRef就是为了解决这件事而诞生的，让ref可以通过props...return：「是必须的，是一个React元素」，不负责组件实际渲染工作，由React自身根据此元素去渲染出DOM。 render 是「纯函数」，不能执行this.setState。...在React v18中，render函数已经被createRoot所替代。

    11.7K30

    【Hybrid开发高级系列】ReactNative(二) —— React Native调试专题

    1.3 自动重载         你可以通过让你的app在你改变代码时自动重载来加快你的开发速度。自动重载可以在开发者菜单中选择“Enable Live Reload”来打开。         ...对于下面这些情况你可能需要重构你的app来让改变生效：     ▪ 你添加了新的资源到你原生app的包中，比如iOS的Images.xcassets中的图片或者Android的res/drawable文件夹...现在还不可能在Chrome开发者工具中使用“React”tab来检查app小部件。你可以使用Nuclide的“React NativeInspector”作为工作区。...比如说，如果你设置REACT_DEBUGGER=”node/path/to/launchDebugger.js–port2345–type ReactNative”，然后node/path/to/launchDebugger.js–port.../app/src/main/java/com/{yourAppName}/MainApplication.java中，添加函数： public void onCreate() {     super.onCreate

    1.1K20

    9102年，隔壁公司新来的女实习生问我什么是TypeScript ？

    TypeScript不是一个高深的技术，它不过是一个javascript的超集，那么什么是超集呢？...其实就是原生ES6语法+Type类型 强烈建议阅读阮一峰老师的ES6入门 我们来看下 TypeScript的工作方式： 全局下载TypeScript 手动编译TS文件变成js文件 npm install...如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。...使用传统的 react脚手架 在 Create React App 中使用 TypeScript npx create-react-app my-app --typescript typescript...大型项目，可以上ts，还是要上ts，中小型项目，看工期，看你是否打算在时间允许情况下尝试使用ts。 技术本身没有好坏，长远看，弱类型语言并不是那么的友好。

    94220

    React组件设计实践总结02 - 组件的组织

    在 React 中, 组件就是模块. 单一职责要求将组件限制在一个’合适’的粒度. 这个粒度是比较主观的概念, 换句话说’单一’是一个相对的概念....我个人觉得单一职责并不是追求职责粒度的’最小’化, 粒度最小化是一个极端, 可能会导致大量模块, 模块离散化也会让项目变得难以管理. 单一职责要求的是一个适合被复用的粒度....在实际的 React 开发中, 非受控组件的场景非常少, 我认为自定义组件都可以忽略这种需求, 只提供完全受控表单组件, 避免组件自己维护缓存状态 ---- 4....终端的碎片化让前端的开发工作越来越有挑战性....当你在不清楚当前文件的目录上下文时, 你不知道具体模块在哪; 即使你知道当前文件的位置, 你也需要跟随导入路径在目录树中向上追溯在能定位到具体模块. 所以这种相对路径是比较反人类的.

    2.4K31

    Claude Code代码规范守护者子代理实战指南：打造你的团队代码质量管家

    1.1 代码规范的独特挑战 团队开发中，代码风格不统一就像乐队演奏时各弹各的调： // 场景对比：团队中不同开发者的代码风格 // ❌ 开发者A的风格 function calc_user_score...在代码质量门槛和CI/CD管道集成时主动使用。 model: sonnet --- 你是一位代码质量专家，专注于在团队和项目间建立并执行一致的开发标准。...CI管道中的性能回归检测 8....规范 'react/prop-types': 'off', // 使用TypeScript 'react/react-in-jsx-scope': 'off', // React 17...自动执行：工具强制而非人工检查 持续改进：代码质量稳步提升 降低成本：减少审查和维护时间 知识传承：规范就是最好的文档 记住：好的代码规范不是限制创造力，而是让团队专注于解决问题而不是争论风格。

    97710

    TypeScript 类型体操，无非是语法过度嵌套而已

    他跟我吐槽了一通，然后问我是不是他使用 TS 的姿势不对，为什么感觉到的全是痛苦。...这，绝对不是学习和使用 TS 的正确方向。这样的思路，也无法利用 TS 给我们的工作带来任何便利和效率上的提升，反而是极大的降低了工作效率。...以我之前在 React 知命境中，自定义 hook 的一个案例为例，在使用层面，我的写法是这样的 const { loading, setParam, list = [], error...他厉害的地方就在这里，我们会发现，虽然没有任何 TS 语法的痕迹在，但是类型已经被明确好了。包括函数的入参，返回值，所有的细节都有。 那么问题的关键就是，如何做到的呢？...在列举一个例子，很多年前我在 github 上基于 react hooks 封装了一个小型的状态管理工具 moz，我也做到了使用时无 TS 痕迹，能够自动推导出定义在 store 中的具体数据类型 地址

    73610
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券