翼度科技»论坛 编程开发 JavaScript 查看内容

常用TS总结

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
自己常用的 TS 写法总结,应该会一直更新。可使用 TS在线编译 校验 TS 语法。
基本用法

普通
  1. const num: number = 10
  2. const isStop: boolean = false
  3. const title: string = '常用TS总结'
  4. const curName: null = null
  5. const curType: undefined = undefined
  6. const birthday: Date = new Date()
复制代码
对象
  1. // type
  2. type LoginParams = {
  3. <template>
  4. <template>
  5.   <Children ref='childrenRef'/>
  6. </template><Children :account="user">
  7. </template>account: string
  8. }
  9. // interface
  10. interface LoginParams {
  11. <template>
  12. <template>
  13.   <Children ref='childrenRef'/>
  14. </template><Children :account="user">
  15. </template>account: string
  16. }
复制代码
不确定是否有此属性用 ?
  1. interface Info {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>id: string
  7. <template>
  8. <template>
  9.   <Children ref='childrenRef'/>
  10. </template><Children :account="user">
  11. </template>name: string
  12. <template>
  13. <template>
  14.   <Children ref='childrenRef'/>
  15. </template><Children :account="user">
  16. </template>birthday?: Date
  17. }
  18. const curInfo: Info = { id: 'dqe2e', name: 'weizwz' }
  19. console.log(curInfo?.birthday) // undefined
复制代码
数组
  1. const nums: number[] = [1, 2, 3]
  2. const answer: boolean[] = [false, true, false]
  3. const names: string[] = ['w', 'e', 'i']
复制代码
对象数组
  1. interface Info {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>id: string
  7. }
  8. const curInfos: Info[] = [ { id: 'dqe2e' }, { id: 'der24' } ]
复制代码
函数

函数需要声明参数类型和返回值类型
  1. // week: string 指参数的类型;最后的: string 指返回值类型
  2. function getWeek(week: string): string {
  3. <template>
  4. <template>
  5.   <Children ref='childrenRef'/>
  6. </template><Children :account="user">
  7. </template>return '星期' + week
  8. }
复制代码
箭头函数
  1. const getWeek = (week: string): string => {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>return '星期' + week
  7. }
  8. console.log(getWeek('六')) // '星期六'
复制代码
没有返回值 用 void 表示
  1. interface Cat {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>weight: 5
  7. }
  8. const getName = (obj: Cat): void => {
  9. <template>
  10. <template>
  11.   <Children ref='childrenRef'/>
  12. </template><Children :account="user">
  13. </template>console.log(obj.weight + '斤')
  14. }
  15. getName({ weight: 5 }) // '5斤'
复制代码
any类型

any 类型表示没有任何限制,及时后续使用改变了类型也不会报错。但是并不推荐使用 any,否则使用 TS 也失去了意义。
  1. let x: any = 'weizwz'
  2. x = 1
  3. console.log(x) // 不报错,输出 1
复制代码
真正的使用场景可能是老项目的升级,你无法确定老旧的代码具体是什么类型;或者一些特殊情况,比如接口返回值类型不确定,或者后续使用时你要修改它的类型。
  1. function getStatus(code: any): Boolean {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>return (code === '200' || code === 'ok' || code === 200 || code === true)
  7. }
  8. console.log(getStatus(400)) // false
复制代码
类型联合 |

某个变量可能是多个类型中的一个,用 | 来分隔
  1. type Id = string | number
  2. type stringBoolean = '1' | '0'
复制代码
类型交叉 &

类型交叉一般用于多个类型组成的一个新类型,用 & 来连接
  1. type Name = { name: string };
  2. type User = Name & { age: number };
  3. const zhangSan: User = { name: '张三', age: 18 }
复制代码
类型断言

手动指定类型,写法是 值 as 类型 或 值。
为什么要手动指定类型,是在某些特定情况下,我们已经确定这种类型是可以这样操作,但是编译器不确定,会报错,所以我们使用类型断言去告诉编译器这样做没问题。
  1. // 我们获取到 id = name 界面元素
  2. const $name = document.getElementById("name")
  3. // 不是所有界面元素都有 value 属性,在这里我们已经确实我们拿的是 输入框元素,
  4. // 所以使用类型断言告诉编译器,如果存在这个元素,它一定是输入框元素,有 value 属性
  5. if ($name) {
  6. <template>
  7. <template>
  8.   <Children ref='childrenRef'/>
  9. </template><Children :account="user">
  10. </template>($name as HTMLInputElement).value
  11. }
