【Typescript】学习笔记（一）之基础类型_typegoose typegoose 学习

于 2024-04-30 09:18:34 发布
阅读量618 收藏 9
点赞数 5
分类专栏： 程序员 文章标签： typescript 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84181286/article/details/138334929
版权 
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4
}
let c: Color = Color.Green

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字：

enum Color {
  Red = 1,
  Green,
  Blue
}
let colorName: string = Color[2]

console.log(colorName) // 'Green'
any

在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用any类型

  • 我们可以对any类型的变量进行任何的操作，包括获取不存在的属性、方法；
  • 我们给一个any类型的变量赋值任何的值，比如数字、字符串的值；

如果对于某些情况的处理过于繁琐不希望添加规定的类型注解，或者在引入一些第三方库时，缺失了类型注解，这个时候我们可以使用any：

  • 包括在Vue源码中，也会使用到any来进行某些类型的适配；
let notSure: any = 4
notSure = 'maybe a string'
notSure = false // 也可以是个 boolean

在对现有代码进行改写的时候，any 类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。并且当你只知道一部分数据的类型时，any 类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据：

let list: any[] = [1, true, 'free']

list[1] = 100
void

某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：

/\* 表示没有任何类型, 一般用来说明函数的返回值不能是undefined和null之外的值 \*/
function fn(): void {
  console.log('fn()')
  // return undefined
  // return null
  // return 1 // error
}

声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null：

let unusable: void = undefined
object

object 表示非原始类型，也就是除 number，string，boolean之外的类型。

使用 object 类型，就可以更好的表示像 Object.create 这样的 API。例如：

function fn2(obj: object): object {
  console.log('fn2()', obj)
  return {}
  // return undefined
  // return null
}
console.log(fn2(new String('abc')))
// console.log(fn2('abc') // error
console.log(fn2(String))


function printCoordinate(point: {x: number, y: number}) {
  console.log("x坐标: ", point.x)
  console.log("y坐标: ", point.y)
}

printCoordinate({x: 10, y: 30})


// 增加可选属性
function printCoordinate(point: {x: number, y: number, z?: number}) {
  console.log("x坐标: ", point.x)
  console.log("y坐标: ", point.y)
  if(point.z){
    console.log("z坐标: ",point.z)
  }
}

printCoordinate({x: 10, y: 30, z: 40})
联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种 需求 1: 定义一个一个函数得到一个数字或字符串值的字符串形式值

function toString2(x: number | string): string {
  return x.toString()
}

需求 2: 定义一个一个函数得到一个数字或字符串值的长度

function getLength(x: number | string) {
  // return x.length // error

  if (x.length) {
    // error
    return x.length
  } else {
    return x.toString().length
  }
}
类型别名
type Point = {
  x: number
  y: number
}

function printPoint(point: Point){
  console.log(point.x, point.y)
}

function sumPoint(point: Point){
  console.log(point.x + point.y)
}
类型断言as

有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言（Type Assertions）

比如我们通过document.getElementById，TypeScript只知道该函数会返回HTMLElement ，但并不知道它具体的类型：

const myEl = document.getElementById('my-img') as HTMLImageElement

myEl.src = '图片地址'

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript 会假设你，程序员，已经进行了必须的检查。

类型断言有两种形式。 其一是“尖括号”语法, 另一个为 as 语法

/\*
类型断言(Type Assertion): 可以用来手动指定一个值的类型
语法:
 方式一: <类型>值
 方式二: 值 as 类型 tsx中只能用这种方式
\*/

/\* 需求: 定义一个函数得到一个字符串或者数值数据的长度 \*/
function getLength(x: number | string) {
  if ((<string>x).length) {
    return (x as string).length
  } else {
    return x.toString().length
  }
}
console.log(getLength('abcd'), getLength(1234))
非空类型断言!

当我们编写下面的代码时，在执行ts的编译阶段会报错：

这是因为传入的message有可能是为undefined的，这个时候是不能执行方法的；

