常用TS总结

基本用法

普通

 
const num: number = 10
const isStop: boolean = false
const title: string = '常用TS总结'
const curName: null = null
const curType: undefined = undefined
const birthday: Date = new Date()

对象

 
// type
type LoginParams = {
account: string
}
// interface
interface LoginParams {
account: string
}

不确定是否有此属性用 ?

 
interface Info {
id: string
name: string
birthday?: Date
}
const curInfo: Info = { id: 'dqe2e', name: 'weizwz' }
console.log(curInfo?.birthday) // undefined

数组

 
const nums: number[] = [1, 2, 3]
const answer: boolean[] = [false, true, false]
const names: string[] = ['w', 'e', 'i']

对象数组

 
interface Info {
id: string
}
const curInfos: Info[] = [ { id: 'dqe2e' }, { id: 'der24' } ]

函数

函数需要声明参数类型和返回值类型

 
// week: string 指参数的类型;最后的: string 指返回值类型
function getWeek(week: string): string {
return '星期' + week
}

箭头函数

 
const getWeek = (week: string): string => {
return '星期' + week
}
console.log(getWeek('六')) // '星期六'

没有返回值 用 void 表示

 
interface Cat {
weight: 5
}
const getName = (obj: Cat): void => {
console.log(obj.weight + '斤')
}
getName({ weight: 5 }) // '5斤'

any类型

any 类型表示没有任何限制,及时后续使用改变了类型也不会报错。但是并不推荐使用 any,否则使用 TS 也失去了意义。

 
let x: any = 'weizwz'
x = 1
console.log(x) // 不报错,输出 1

真正的使用场景可能是老项目的升级,你无法确定老旧的代码具体是什么类型;或者一些特殊情况,比如接口返回值类型不确定,或者后续使用时你要修改它的类型。

 
function getStatus(code: any): Boolean {
return (code === '200' || code === 'ok' || code === 200 || code === true)
}
console.log(getStatus(400)) // false

类型联合 |

某个变量可能是多个类型中的一个,用 | 来分隔

 
type Id = string | number
type stringBoolean = '1' | '0'

类型交叉 &

类型交叉一般用于多个类型组成的一个新类型,用 & 来连接

 
type Name = { name: string };
type User = Name & { age: number };
const zhangSan: User = { name: '张三', age: 18 }

类型断言

手动指定类型,写法是 值 as 类型 或 <类型>值
为什么要手动指定类型,是在某些特定情况下,我们已经确定这种类型是可以这样操作,但是编译器不确定,会报错,所以我们使用类型断言去告诉编译器这样做没问题。

 
// 我们获取到 id = name 界面元素
const $name = document.getElementById("name")
// 不是所有界面元素都有 value 属性,在这里我们已经确实我们拿的是 输入框元素,
// 所以使用类型断言告诉编译器,如果存在这个元素,它一定是输入框元素,有 value 属性
if ($name) {
($name as HTMLInputElement).value
}

type 和 interface

type 命令用来定义一个类型的别名;
interface 用来声明对象结构。

区别

  • type 能表示的任何类型组合; interface 只能表示对象结构的类型
  • type 后面需要用 =;interface 后面不需要 =
  • interface 可以继承自(extends)interface 或对象结构的 type;type 可以通过 & 做对象结构的继承
  • 多次声明的同名 interface 会进行声明合并;type 不允许多次声明,一个作用域内不允许有多个同名 type

示例

type 使用

 
type stringBoolean = '1' | '0'
type Position = {
x: number
y: number
}
type Position3D = Position & { z: number }
const startPosition: Position = { x: 0, y: 10 }
const startPosition3D: Position3D = { x: 0, y: 10, z: 20 }
// type类型不允许多次声明
type Position = { z: number } // 报错,因为名为 Position 的类型已经被声明

interface 使用

 
interface Position { x: number }
interface Position { y: number }
const startPosition: Position = { x: 0, y: 10 }
// 同名但有相同属性,要求相同属性的类型要一致,否则会报错
interface Position { x: string } // 报错,与刚开始定义的 x 类型冲突

