Typescript学习：联合类型、交叉类型、映射类型、箭头函数ts写法

HaanLen

已于 2023-04-07 22:09:59 修改

阅读量584

点赞数

CC 4.0 BY-SA版权

分类专栏： TypeScript 文章标签： javascript 前端 vue.js

于 2023-04-07 21:42:30 首次发布

本文链接：https://blog.csdn.net/weixin_40119412/article/details/130021053

TypeScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了TypeScript的基本类型如number,string,boolean，联合类型用于处理多种可能的类型，泛型在函数和接口中的应用，以及交叉类型和any、unknown类型的使用。同时，还展示了映射类型的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本类型

 const a: number = 1;
 console.log('a', a); // 1
 const b: string = 'Hello';
 console.log('b', b);// Hello
 const c: boolean = true;
 console.log('c', c); // true

联合类型

type NumOrStr = number | string;

场景：一个函数的参数变量支持传入单个数据和多条数据，我们可以通过联合类型来支持这样场景

 let a : number | string = 0;
 console.log('a-1', a);// 0
 
 a = 'hello';
 console.log('a-2', a);// hello

箭头函数写泛型

const getValue = <T, > (value:T):T => value;

const b = getValue('hello');
console.log('b', b);
  
const b1 = getValue(5);
console.log('b1', b1);


interface Props {
  name?: string;
  age?: number;
}
const getValue = <T extends Props>(value: T): T => value;

const a = getValue({ name: 'HYU' });
const a1 = getValue({ name: 'HYU', age: 18 });
const a2 = getValue({ age: 20 });
console.log('a', a); // {name: 'HYU'}
console.log('a1', a1); // {name: 'HYU', age: 18}
console.log('a2', a2); // {age: 20}

普通函数写泛型

interface Props {
  name?: string;
  age?: number;
}
function getValue<T extends Props> (value: T) {
  return value;
}
const a = getValue({ name: 'HYU' });
const a1 = getValue({ name: 'HYU', age: 18 });
const a2 = getValue({ age: 20 });
console.log('a', a); // {name: 'HYU'}
console.log('a1', a1); // {name: 'HYU', age: 18}
console.log('a2', a2); // {age: 20}

function getValue<T> (value: T):T {
  return value;
}
const a = getValue({ name: 'HYU' });
const a1 = getValue({ name: 'HYU', age: 18 });
const a2 = getValue({ age: 20 });
console.log('a', a); // {name: 'HYU'}
console.log('a1', a1); // {name: 'HYU', age: 18}
console.log('a2', a2); // {age: 20}

泛型变量可以是任意字母，常见的泛型变量定义有：

T（Type）代表任意事物的类型；
K（Key）表示对象中键的类型；
V（Value）表示对象中值的类型；
E（Element）表示元素类型；

交叉类型

通过交叉运算符 & 对多个类型进行交叉合并，新类型拥有所有类型的成员。

  interface Point {
    name: string;
    width: number;
    height: number;
    c: number;
  }
  interface Surface {
    size: number
    c: string;
  }

Point & Surface =>

  {
    name: string;
    width: number;
    height: number;
    size: number;
    c: never;
  }

在这里插入图片描述


  const a : (Point & Surface) = {
    name: 'THIS',
    width: 200,
    height: 100,
    size: 2000,
    c: [1, 3, 4]
  };
  console.log('a', a);

any 类型和 unknown 类型

any 类型，这和没有引入 TS，纯 JS 使用体验没有差别；你可以将任意类型值赋给 any 类型的变量，并对该变量进行任何操作。
unknown 类型，你可以把任意类型值赋给 unknown 类型的变量，但在使用这个变量时必须进行类型检查或类型断言。

映射类型

type Keys = 'name';
type Sizes = 'width' | 'height'
type Point = {
  [k in Keys]: string
} & {
    [k in Sizes]: number
  } & { size: number }

const a: Point = {
  name: 'THIS',
  width: 200,
  height: 100,
  size: 2000,
};
console.log('a', a);