美文网首页
TypeScript类型补充(三)

TypeScript类型补充(三)

作者: 未路过 | 来源:发表于2022-09-20 00:13 被阅读0次

1. 函数的参数类型

  • 函数是JavaScript非常重要的组成部分,TypeScript允许我们指定函数的参数和返回值的类型。
  • 参数的类型注解
    声明函数时,可以在每个参数后添加类型注解,以声明函数接受的参数类型:

// 给参数加上类型注解: num1: number, num2: number
// 给返回值加上类型注释: (): number
// 在开发中,通常情况下可以不写返回值的类型(自动推导)
function sum(num1: number, num2: number) {
  return num1 + num2
}

// sum(123, 321)

function greet(name: string) {
  console.log("Hello " + name.toUpperCase());
}

//Argument of type 'number' is not assignable to parameter of type 'string'
greet(123);

greet("abc", "cba");
//Expected 1 arguments, but got 2.ts(2554)

2. 函数的返回值类型

  • 我们也可以添加返回值的类型注解,这个注解出现在函数列表的后面:
function sum(num1: number, num2: number): number {
  return num1 + num2;
}

sum(123, 321);

  • 和变量的类型注解一样,我们通常情况下不需要返回类型注解,因为TypeScript会根据 return 返回值推断函数的返回类型:
  • 某些第三方库处于方便理解,会明确指定返回类型,但是这个看个人喜好;

3. 匿名函数的参数

  • 匿名函数与函数声明会有一些不同:
    1. 当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时;该函数的参数会自动指定类型;
// 通常情况下, 在定义一个函数时, 都会给参数加上类型注解的
function foo(message: string) {}

const names = ["abc", "cba", "nba"];
//自动推导出names是const names: string[]类型

//forEach里面有个函数,这个函数里面的参数可以不指定类型,
//想写也可以。因为这个item来自names这个数组。
//数组里面每个item的类型是确定的,
//把鼠标放在item上面一定是string类型,所以可以不写。
//这个函数叫做上下文函数类型,上下文中的函数: 可以不添加类型注解
// item根据上下文的环境推导出来的, 这个时候可以不添加的类型注解

names.forEach(function (item) {
  console.log(item.split(""));
});

export {};

总结:

  • 我们并没有指定item的类型,但是item是一个string类型:
    1. 这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型;
    2. 这个过程称之为上下文类型(contextual typing),因为函数执行的上下文可以帮助确定参数和返回值的类型;

4. 对象类型

如果我们希望限定一个函数接受的参数是一个对象,我们就可以使用对象类型。
我们使用了一个对象来作为类型:

  1. 在对象我们可以添加属性,并且告知TypeScript该属性需要是什么类型;
  2. 属性之间可以使用 , 或者 ; 来分割,最后一个分隔符是可选的;
  3. 每个属性的类型部分也是可选的,如果不指定,那么就是any类型;

// Point: x/y -> 对象类型
// {x: number, y: number}
function printPoint(point: {x: number, y: number}) {
  console.log(point.x);
  console.log(point.y)
}

printPoint({x: 123, y: 321})

export {}

5.可选类型

对象类型也可以指定哪些属性是可选的,可以在属性的后面添加一个?:

// Point: x/y/z -> 对象类型
// {x: number, y: number, z?: number}
function printPoint(point: { x: number; y: number; z?: number }) {
  console.log(point.x);
  console.log(point.y);
  console.log(point.z);
}

printPoint({ x: 123, y: 321 });
printPoint({ x: 123, y: 321, z: 111 });

export {};
/* 

123
321
undefined
123
321
111
*/

6.联合类型

  1. TypeScript的类型系统允许我们使用多种运算符,从现有类型中构建新类型。
  2. 我们来使用第一种组合类型的方法:联合类型(Union Type)
  • 联合类型是由两个或者多个其他类型组成的类型;
  • 表示可以是这些类型中的任何一个值;
  • 联合类型中的每一个类型被称之为联合成员(union's members);
// number|string 联合类型
function printID(id: number|string|boolean) {
  // 使用联合类型的值时, 需要特别的小心
  // narrow: 缩小
  if (typeof id === 'string') {
    // TypeScript帮助确定id一定是string类型
    console.log(id.toUpperCase())
  } else {
    console.log(id)
  }
}

printID(123)
printID("abc")
printID(true)

7. 可选类型和联合类型的关系

其实上,可选类型可以看做是 类型 和 undefined 的联合类型

// 让一个参数本身是可选的
// 一个参数一个可选类型的时候, 它其实类似于是这个参数是 类型|undefined 的联合类型
// function foo(message?: string) {
//   console.log(message)
// }

function foo(message?: string) {
  console.log(message);
}

function foo(message: string|undefined)  {
  console.log(message);
}//但是这么定义的时候必须foo(undefined)来调用,而可选类型就可以直接foo()来调用

foo(); //undefined
export {};

8.类型别名

// type用于定义类型别名(type alias)
type IDType = string | number | boolean
type PointType = {
  x: number
  y: number
  z?: number
}

function printId(id: IDType) {

}

function printPoint(point: PointType) {
  
}

相关文章

网友评论

      本文标题:TypeScript类型补充(三)

      本文链接:https://www.haomeiwen.com/subject/mhsportx.html