继承扩展

 
interface Position3D extends Position {
z: number
}
const startPosition3D: Position3D = { x: 0, y: 10, z: 20 }

泛型

泛型一般用 T 表示,表示其中的参数/属性/返回值可以是任何类型,如果有多个泛型,可以使用其他字母。
主要使用场景:有些对象中的属性,或者方法里的参数,可能有多个类型,具体类型根据使用场景来定。

基础使用

 
// type 这里的<T>就相当于类型入参,实际使用时传入具体类型
type Empty<T> = T | undefined | null
const noData: Empty<[]> = []

多个泛型

 
interface Info<T, S> {
name: string
types: T[]
weight: S
}
const tom: Info<string, number> = { name: 'tom', types: ['cat', 'animal'], weight: 5 }
const idx: Info<number, string> = { name: 'idx', types: [1], weight: 'first' }

函数

 
// 函数 <T>是泛型写法;arr: T[] 是参数类型;:T 是返回值类型
function getFirst<T>(arr: T[]): T {
return arr[0]
}

箭头函数 <T,> 加逗号是为了避免编译程序把 <> 解析成 jsx

 
const getFirst = <T,>(arr: T[]): T => {
return arr[0]
}
const arr: number[] = [1, 2, 3]
console.log(getFirst<number>(arr), getFirst(arr)) // <number>可省略,打印出来都是 1

嵌套

使用嵌套可以提供代码复用率,如果类型之间差别点太多就没必要了。

 
interface Tom<T> {
name: string
type: T
}
interface People {
name: string
type: 'person'
}
interface Cat {
name: string
type: 'animal'
}
// 我的兄弟 jakeTom
const myBrother: Tom<People> = {
name: 'jakeTom',
type: {
name: 'my brother',
type: 'person'
}
}
// 我的猫咪 catTom
const myCat: Tom<Cat> = {
name: 'catTom',
type: {
name: 'cat',
type: 'animal'
}
}

特殊用法

动态变量名

Record<Keys, Type> 返回一个对象类型,参数 Keys 用作键名,参数 Type 用作键值类型。

 
type stringKey = Record<string, string>
// 处理动态变量名
const list: stringKey = { img_1: 'img/1.png', img_2: 'img/2.png', img_3: 'img/3.png' }
for (const key in list) {
console.log(list[key])
}
for(let i = 0; i < 3; i++) {
console.log(list['img_' + (i + 1)])
}

vue3中的TS

响应式数据

在 xxx.d.ts 里定义类型

 
interface Account = {
id: string
name: string
}

在 vue 界面里使用

 
// 简单类型可省略类型声明
const loading = ref(false)
const user = ref<Account>({
id: 'E2U1EU91U',
name: 'weiz'
})

参数传递

父组件使用

 
<script setup lang="ts">
import { ref } from 'vue'
const user = ref<Account>({
id: 'E2U1EU91U',
name: 'weiz'
})
</script>
<template>
<Children :account="user">
</template>

子组件接收参数

 
const props = defineProps<Account>()

如果没有声明 Account,则可以具体定义

 
const props = defineProps<{
id: string
name: string
}>()

组件实例类型

InstanceType<T> 是 ts 自带的类型,能够直接获取组件完整的实例类型。

子组件

 
<script setup lang="ts">
const open = () => { console.log('打开')}
// 子组件暴露方法
defineExpose({
open
})
</script>

父组件

 
<script setup lang="ts">
import { ref } from 'vue'
import Children from './Children.vue'
type ChildCtx = InstanceType<typeof Children>
// 要和子组件的 ref 名称一致
const childrenRef = ref<ChildCtx | null>(null)
// 调用子组件方法
const openChildren = () => {
childrenRef.value?.open()
}
</script>
<template>
<Children ref='childrenRef'/>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/671723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker常用10条容器操作命令

Docker 中一些常用的容器操作命令&#xff0c;我们可以根据需要使用这些命令来管理和操作 Docker 容器。我们这次以Hell-world这个镜像为例来说明&#xff1a; 1. docker pull hello-world #拉取hell-world镜像 2. docker images # 查看本地拉取的镜像 3. docker run hello…

