文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

深度讲解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

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

深度讲解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'....当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。

59730

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

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

52010

【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(泛型)：泛型让我们的数据结构更为抽象可复用，因为这种抽象，也让它有时候不是那么好理解。

92520

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

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

3.4K40

从 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

2.8K20

用TypeScript编写React的最佳实践

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

4.7K51

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所替代。

10.3K30

超性感的React Hooks（三）：useState

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

2.3K20

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

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

20830

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。 技术本身没有好坏，长远看，弱类型语言并不是那么的友好。

69920

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

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

1.9K31

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

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

17910

TS_React:Hook类型化

在前几天，我们开辟了--「TypeScript实战系列」，主要讲TS在React中的应用实战。 大家如果对React了解/熟悉的话，想必都听过Hook。在当下的React开发中，函数组件大行其道。...而Hook就是为了给「函数组件添加内部状态还有处理副作用」的。换句话说，Hook已经在现在的React的开发中， 变得不可替代。 而，今天我们就简单的聊聊，如何利用TS对Hook进行类型化处理。...依赖类型推断 ❝在绝大部分，TS都可以根据hook中的值来推断它们的类型：也就是我们常说的「类型推断」 ❞ 何为类型推断，简单来说：「类型推断」就是「基于赋值表达式推断类型的能⼒」。...要做到这一点，在 React 中我们必须用 forwardRef 来「包装组件」。...类型化自定义hook ❝「类型化自定义hook基本上和类型化普通函数一样」 ❞ 针对如何类型化普通函数，在一些教程中很多，一搜一大把。这里也不过多描述。 我们来看一个比较有意思的例子。

2.4K30

TS_React:使用泛型来改善类型

泛型Generics 是TS中的一个重要部分，这篇文章就来简单介绍一下其概念并在React中的应用。 1. 泛型Generics 是个啥？...箭头函数在jsx中的泛型语法 在前面的例子中，我们只举例了如何用泛型定义常规的函数语法，而不是ES6中引入的箭头函数语法。...在React中使用泛型 现在我们已经理解了泛型的概念，我们可以看看如何在React代码中应用它。...利用泛型处理Hook ❝Hook只是普通的JavaScript函数，只不过在React中有点额外调用时机和规则。由此可见，在Hook上使用泛型和在普通的 JavaScript 函数上使用是一样的。...select组件怎么会知道 Type 可以是一个数字或一个字符串，而不是其他？ 后记 「分享是一种态度」。 参考资料： React_Ts_泛型 重写TS TS官网

5.1K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券