typescript

typescript 数组根据指定字段去重

this.listDataIn = data.Result.data; const uniqueItems: Item[] = Array.from( new Set(this.listDataIn.map(item => item.MyLandID)) ).map(id => { return o ......
数组 字段 typescript

[React Typescript] ElementType, ComponentType

The ElementTypetype helper is a bit unusal because it accepts some props and derives what types of components would be able to recieve those props. He ......
ComponentType ElementType Typescript React

[React Typescript] JSX.IntrinsicElements

interface IntrinsicElements { // HTML a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>; abbr: React.Detail ......
IntrinsicElements Typescript React JSX

typeScript学习-泛型

typeScript学习 泛型 为什么要用泛型?泛型定义。 泛型在类中的应用?封装一个面向对象的 ArrayList 类。 泛型默认值。 泛型约束。 泛型在Vue3 源码中的应用。 exends keyof + keyof 的联合应用。 泛型反向赋值。 具有以下特点的数据类型叫泛型: 特点一:定义时 ......
typeScript

typeScript学习-自定义守卫

typeScript学习 自定义守卫 function 函数名(形参:参数类型【参数类型大多数为any】): 形参 is A 类型{ return true or false } class Customer { pay(payMethod: BankPay | MobilePay) { if (i ......
typeScript

typeScript学习-类型守卫

typeScript学习 类型守卫 为什么要用类型守卫: 类型守卫定义:在 语句的块级作用域【if 语句内或条目运算符表达式内】 缩小变量的一种类型推断的行为。 类型守卫产生时机:TS 条件语句中遇到下列条件关键字时,会在语句的块级作用域内缩小变量的类型。这种类型推断的行为称作类型守卫(Type G ......
typeScript 类型

typeScript学习-类型断言、类型转换

typeScript学习 类型断言、类型转换 1、类型断言: 语法格式:A 数据类型的变量 as B 数据类型。 let b: B let c: C = b as C 理解:是绕过TS 编译检查,类型断言就是对编译器说:我是这个类型了,无需检查。 2、类型断言使用场景 export class Ve ......
类型 typeScript

[React Typescript] React.ReactNode > React.ReactElement = JSX.Element = React.JSX.Element

This is ReactNode: type ReactNode = | ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined This is React.ReactEle ......
React Element ReactElement Typescript JSX

采用typescript编写,实现ofd前端预览、验章。

前言 浏览器内核已支持pdf文件的渲染,这极大的方便了pdf文件的阅读和推广。ofd文件作为国产板式标准,急需一套在浏览器中渲染方案。 本人研究ofd多年,分别采用qt、c# 开发了ofd阅读器。本人非前端开发人员,对js、typescript并不熟悉,所以对开发web版阅读器迟迟没有下手。但是,本 ......
前端 typescript ofd

[React Typescript] React namespace

export = React; export as namespace React; declare namespace React { // // React Elements // type ElementType<P = any> = { [K in keyof JSX.IntrinsicEl ......
React Typescript namespace

[React Typescript] Inferring Type Arguments in Curried Hooks

import { DependencyList, useMemo, useState } from "react"; import { Equal, Expect } from "../helpers/type-utils"; const useCustomState = <TValue>(init ......
Typescript Inferring Arguments Curried React

[React Typescript] Function overload in React hook

import { useState } from "react"; import { Equal, Expect } from "../helpers/type-utils"; type UseStateReturnValue<T> = { value: T; set: React.Dispatch ......
React Typescript Function overload hook

Deno 中使用 @typescript/vfs 生成 DTS 文件

## 背景 前段时间开源的 [STC](https://github.com/long-woo/stc) 工具,这是一个将 OpenApi 规范的 Swagger/Apifox 文档转换成代码的工具。可以在上一篇([《OpenApi(Swagger)快速转换成 TypeScript 代码 - STC ......
typescript 文件 Deno DTS vfs

TypeScript学习

TypeScript 快速入门 ![](https://img2023.cnblogs.com/blog/2172992/202308/2172992-20230812101526008-1653263566.png) - JavaScript 是一种属于网络的高级脚本语言,已经被广泛用于 Web ......
TypeScript

[React Typescript] Discriminated Tuples in Custom Hooks

import { useEffect, useState } from "react"; export type Result<T> = | ["loading", undefined?] | ["error", Error] | ["success", T]; export const useDa ......
Discriminated Typescript Custom Tuples React

typeScript学习-类、静态数据、静态属性应用

typeScript学习 类、静态数据、静态属性应用 类: 定义:类就是拥有相同属性和方法的一系列对象的集合。 展开理解:类是一个模具,是从这该类包含的所有具体对象中抽象出来的一个概念,类定义了它包含的全体对象的静态特征和动态特征。 举例: people 类 静态特征【属性】name、age、add ......
静态 typeScript 属性 数据

typeScript学习-TS类型-其他特殊类型-可变元组

typeScript学习 可变元组: let people: [string, number, string, string, string] = ["wangwu", 23, "地址", '13312341234', '备注'] // 当前三个数据固定格式,后面数据不确认格式时 用可变元组 // ......
类型 typeScript TS

typeScript学习-TS类型-对象类型-Array

typeScript学习 对象类型-Array 数组和数组元素只读 const account = [10, 40, 50, 60, 90] as const // account[0] = 100 // 错误 export { } ......
类型 typeScript 对象 Array TS

typeScript学习-TS类型-其他特殊类型-元组(tuple)

typeScript学习 元组(tuple): 满足以下3点的数组就是元组 (1)在定义时每个元素的类型都是确定 (2)元素值的数据类型必须是当前元素定义的类型 (3)元素值的个数必须和定义时个数相同 let salary: [string, number, number, number, numb ......
类型 typeScript tuple TS

[React Typescript] Well typed a React Context provider

import React from "react"; import { Equal, Expect } from "../helpers/type-utils"; const createRequiredContext = <T extends any>() => { const context = ......
React Typescript provider Context typed

[React Typescript] Fixing type inference in a Custom React Hook

// Problem import { useState } from "react"; import { Equal, Expect } from "../helpers/type-utils"; export const useId = (defaultId: string) => { cons ......
React Typescript inference Fixing Custom

typeScript学习-interface和type 区别

typeScript学习 interface(接口) 和 type 区别 type 和接口类似,都用来定义类型,但 type 和 interface 区别如下: 区别1:定义类型范围不同 interface 只能定义对象类型或接口当名字的函数类型。 type 可以定义任何类型,包括基础类型、联合类型 ......
typeScript interface type

[Typescript] Don't compare generic function, instead compare function arguments and return type

Typescript has its problem that when you try to compare generic function to a function signature, you will run into issue. Because for one function, i ......

Typescript - 索引签名

索引签名是 TypeScript 中一个强大的特性,它允许我们在对象和类中使用动态的属性名称。通常情况下,我们会在对象或类中定义固定的属性,但有时我们需要处理具有动态属性名称的情况。这时,索引签名就派上了用场。 在这篇技术博文中,我们将介绍索引签名的使用方法和用例,将展示如何定义带有索引签名的接口... ......
Typescript 索引

vue3+typescript中的props

以上是子组件 以上是父组件 <script setup langs="ts"> let props = defineProps(['info','money'])//父子组件的通信需要用到defineProps方法去接受父组件想要传递的数据 console.info(props) </script> ......
typescript props vue3 vue

前端周刊第66期:TypeScript教程、ESM、React泡沫、htmx、测试文章

周刊同步发表于微信公众号“写代码的宝哥”,欢迎各位小伙伴前来关注 😄! ## 快讯 ![](https://img2023.cnblogs.com/blog/3251068/202308/3251068-20230814131754903-946778878.png) - 软一峰老师最近发布了[《 ......
前端 TypeScript 泡沫 周刊 教程

vue3+TypeScript 报红色波浪线

参考:https://blog.51cto.com/u_16175453/6664719 package.json里有typescript就:npm install 没有就:npm install typescript --save ......
波浪 TypeScript 红色 vue3 vue

[React Typescript] Generic Inference through Multiple Type Helpers

import { Equal, Expect } from "../helpers/type-utils"; interface Button<T> { value: T; label: string; } interface ButtonGroupProps<T> { buttons: Butto ......

[React Typescript] Passing Type Arguments To Components

import { ReactNode } from "react"; import { Equal, Expect } from "../helpers/type-utils"; interface TableProps<T> { rows: T[]; renderRow: (row: T) => ......

[React Typescript] Generics in Class Component

interface TableProps<T> { rows: T[]; renderRow: (row: T) => ReactNode; } export class Table<T> extends React.Component<TableProps<T>> { render(): Reac ......
Typescript Component Generics React Class