Maven:项目无法产生Maven Dependencies且无法update project报cannot nest错误

找自己出错项目的.classpath文件&#xff0c;打开&#xff0c;ctrlf&#xff0c;找是否有以下文件&#xff0c;如果没有在末尾加进去&#xff0c;再refresh项目即可&#xff1a; <classpathentry kind"con" path"org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINE…

【python】绘制爱心图案

以下是一个简单的Python代码示例&#xff0c;它使用turtle模块绘制一个代表爱和情人节的心形图案。 首先&#xff0c;请确保计算机上安装了Python和turtle模块。然后&#xff0c;将以下代码保存到一个.py文件中&#xff0c;运行它就可以看到爱心图案的绘制过程。 import turt…

20240203在Ubuntu20.04.6下配置stable-diffusion-webui.git

20240203在Ubuntu20.04.6下配置stable-diffusion-webui.git 2024/2/3 11:55 【结论&#xff1a;在Ubuntu20.04.6下&#xff0c;生成512x512分辨率的图像&#xff0c;大概需要11秒钟&#xff01;】 前提条件&#xff0c;可以通过技术手段上外网&#xff01;^_首先你要有一张NVID…

2024清洁能源、环境与智慧城市国际研讨会(ISCEESC2024)

2024清洁能源、环境与智慧城市国际研讨会(ISCEESC2024) 会议简介 2024年清洁能源、环境与智慧城市国际研讨会&#xff08;ISCEESC2024&#xff09;将在中国丽江举行。本次会议主要围绕清洁能源、环境和智慧城市等研究领域&#xff0c;旨在为该研究领域的专家学者提供一个国际…

用云手机打造tiktok账号需要注意些什么?

随着tiktok平台的火热&#xff0c;越来越多的商家开始尝试更高效的tiktok运营方法。其中&#xff0c;tiktok云手机作为一种新科技引起了很多人的注意&#xff0c;那么用云手机运营tiktok需要注意些什么&#xff1f;下文将对此进行详细解析。 1. 不是所有的云手机都适合做tiktok…

【分享】如何运用数字I/O来保护继电器

1.简述 在开关系统中&#xff0c;短路或者是开路的情况下&#xff0c;由于存在着额外的电流或者是电压&#xff0c;继电器往往会过载。所有的继电器都有一个最大的承载电流和热切换功率&#xff0c;如果超出了这个范围&#xff0c;会增加继电器焊接在一起的风险&#xff0c;从…

项目02《游戏-10-开发》Unity3D

【完成本集功能后共享1-10集整套代码】 基于 项目02《游戏-09-开发》Unity3D &#xff0c; 任务&#xff1a;传送至其他场景&#xff0c; 首先在场景中加入传送门&#xff0c; 设置人物标签&#xff0c; using UnityEngine; using UnityEngine.SceneManagement; u…

代码随想录算法训练营第三十七天|1049. 最后一块石头的重量 II ,494. 目标和 , 474.一和零

1049. 最后一块石头的重量 II 视频讲解&#xff1a;https://www.bilibili.com/video/BV14M411C7oV https://programmercarl.com/1049.%E6%9C%80%E5%90%8E%E4%B8%80%E5%9D%97%E7%9F%B3%E5%A4%B4%E7%9A%84%E9%87%8D%E9%87%8FII.html 本题其实就是尽量让石头分成重量相同的两堆&a…

2024-02-05(Hive)

1.Hive中抽样表数据 对表进行随机抽样是非常有必要的。 大数据体系下&#xff0c;在真正的企业环境中&#xff0c;很容易出现很大的表&#xff0c;比如体积达到TB级别的。 对这种表一个简单的SELECT * 都会非常的慢&#xff0c;哪怕LIMIT 10想要看10条数据&#xff0c;也会走…

树莓派4b连接WQ9201外置无线网卡命令行配置详解

树莓派4B连接WQ9201无线网卡 接线方式 蓝色的线来连接树莓派和WQ9201demo板&#xff0c;USB接树莓派的USB接口&#xff0c;microUSB一端接demo板靠近天线部分的microUSB口。 驱动和固件准备 驱动直接放在树莓派系统的任意目录&#xff0c;目前配置则是将驱动放在树莓派的主目…