function printMessage(message?: string){
  console.log(message.toUpperCase()) //报错：对象可能为“未定义”。
}

printMessage('hello')

但是，我们确定传入的参数是有值的，这个时候我们可以使用非空类型断言：
非空断言使用的是! ，表示可以确定某个标识符是有值的，跳过ts在编译阶段对它的检测；

function printMessage(message?: string){
  console.log(message!.toUpperCase())
}

printMessage('hello')
字面量类型

字面量类型的值和类型必须保持一致，相当于一个常量

type Alignment = 'left' | 'right' | 'center'
function changeAlign(align: Alignment) { 
    //这里声明的形参变量只能为 left，right，center中的一个
  console.log('修改方向： ',align)
}

changeAlign('left')

一个🌰

type Method = 'GET' | 'POST'
function request(url: string, method: Method) {}

const options = {
  url: "https://baidu.com",
  method: "POST"
}

request(options.url, options.method) //这里会报错

上面的 options.method 会报错

因为 ts会将 options.method 判断为 string类型，而我们要求应该传入字面量类型

解决：

type Method = 'GET' | 'POST'
function request(url: string, method: Method) {}

const options = {
  url: "https://baidu.com",
  method: "POST"
}

request(options.url, options.method as "POST")

// 方法二：
type Method = 'GET' | 'POST'
function request(url: string, method: Method) {}

const options = {
  url: "https://baidu.com",
  method: "POST"
} as const

request(options.url, options.method)
类型补充 – 类型缩小
  • 什么是类型缩小呢？
    • 类型缩小的英文是Type Narrowing；
    • 我们可以通过类似于typeof padding === “number” 的判断语句，来改变TypeScript的执行路径；
    • 在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为缩小;
    • 而我们编写的typeof padding === "number 可以称之为类型保护（type guards）；
  • 常见的类型保护有如下几种：
    • typeof
    • 平等缩小（比如===, !==）
    • instanceof
    • in
typeof

在TypeScript 中，检查返回的值typeof是一种类型保护：因为TypeScript 对如何typeof操作不同的值进行编码。

type IDType = number | string
function printID(id: IDType) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase())
  } else {
    console.log(id)
  }
}
平等缩小

我们可以使用Switch或者相等的一些运算符来表达相等性（比如 ===, !==, ==, and != ）：

type Direction = 'left' | 'right' | 'top' | 'bottom'
function printDirection(direction: Direction) {
  if(direction === 'left') {
    console.log(direction)
  }
}
instanceof

JavaScript 有一个运算符来检查一个值是否是另一个值的“实例”：

function printTime(date: string | Date) {
  if(date instanceof Date)  {
    console.log(date.toLocaleString())
  } else {
    console.log(date)
  }
}

//举例二
class Student {
  studying() {}
}

class Teacher {
  teaching() {}
}

function work(p: Student | Teacher) {
  if(p instanceof Student) {
    p.studying()
  } else {
    p.teaching()
  }
}
in

如果指定的属性在指定的对象或其原型链中，则in 运算符返回true；

type Fish = {swim: () => void}
type Dog = {run: () => void}

function move(animal: Fish | Dog){
  if('swim' in animal) { // 判断swim属性是否在实例animal中
    animal.swim()
  } else {
    animal.run()
  }
}

const fish: Fish = {
  swim(){
    console.log('swim')
  }
}

move(fish)//输出swim


![img](https://img-blog.csdnimg.cn/img_convert/e1a02d1851537085ad4c356e1c539d37.png)
![img](https://img-blog.csdnimg.cn/img_convert/b92358b8781e6bb3e619ddd259a76599.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

l中
    animal.swim()
  } else {
    animal.run()
  }
}

const fish: Fish = {
  swim(){
    console.log('swim')
  }
}

move(fish)//输出swim


