首页 > 其他分享 >TS学习笔记(四)

TS学习笔记(四)

时间:2024-10-30 15:31:03浏览次数:5  
标签:undefined TS 笔记 number 学习 参数 类型 元组 函数

1. 类型缩小(联合类型)

对变量进行类型缩小,除了使用as断言外,还可以使用if else(switch也行)。如下

function printId(
  id:number|string
) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

类型缩小是TS处理联合类型的标准方法(说明处理联合类型时,经常需要类型缩小),凡是遇到可能为多种类型的场合,都需要先缩小类型,再进行处理。

 

2.交叉类型

指的是多个类型组成一个新类型,&。其实就是逻辑并且的意思,都要包含才行。

let x:number&string;

上面事例中,变量x同时是数值和字符串,这当然是不可能的,所以ts会认为x的类型实际上是never。

  3.typeof运算符 js里面,typeof 运算符只可能返回八种结果,而且都是字符串。 而ts里面,它的操作数依然是一个值,但是返回的不是字符串,而是该值的类型。 它们两个的一个重要区别是,编译后,前者会保留,后者会被全部删除。(type类型别名也是一样,会被全部删除)   4. 数组 ts的数组有一个根本特征:所有成员的类型必须相同。 数组类型声明后,成员数量是不限制的,任意输了的成员都可以,也可以是空数组。   5. 元组 元组是ts特有的数据类型。它表示成员类型可以自由设置的数组。 由于成员类型可以不一样,所以元组必须明确声明每个成员的类型。
const s:[string, string, boolean] = ['a', 'b', true];

元组类型的写法与数组有一个重大差异。数组的成员类型写在方括号外卖(number[]),元组的类型写在方括号里面([number])

由于需要声明每个成员的类型,所以大多数情况下,元组的成员数量是有限的,从类型声明就可以明确知道,元组包含多少个成员,越界的成员会报错。

    只读元组是元组的父类型    6.symbol Symbol值不存在字面量,   7. 函数类型 函数的实际参数个数,可以少于类型指定的参数个数,但是不能多于,即ts允许省略参数。
let myFunc:(a:number,b:number) => number;

myFunc = (a:number) => a;  // 正确

myFunc = (a:number,b:number,c:number)=> a+b+c // 报错

这是因为js函数在声明时往往有多余的参数,实际使用可以只传入一部分参数。比如,forEach的参数是一个函数,默认有三个参数(item,index,array)=>void,实际往往只使用第一个参数。因此,ts允许传入的参数不足。

函数的类型声明还有一种对象的写法。这种写法非常适合一种场景:函数本身存在对象,如下。

let foo:{
    (x:number):void;
    version:string
}

function f(x:number) {
  console.log(x);
}

f.version = '1.0';

 

8.Function类型

任何函数都属于这个类型,Function类型的函数可以接收任意数量的参数,每个参数的类型都是any,返回值的类型也是any,代表没有任何约束。牛逼!以后不知道函数的类型怎么声明,就用它。

  9.可选参数 如果函数的某个参数可以省略,则在参数名后面加问号表示。 参数名带有问号,表示该参数的类型实际上是原始类型 | undefined,
function f(x?:number){
    return x  
}
f() // 正确 f(undefined) // 正确

上面示例中,参数x是可选的,等同于说x可以赋值为undefined。

但是反过来就不成立,类型显示设为undefined的参数,就不能省略。

function f(x:number|undefined) {
  return x;
}

f() // 报错

 

函数的可选参数只能在参数列表的尾部,跟在必选参数的后面,放在必选参数前面会报错。

10. 函数参数默认值

设有默认值的参数,如果传入undefined,也会触发默认值

function f(x = 456) {
  return x;
}

f(undefined) // 456

 

11. void类型

void类型可以返回undefined或null,返回其他值会报错。

js规定,如果函数没有返回值,就等同于返回undefined。

 

                       

标签:undefined,TS,笔记,number,学习,参数,类型,元组,函数
From: https://www.cnblogs.com/yaoyu7/p/18489409

