react(Ts)

TypeScript进阶指南
最新推荐文章于 2024-11-11 17:04:53 发布
原创 最新推荐文章于 2024-11-11 17:04:53 发布 · 596 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文深入探讨TypeScript的基础概念和高级特性，包括变量定义、数组与元组使用、函数类型声明、类与继承机制、修饰符作用范围以及静态属性方法等。此外还介绍了枚举类型的应用场景。

定义Ts变量
var 是一个函数体的作用域
let 定义变量，限制变量的作用范围。防止变量的重复定义(相同类型)
const 定义及赋值

定义数组有两种方法:
1.let myArr: number[] = [123,456]
2.let myArr: Array = [‘1’,‘2’]

元组类型 tuple
跟数组差不多，但是里面的元素是可以多个类型，编译出来的javaScript也是数组，
元素的个数是固定的，顺序不能变

函数指向返回值的类型
可以让调用的地方知道是什么类型的返回，以便进行处理

默认参数（=），可选参数（？），一般放到参数后面
默认参数可以不指定类型，会自动判断和计算

慎用any类型，可能会自己判断类型

类 class
class(模板) new 对象
数据(data) 行为(action) 行为可能是对数据进行操作

class继承
继承父类的数据和方法，就是属性和方法
调用方法是，先找自己本身对象的方法，如果没有就去找父级的
super代表父级

三个修饰符对成员属性和方法进行修饰
修饰符
public 公共的 任何属性和方法都可以在生成的对象中调用，默认就是public,只是省略了
private 私有的 ， 只有在内部对象内才能访问，生成的对象调用不了，
要调用私有方法和属性，可以在class里定义public的方法来调用
继承的对象也是不能够直接用生成的对象来访问
子类继承的时候也可以几层是由的属性和方法，也是要通过class里定义的public的方法来调用

protected收保护的，只有字啊内部class还有子类才能访问，生成的对象访问不了
要调用私有方法和属性，可以在class里定义public的方法来调用
继承的对象也是不能够直接用生成的对象来访问
子类继承的时候也可以几层是由的属性和方法，也是要通过class里定义的public的方法来调用
（这点根其他的语言有些不太一样）

private protecred 在子类的时候

权限范围 public >protected> private

construcror 构造方法
如果申明为protected
或者privote , 当前类不能 new
当父类申明为protected,子类重写constructor 方法后可以 new (子类可以new)
如果父类申明为private,子类不能new和extends
super在constructor 方法中是调用父类的构造方法，必要时，要传入参数
作用
1.但不想被实例化，而指向让子类继承后实例化，申请为protected的时候
2.都不想让子类和父类数理化或继承，可以申请为private
3.一般情况系，申请为public(或者不写)

Static 静态属性和方法
通过类似Person加方法名或属性来调用（比如Person.age）
默认是申明为public
如果是protected或private的话，当前类都不能调用，通过public的静态方法来调用
如果父类是protected或private的话，子类也能继承所有的静态方法和属性
子类还是不能调用protected或private方法和属性，只能通过public来调用
子类定义的方法（public）只有是父类定义为public或protected的才能访问，private的不能访问

枚举类型
它的值是数字序号，从 0 开始
代码可读性强
可能会常用于下拉框等应用