使用PaddleNLP识别垃圾邮件:用BERT做中文邮件内容分类,验证集准确率高达99.6%以上(附公开数据集)

使用PaddleNLP识别垃圾邮件:用BERT做中文邮件内容分类,验证集准确率高达99.6%以上(附公开数据集)。 要使用PaddleNLP和BERT来识别垃圾邮件并做中文邮件内容分类,可以按照以下步骤进行操作: 安装PaddlePaddle和PaddleNLP:首先,确保在你的环境中已经安装了PaddlePaddle和…

《Git 简易速速上手小册》第1章:Git 基础(2024 最新版)

文章目录 1.1 Git 简介&#xff1a;版本控制的演变1.1.1 基础知识讲解1.1.2 重点案例&#xff1a;协作开发流程优化案例&#xff1a;功能开发与分支策略 1.1.3 拓展案例 1&#xff1a;代码审查与合并1.1.4 拓展案例 2&#xff1a;冲突解决 1.2 安装和配置 Git&#xff1a;首次设…

代码随想录算法训练营第41天 | 343.整数拆分 96.不同的二叉搜索树

整数拆分 dp数组的含义&#xff1a;dp[i] 表示将 i 拆分所能得到的最大乘积。递推公式&#xff1a;dp[i] max(dp[i], max(j * (i - j), j * dp[i - j]))。我们对 j 从1开始遍历&#xff0c;检验不同的拆分方式能产生的最大乘积。对于拆分方式的选择&#xff0c;要么拆成 j 和 …

关联语句join与合并语句union

前言 在当今数据驱动的世界中&#xff0c;数据库操作是数据分析和处理的关键步骤之一。JOIN语句作为关系型数据库中连接表的重要工具&#xff0c;为我们提供了强大的数据整合能力。本博客将深入探讨各种JOIN语句的用法和应用场景&#xff0c;帮助读者更好地理解如何通过连接操作…

Win32 SDK Gui编程系列之--ListView自绘OwnerDraw(续)

通过所有者绘制的列表视图(2) 所有者绘制列表视图的基础已在前一页中说明。本页将展示如何在所有者绘制列表视图中显示数据库表数据。 1、访问日志 正如在另一个页面中所述,本网站的访问日志目前是通过SQLite3数据库管理的。 以下是上述程序执行的结果。为…

【MATLAB】使用随机森林在回归预测任务中进行特征选择(深度学习的数据集处理)

1.随机森林在神经网络的应用 当使用随机森林进行特征选择时&#xff0c;算法能够为每个特征提供一个重要性得分&#xff0c;从而帮助识别对目标变量预测最具影响力的特征。这有助于简化模型并提高其泛化能力&#xff0c;减少过拟合的风险&#xff0c;并且可以加快模型训练和推理…

视频无损放大修复工具Topaz Video AI 新手入门教程

想要自学Topaz Video AI &#xff1f;Topaz Video AI 如何使用&#xff1f;这里给大家带来了视频无损放大修复工具Topaz Video AI 新手入门教程&#xff0c;快来看看吧&#xff01; 下载&#xff1a;Topaz Video AI for mac 导入您的文件 有两种方法可以将文件导入 Topaz Vid…

echarts 一条折线图上显示不同颜色

文档树懒学堂&#xff1a;ECharts visualMap 代码实例及对应注释 - 树懒学堂 封装的echarts 组件代码&#xff1a; <template> <div :style"{ height: 100% }"> <div class"foldLine" ref"foldLine" :style"{ width: width…

【大数据】Flink on YARN,如何确定 TaskManager 数

Flink on YARN&#xff0c;如何确定 TaskManager 数 1.问题2.并行度&#xff08;Parallelism&#xff09;3.任务槽&#xff08;Task Slot&#xff09;4.确定 TaskManager 数 1.问题 在 Flink 1.5 Release Notes 中&#xff0c;有这样一段话&#xff0c;直接上截图。 这说明从 …