Tyscript常用数据类型

用户719312192340
119 阅读5分钟

Tyscript常用数据类型

仅记录目前我用到的几种数据类型以及使用方法

1. 类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式

let age: number = 18;

说明：说明：代码中:number就是类型注解

2. 常用基础类型（概述）

2.1 JavaScript已有类型

  • 原始类型：Number、string、boolean、null、undefined、symbol
  • 对象类型：Object（除了常用的Object，Array、Function等都属于特殊的对象） 对于基础类型，可完全按照JavaScript中的名称来书写
let age: number = 18;
let username: string = '张三';
let isMerry: boolean = false;
let unique: Symbol = Symbol('shuiruohanyu');

2.2 TypeScript新增数据类型

  • 联合类型、自定义类型（类型别名）、接口、元祖、字面量类型、枚举、void、any等

3. 数组类型（详解）

数组有两种写法，由于TypeScript是一种强类型语言，每一种写法都要标明元素类型

写法一：变量名：类型[]=赋值

let userList:string[] = ['A','B','C'];
let peopleList:object[] = [{name: '张三',age: 18}];

写法二：变量名:Array<类型>=赋值

let userList2:Array<sting> = ['A','B','C,];
let peopleList:Array<objetc> = [{name: '张三',age: 18}];

4.联合类型（详）

TypeScript允许我们将多个类型的任意一个做为一个值的类型

假设有一个函数，接收一个参数，并且这个参数可以是字符串或数字，那么传递这两种类型的值给这个函数，他都可以正常工作。

function printValue(value: string | number): void {
  console.log(value);
}
printValue("Hello"); // 输出: Hello
printValue(42);      // 输出: 42

联合类型的特性：

  1. 联合类型允许一个值具有多个可能的类型。
  2. 在使用联合类型的变量或参数时，我们只能访问所有可能类型的共有属性和方法。
  3. 当我们使用一个具有联合类型的变量时，Typescript会根据上下文推断出最具体的类型。

5. 函数类型（详）

ts语法需要明确地指出函数的参数及返回值类型

写法一：单独指定返回值类型 函数名（参数名：参数类型,参数名：参数类型) : 返回值类型{函数体}

// 单独指定函数返回值和函数参数
function add(num1: number, num2: number): number {
  return num1 + num2;
}
// 指定变量形式的
const add2 = (num1: number, num2: number): number => {
  return num1 + num2;
};

写法二：同时指定参数和返回值

// 同时指定参数和返回值
type CustomFunc = (num1: number, num2: number) => number;
const add3: CustomFunc = (num1, num2) => {
  return num1 + num2;
};

注：当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型，这种形式`只适用于函数表达式

5.1 void类型

当我们的函数定义为没有返回值的类型时，可用关键字void表示。

// 没有返回值的函数
type CustomFunc1 = (num1: string, num2: number) => void;
const combinStr: CustomFunc1 = () => {};

如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型

const add4 = () => {};
// 如果什么都不写 表示add4函数的类型为void
const add5 = (): void => {};
// 这种写法明确指定返回值为void与上方的类型相同
const add6 = (): undefined => {
  return undefined;
};
// 如果指定返回值为undefined  return undefined

5.2函数可选参数

当我们定义函数时，有的参数可传可不传，这种情况下，可以使用 TS 的可选参数来指定类型
比如，在使用数组的slice方法时，我们可以直接使用slice()，也可以传入参数 slice(1)，也可以使用slice(1,3)

const slice = (start?: number, end?: number): void => {};

?表示该参数或者变量可传可不传

 注意：可选参数只能出现在参数列表的最后， 即必须参数必须在可选参数之前

对象类型（详）

ts中的对象同样要先对属性和方法进行描述

使用花括号{}来描述对象
属性采用 属性名:类型形式
函数采用 方法名():返回值类型

// 如果有多个属性 可以换行 去掉间隔符号
let person3: {
  name: string;
  sayHello: Function;
} = {
  name: '王五',
  sayHello() {},
};

使用类型别名
type 对象名 = {
属性名：属性类型; 函数名(参数名:参数类型):返回值类型;
}
直接使用{ }会降低可读性，不具有辨识度，更推荐使用类型别名定义对象类型

// 带参数的函数方法 
type PersonObj2 = {
  name: string;
  sayHello(start: number): string;
};
const p2: PersonObj2 = {
  name: '高大大',
  sayHello(start) {
    return this.name;
  },
};

也可以使用箭头函数定义方法返回值类型

// 箭头函数形式定义类型
type People = {
  sayHello: (start: number) => string;
};
const p3: People = {
  sayHello() {
    return '';
  },
};

对象中的可选属性依然可以用？来表示

type Config = {
  method?: string;
  url: string;
};
const func = (config: Config) => {};
func({ url: '/a' });

6.类型别名（详）

当一个复杂类型或者联合类型过多被频繁使用时，可以通过类型别名来简化该类型的使用

用法：type 类型名称 = 具体类型

type CustomArray = Array<number | string>;
let arr1: CustomArray = [1, 2, '张三'];

7.接口（详）

当一个对象类型被多次使用时，一般使用接口（interface）描述对象的类型，达到复用的目的

  • 我们使用interface关键字来声明接口
  • 接口名称推荐以I为开头
  • 声明接口之后，直接使用接口名称作为变量的类型
// 接口
interface IPeople {
  name: string;
  age: number;
  sayHello(): void;
}
let p: IPeople = {
  name: '老高',
  age: 18,
  sayHello() {},
};

interface和type的异同
相同点：都可以给对象指定类型
不同点： 接口只能为对象指定类型， 类型别名可以为任意类型指定别名

推荐用 type 来定义 接口继承

interface Point2D { x: number; y: number }
interface Point3D extends {
    z: number
}
avatar
文章
阅读
粉丝