react ts react-router 6路由配置
初遇你时动了情
04-17 629
创建一个router.tsx文件在APP.tsx中引入。
react ts Echart地图散点地图
weixin_50639421的博客
11-30 626
react ts Echart地图散点地图
react---私有路由和权限判断（PrivateRoute + withRouter）
DcTbnk的博客
08-04 2839
me PrivateRoute.jsx 私有路由 import React from "react"; import { Route, Redirect } from "react-router-dom"; function PrivateRoute(props) { const isLogin = localStorage.getItem("token") ? true : false; return isLogin ? ( <Route path={props.p
TypeScript及React学习系列三：typescript中的类（下）
happydrink233的博客
07-15 334
typescript中的类 1. 类的定义 使用class关键字 class Person{ name:string; //定义属性，前面省略了public constrctor(n:string){//构造函数，实例化类的时候会触发 this.name = n; } getName():string{ return this.name; } setName(name:string):void{ this.name = name; } } let p = new Person("
ts类中的private和protected区别
晴天有何特别
09-25 8846
ts类中的private和protected区别 private 私有的。表示最隐私，最不能为外人知道的。 在类中如果声明一个属性为私有，则表示这个属性仅仅属于这个类。 仅仅能在这个类中进行在这个属性的访问。在子类和类的实现的对象中都不能访问。在子类可以通过调用使用这个属性的方法来间接来使用这个属性。 protected 被保护的。针对 对象。因为一个类可以化身为好多好多的对象。对于一些这些对象应...
react + ts 使用useState定义数组[],{}的数据提示类型“never”上不存在属性“url”。
m0_61265297的博客
11-11 316
【代码】使用useState定义的数据提示类型“never”上不存在属性“url”。
TS 中的private 是干什么用的
weixin_43867229的博客
04-23 1519
在 TypeScript 中，private（私有的） 是一个访问修饰符，它用于限制一个类的属性或方法的可见性。当一个属性或方法被标记为 private 时，它只能在其所在的类中被访问。在这个例子中，name 属性只能在 Person 类中被访问，不能在 Person 类外部被访问。可能读到这里 大部分同学可以get到private是干什么的了 但是又出现了新的。点击这里查看public定义吧~
react+ts+antd cron表达式组件
11-16
在这个"react+ts+antd cron表达式组件"项目中，开发者整合了这些技术来实现一个特定功能——Cron表达式编辑器。 Cron表达式是一种用于配置定时任务的格式，常见于Unix和Linux系统。它由七个字段组成，从左到右分别...
精选资源
React-Hooks-Ts:React + Hooks + Ts最佳实践
03-25
"React-Hooks-Ts: React + Hooks + Ts最佳实践"是一个深入探讨如何在React项目中有效利用Hooks和TypeScript的主题。这里我们将详细讲解React Hooks与TypeScript在实际应用中的关键知识点。 1. **React Hooks**： -...
使用antd-pro脚手架搭建react ts项目
zlzbt
10-12 843
在真实项目开发中，除了 Ant Design 这样的 UI 库，你可能会还会需要构建工具、路由方案、CSS 方案、数据流方案、请求库和请求方案、国际化方案、权限方案、Icons 方案，等等，才能完成一个完整的项目。我们基于业务场景的场景，推出了基于 React 的企业级应用框架 Umi，推荐你在项目中使用。Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架，也是蚂蚁集团的底层前端框架，已直接或间接地服务了 10000+ 应用。
这可能是你需要的React实战技巧
grooyo的博客
10-04 396
你可以看到不管 antd(react) 还是 element(vue) 中的弹窗组件都是渲染在 document.body 上的，而非当前组件所对应的 render 节点上。的使用，当你掌握了这两者，诸如 Toast、Dialog、Dropdown 大体都是一个实现原理。也是要执行比较逻辑，当入参数非常复杂时，这样优化其实是得不偿失的，所以具体情况要具体分析。总结一下，最后的这个组件有多种实现方式，这里只是很简单的演示一下，关键点在你要掌握。例子，实际是不需要考虑优化的，因为本身。
react开发笔记
lishixiang007的博客
12-28 216
react FACEBOOK 框架 虚拟DOM 组件化开发 原生JS的框架 (ES6+原生javascript) 优点 极速的渲染能力 虚拟DOM virtual DOM 高度组件化 组件之间高度复用 经历大量的测试 有一定的稳定性 虚拟DOM virtual DOM 虚拟DOM 就是在 真实DOM的基础上建立的一个抽象层 我们对数据和状态所做的任何改动，都会被自动且高效的...
ts中类的public、private
jiazhenyu_1126的博客
03-24 5061
ts - 类（class） public：定义为公有属性，默认为 public。 class Home { public role: string = "我家的孩子" getRole() { return this.role } } const h = new Home() console.log(h.getRole()) // 我家的孩子 console.log(h.role) // 我家的孩子 private：定义为私有属性，只能在类的内部访问，外部访问会报错。 class Ho
TS中public、private和protected详解
weixin_53156345的博客
10-08 2948
public访问修饰符允许在类的内部和外部访问属性和方法。private访问修饰符将属性和方法限制为只能在类的内部访问。protected访问修饰符允许在类的内部和子类中访问属性和方法，但对于类的外部来说是不可访问的。使用这些访问修饰符可以有效地控制类成员的可访问性，提供了封装、信息隐藏和继承等面向对象编程的特性。
TS中private和protected的区别
大风起兮云飞扬
03-04 1322
在 TypeScript 中，private 和 protected 是两种访问修饰符，用于限制类成员（如属性、方法等）的可见性和可访问性。它们的主要区别在于访问权限的宽松程度。
react+Typescript利用useState定义两层（多层）数组对象并进行赋值，以及如何在组件中map循环取数据渲染？
qq_37967853的博客
01-06 2419
react+Typescript利用useState定义两层（多层）数组对象并进行赋值，以及如何在组件中map循环取数据渲染？
TS类的访问类型 public private protected 的区别和使用体验
weixin_44134588的博客
02-03 3658
private protected public 访问类型 public 允许我在类的内外被调用 private 允许在类内被调用 protected 允许在类内及继承的子类中使用 写个demo来体验一下,更容易理解 // private protected public 访问类型 // public 允许在类的内外被调用 // private 允许在类内被调用 // protected 允许在类内及继承的子类中使用 class Person22 { protected name: st
ts中的类非常详细通俗易懂，看这一篇就够了
m0_51512211的博客
12-14 2360
ts中的类非常详细通俗易懂。从初识class到构造函数再到继承然后说super,还说到了abstract抽象类以及private，public,protected 的区别
React+TS基础
qq_45897636的博客
10-31 2158
项目的初始化 JSX的命名约定 JSX中的模块化CSS 组件的类型 State和Props react的事件处理 React的生命周期 hooks构子 useState的基本使用 useEffect的基本使用 useContext的基本使用 介绍HOC HOC组件的简单应用 props父传子 props子传父 props插槽 跨级传输 React的依赖注入 使用useContext消费 使用依赖注入实现全局状态管理 跨级传输
react ts
最新发布
03-24
React TS 是指将 React 框架与 TypeScript 结合起来使用的一种开发模式。TypeScript 是一种静态类型的编程语言，它是 JavaScript 的超集，在运行时会被编译成普通的 JavaScript 代码。结合 React 和 TypeScript 能够提高代码的质量、可靠性和可维护性。 以下是 React 使用 TypeScript 的一些关键点： 1. **组件类型安全** 当我们在创建 React 组件时，可以利用 TypeScript 提供的接口 (Interface) 或类型别名 (Type Alias)，明确指定 props 和 state 的数据结构以及它们的数据类型。这有助于减少潜在错误并提升开发者体验。 ```tsx interface ButtonProps { label: string; onClick: () => void; } const MyButton = ({label, onClick}: ButtonProps) => ( <button onClick={onClick}>{label}</button> ); ``` 2. **增强代码提示功能** TypeScript 可以让 IDE 更好地理解您的代码，并提供智能感知支持（如自动补全）。这对于大型项目尤其重要，因为它能帮助团队成员快速熟悉现有 API 并避免误用。 3. **第三方库兼容性** 很多流行的 React 第三方库都已经有了官方或者社区提供的声明文件 (.d.ts 文件), 这些声明文件描述了该库的所有公开方法及其参数等信息。因此即便是在集成外部依赖时也能享受同样的类型检查优势。 4. **工具链整合简单高效** 现代前端构建系统例如 Webpack/Babel 非常容易配置为同时处理 JSX+TSX 格式源码，使得迁移已有纯 JS 工程的成本较低。 总结来说，采用 React + TypeScript 技术栈可以让应用程序更健壮、更容易测试及扩展；同时也降低了调试难度因为很多问题会在编写阶段就被捕获到而不是等到部署之后才发现。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值