复制代码
type 和 interface

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


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

type 使用
  1. type stringBoolean = '1' | '0'
  2. type Position = {
  3. <template>
  4. <template>
  5.   <Children ref='childrenRef'/>
  6. </template><Children :account="user">
  7. </template>x: number
  8. <template>
  9. <template>
  10.   <Children ref='childrenRef'/>
  11. </template><Children :account="user">
  12. </template>y: number
  13. }
  14. type Position3D = Position & { z: number }
  15. const startPosition: Position = { x: 0, y: 10 }
  16. const startPosition3D: Position3D = { x: 0, y: 10, z: 20 }
  17. // type类型不允许多次声明
  18. type Position = { z: number } // 报错,因为名为 Position 的类型已经被声明
复制代码
interface 使用
  1. interface Position { x: number }
  2. interface Position { y: number }
  3. const startPosition: Position = { x: 0, y: 10 }
  4. // 同名但有相同属性,要求相同属性的类型要一致,否则会报错
  5. interface Position { x: string } // 报错,与刚开始定义的 x 类型冲突
复制代码
继承扩展
  1. interface Position3D extends Position {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>z: number
  7. }
  8. const startPosition3D: Position3D = { x: 0, y: 10, z: 20 }
复制代码
泛型

泛型一般用 T 表示,表示其中的参数/属性/返回值可以是任何类型,如果有多个泛型,可以使用其他字母。
主要使用场景:有些对象中的属性,或者方法里的参数,可能有多个类型,具体类型根据使用场景来定。
基础使用
  1. // type 这里的<T>就相当于类型入参,实际使用时传入具体类型
  2. type Empty<T> = T | undefined | null
  3. const noData: Empty<[]> = []
复制代码
多个泛型
  1. interface Info<T, S> {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>name: string
  7. <template>
  8. <template>
  9.   <Children ref='childrenRef'/>
  10. </template><Children :account="user">
  11. </template>types: T[]
  12. <template>
  13. <template>
  14.   <Children ref='childrenRef'/>
  15. </template><Children :account="user">
  16. </template>weight: S
  17. }
  18. const tom: Info<string, number> = { name: 'tom', types: ['cat', 'animal'], weight: 5 }
  19. const idx: Info<number, string> = { name: 'idx', types: [1], weight: 'first' }
复制代码
函数
  1. // 函数 <T>是泛型写法;arr: T[] 是参数类型;:T 是返回值类型
  2. function getFirst<T>(arr: T[]): T {
  3. <template>
  4. <template>
  5.   <Children ref='childrenRef'/>
  6. </template><Children :account="user">
  7. </template>return arr[0]
  8. }
复制代码
箭头函数<template>
<template>
  <Children ref='childrenRef'/>
</template><Children :account="user">
</template>加逗号是为了避免编译程序把<template>
<template>
  <Children ref='childrenRef'/>
</template><Children :account="user">
</template>解析成 jsx
  1. const getFirst = <T,>(arr: T[]): T => {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>return arr[0]
  7. }
  8. const arr: number[] = [1, 2, 3]
  9. console.log(getFirst<number>(arr), getFirst(arr)) // <number>可省略,打印出来都是 1
复制代码
嵌套