相关文章

  • Vue学习笔记(十二)
    async与await1.asyncasync作为一个关键字放到声明函数前面,表示该函数为一个异步任务,不会阻塞后面函数的执行async函数里如果有异步过程会等待,但async函数本身会马上返回,不会阻塞当前线程。可以简单认为async函数工作在主线程,同步执行,不会阻塞界面渲染;async函数内部由awai......
  • 笔记本电脑组装及装配行业MES系统解决方案介绍
    一、笔记本电脑组装及装配行业为什么需要上MES系统?随着笔记本电脑市场的不断发展,消费者对产品的质量、性能和定制化需求不断提高,导致生产企业面临越来越多的挑战。笔记本电脑组装及装配行业具有多工序、多部件、多批次的特点,如何确保生产效率、提高产品质量、缩短交货周期成......
  • Vue学习笔记(十一)
    一.Promise1.异步异步:则是将耗时很长的A交付的工作交给系统之后,就去继续做B交付的工作,等到系统完成了前面的工作之后,再通过回调或者事件,继续做A剩下的工作。AB工作的完成顺序,和交付他们的时间顺序无关,所以叫“异步”。2.回调函数当一个函数作为参数传入另一个函数中,......
  • Nuxt.js 应用中的 imports:extend 事件钩子详解
    title:Nuxt.js应用中的imports:extend事件钩子详解date:2024/10/28updated:2024/10/28author:cmdragonexcerpt:imports:extend是Nuxt.js中的一个生命周期钩子,允许开发者在模块设置过程中扩展导入。使用此钩子,开发者可以灵活地管理和调整模块的导入配置,从而增......
  • Nuxt.js 应用中的 imports:dirs 事件钩子详解
    title:Nuxt.js应用中的imports:dirs事件钩子详解date:2024/10/30updated:2024/10/30author:cmdragonexcerpt:imports:dirs是Nuxt.js中的一个生命周期钩子,用于扩展导入目录。通过这个钩子,开发者可以灵活地添加、修改或删除项目中的导入目录,从而提高模块的可......
  • Nuxt.js 应用中的 imports:context 事件钩子详解
    title:Nuxt.js应用中的imports:context事件钩子详解date:2024/10/29updated:2024/10/29author:cmdragonexcerpt:imports:context是Nuxt.js中的一个生命周期钩子,主要用于在创建unimport上下文时调用。这个钩子为开发者提供了对模块导入上下文的操作能力,方......
  • Nuxt.js 应用中的 imports:dirs 事件钩子详解
    title:Nuxt.js应用中的imports:dirs事件钩子详解date:2024/10/30updated:2024/10/30author:cmdragonexcerpt:imports:dirs是Nuxt.js中的一个生命周期钩子,用于扩展导入目录。通过这个钩子,开发者可以灵活地添加、修改或删除项目中的导入目录,从而提高模块的可扩展性......
  • 【笔记】【Android】Manifest中的intent-filter使用
    【笔记】【Android】Manifest中的intent-filter使用笔记系列,内容是从网络搜索的结果,不一定是正确的理解。如果存在谬误,欢迎大家指正。intent-filter是为了标明Activity,Service或者BraodcastReceiver可以相应的intent类型。基本结构<activityandroid:name=".YourActivity"......
  • 【React系列六】—React学习历程的分享
    前言接系列五讲解Router5之后,最新的路由版本是React-Router6,一些新增特性及使用方法讲解一、Router6和Router5的区别ReactRouter发布了三个不同的包:react-router:路由核心库,提供许多组件、钩子react-router-dom:包括了react-router所有内容,同时添加了用于DOM的组件,如<......
  • 代码随想录刷题学习日记
    仅为个人记录复盘学习历程,解题思路来自代码随想录代码随想录刷题笔记总结网址:代码随想录222.完全二叉树的节点个数给出一个完全二叉树,求出该树的节点个数。提供参数:根结点root主要操作:遍历所有节点,记录节点数。代码(递归法)大致如下:publicintcountNodes(TreeNoder......