[外链图片转存中...(img-ZBqNjZeK-1714439876481)]
[外链图片转存中...(img-E7Z4eqRn-1714439876481)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_84181286
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TypeScript学习笔记
weixin_62936749的博客
06-27 283
TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集。TypeScript通过为JavaScript添加静态类型和其他特性，提供了更好的代码可读性、可维护性和可扩展性。下面是一些关于TypeScript的要点：静态类型：TypeScript引入了静态类型系统，允许开发者在代码中显式地声明变量、函数参数和返回值的类型。这样可以在编译时捕获类型错误，提前发现潜在的bug，并提供更好的代码智能感知和自动完成功能。
Type Script 学习笔记
小先生编程
02-07 2706
以javaScript 为基础构建的语言，可以在任何支持javaScript的平台中运行，Ts不能被js解析器直接执行，需要将ts文件编译成js文件一个javaScript的超集，TypeScript扩展了JavaScript并添加了类型。
TypeScript学习笔记归纳（先做基础梳理，后期不断丰满，持续更新ing）
一往直“前”，直上云“端”
12-23 1222
一、TypeScript是什么？TypeScript 是一种由 Microsoft 开发的开源语言。TypeScript与JavaScript有着不同寻常的关系。它是 JavaScript 的一个超集，添加了可选的静态类型和基于类的面向对象编程。TypeScript 提供了JavaScript的所有功能，并且额外增加了：类型系统。简单可以概述为：TypeScript（简称：TS）是JavaScript（简称：JS）的超集（JS 有的 TS 都有）；Type。
TypeScript 学习笔记之基本类型
01-19
在 TypeScript 中一共有 7 种基本类型。 1、boolean 代码如下: var isDone: boolean = false; 2、number 代表 JavaScript 中的数字。在 JavaScript 中，无论是“整数”还是“浮点数”，都是以双精度浮点类型存储...
typeScript学习笔记
04-27
TypeScript学习笔记 TypeScript是一个自由和开源的编程语言，由微软开发。它是JavaScript的一个超集，扩展了JavaScript的语法，解决了JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。TypeScript支持...
typescript学习笔记
03-04
Typescript 学习笔记 TypeScript 是一种静态类型的编程语言，作为 JavaScript 的超集，它的主要特性是坚持与 ECMAScript 标准同步发展。下面是 TypeScript 的一些重要知识点： 一、ECMAScript 标准同步发展 * ...
TypeScript 学习笔记
05-16
大学牲学习 TypeScript 的学习笔记，欢迎小伙伴们一起来学习！
【TypeScript学习笔记】
m0_63393227的博客
06-24 143
TypeScript 是一种静态类型的编程语言，是 JavaScript 的超集，它解决了 JavaScript 弱类型的问题，并使得代码更具可读性和可维护性。
typescript 详细学习笔记
greed
11-07 389
class 类名 {属性名 : 类型;constructor(参数 : 类型) {this . 属性名 = 参数;} 方法名() {... . } }console . log(` 大家好，我是 ${ this . name } `);} }${thisconsole . log(` 大家好，我是 ${ this . name } `);} }console . log(` 大家好，我是 ${ this . name } `);} }
TypeScript 学习笔记（Day2）
最新发布
weixin_45851732的博客
01-30 931
注意：getElementById 方法返回值的类型是 HTMLElement，该类型只包含所有标签公共的属性或方法，不包含 a 标签特有的 href 等属性。技巧：在浏览器控制台，通过 console.dir() 打印 DOM 元素，在属性列表的最后面，即可看到该元素的类型。注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）。通过类型断言，aLink 的类型变得更加具体，这样就可以访问 a 标签特有的属性或方法了。这种情况下，在给函数参数指定类型时，就用到。
TS学习笔记（一）：基本类型
weixin_34234721的博客
04-20 938
TypeScript 是 JaveScript 类型的超集，它可以编译成纯 JavaScript，TypeScript 可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。 TypeScript 支持与 Javascript 几乎相同的数据类型，此外还提供了使用的枚举类型，TypeScript 支持的类型包括：布尔值、数字、字符串、数组、元组、枚举、Any、Void、Null、 Und...
Typescript学习笔记
lmj0920的博客
07-01 643
小白程序员ts学习笔记

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值