使用嵌套可以提供代码复用率,如果类型之间差别点太多就没必要了。
  1. interface Tom<T> {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>name: string
  7. <template>
  8. <template>
  9.   <Children ref='childrenRef'/>
  10. </template><Children :account="user">
  11. </template>type: T
  12. }
  13. interface People {
  14. <template>
  15. <template>
  16.   <Children ref='childrenRef'/>
  17. </template><Children :account="user">
  18. </template>name: string
  19. <template>
  20. <template>
  21.   <Children ref='childrenRef'/>
  22. </template><Children :account="user">
  23. </template>type: 'person'
  24. }
  25. interface Cat {
  26. <template>
  27. <template>
  28.   <Children ref='childrenRef'/>
  29. </template><Children :account="user">
  30. </template>name: string
  31. <template>
  32. <template>
  33.   <Children ref='childrenRef'/>
  34. </template><Children :account="user">
  35. </template>type: 'animal'
  36. }
  37. // 我的兄弟 jakeTom
  38. const myBrother: Tom<People> = {
  39. <template>
  40. <template>
  41.   <Children ref='childrenRef'/>
  42. </template><Children :account="user">
  43. </template>name: 'jakeTom',
  44. <template>
  45. <template>
  46.   <Children ref='childrenRef'/>
  47. </template><Children :account="user">
  48. </template>type: {
  49. <template>
  50. <template>
  51.   <Children ref='childrenRef'/>
  52. </template><Children :account="user">
  53. </template><template>
  54. <template>
  55.   <Children ref='childrenRef'/>
  56. </template><Children :account="user">
  57. </template>name: 'my brother',
  58. <template>
  59. <template>
  60.   <Children ref='childrenRef'/>
  61. </template><Children :account="user">
  62. </template><template>
  63. <template>
  64.   <Children ref='childrenRef'/>
  65. </template><Children :account="user">
  66. </template>type: 'person'
  67. <template>
  68. <template>
  69.   <Children ref='childrenRef'/>
  70. </template><Children :account="user">
  71. </template>}
  72. }
  73. // 我的猫咪 catTom
  74. const myCat: Tom<Cat> = {
  75. <template>
  76. <template>
  77.   <Children ref='childrenRef'/>
  78. </template><Children :account="user">
  79. </template>name: 'catTom',
  80. <template>
  81. <template>
  82.   <Children ref='childrenRef'/>
  83. </template><Children :account="user">
  84. </template>type: {
  85. <template>
  86. <template>
  87.   <Children ref='childrenRef'/>
  88. </template><Children :account="user">
  89. </template><template>
  90. <template>
  91.   <Children ref='childrenRef'/>
  92. </template><Children :account="user">
  93. </template>name: 'cat',
  94. <template>
  95. <template>
  96.   <Children ref='childrenRef'/>
  97. </template><Children :account="user">
  98. </template><template>
  99. <template>
  100.   <Children ref='childrenRef'/>
  101. </template><Children :account="user">
  102. </template>type: 'animal'
  103. <template>
  104. <template>
  105.   <Children ref='childrenRef'/>
  106. </template><Children :account="user">
  107. </template>}
  108. }
复制代码
特殊用法

动态变量名

Record 返回一个对象类型,参数 Keys 用作键名,参数 Type 用作键值类型。
  1. type stringKey = Record<string, string>
  2. // 处理动态变量名
  3. const list: stringKey = { img_1: 'img/1.png', img_2: 'img/2.png', img_3: 'img/3.png' }
  4. for (const key in list) {
  5. <template>
  6. <template>
  7.   <Children ref='childrenRef'/>
  8. </template><Children :account="user">
  9. </template>console.log(list[key])
  10. }
  11. for(let i = 0; i < 3; i++) {
  12. <template>
  13. <template>
  14.   <Children ref='childrenRef'/>
  15. </template><Children :account="user">
  16. </template>console.log(list['img_' + (i + 1)])
  17. }
复制代码
vue3中的TS

响应式数据

在 xxx.d.ts 里定义类型
  1. interface Account = {
  2. <template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>id: string
  7. <template>
  8. <template>
  9.   <Children ref='childrenRef'/>
  10. </template><Children :account="user">
  11. </template>name: string
  12. }
复制代码
在 vue 界面里使用
  1. // 简单类型可省略类型声明
  2. const loading = ref(false)
  3. const user = ref<Account>({
  4. <template>
  5. <template>
  6.   <Children ref='childrenRef'/>
  7. </template><Children :account="user">
  8. </template>id: 'E2U1EU91U',
  9. <template>
  10. <template>
  11.   <Children ref='childrenRef'/>
  12. </template><Children :account="user">
  13. </template>name: 'weiz'
  14. })
复制代码
参数传递

父组件使用
  1. <template>
  2. <template>
  3.   <Children ref='childrenRef'/>
  4. </template><Children :account="user">
  5. </template>
复制代码
子组件接收参数
  1. const props = defineProps<Account>()
复制代码
如果没有声明 Account,则可以具体定义
  1. const props = defineProps<Account>()
复制代码
组件实例类型

InstanceType 是 ts 自带的类型,能够直接获取组件完整的实例类型。
子组件
  1. [/code]父组件
  2. [code]<template>
  3. <template>
  4.   <Children ref='childrenRef'/>
  5. </template><Children :account="user">
  6. </template>
复制代码
来源:https://www.cnblogs.com/weizwz/p/18009894
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具