阅读 47

Typescript 数据类型 【学习Plan】

image.png

慢慢来,先学数据类型吧。。

568C598CA037D79B622F3197A04902FC.png

数据类型

在js中有原始数据类型和对象数据类型

原始数据类型:布尔,数值,字符串,null,undefined,Symbol,BigInt

Typescript数据类型

  • 布尔值 boolean
let isJing: boolean = false;
复制代码

注意 boolean是基本类型,但Boolean是构造函数(其他基本类型也是一样)

  • 数值 number
let jing: number = 6
复制代码
  • 空值 Void

用来表示没有任何返回值的函数

function alertName(): void {
    //无返回值
}
复制代码

声明一个void类型的变量,只能是undefined或是null

  • null undefined
  1. 用null和undefined来定义两个原始类型:
let u: undefined = undefined;
let n: null = null;
复制代码
  1. undefined和null是所有类型的子类型,undefined类型的变量,可以赋值给number类型的变量:
let u: undefined;
let num: number = u;
复制代码
  1. void类型的变量不能赋值给number类型的变量:
let u: void;
let num: number = u;
复制代码

image.png

任意值类型 Any

如果是普通类型,在赋值的过程中类型是不允许的:

let jing1: string = 'jing'
jing1 = 8;
复制代码

image.png

如果设置为any:则不会报错

let jing1: any = 'jing'
jing1 = 8;
复制代码

联合类型

  • 变量

用 “|” 分隔要定义的类型,比如下面的例子,表示定义一个变量jing,它的类型可以为string和number,但是不能为boolean

let jing: string | number;
jing = 'jing';
jing = 22;
jing = true //不被允许的
复制代码
  • 访问联合类型的属性或者方法
function fn(jing: string | number): number {
  return jing.length;// 不允许,因为length不是string和number的共有属性,number没有length属性
  return jing.toString();//允许,
}
复制代码

对象的类型-接口

  • 定义和使用接口

使用接口来定义对象的类型(interfaces) 比如定义一个名为Jing的接口,里面有两个变量属性name和age,那么在定义一个类型为Jing的变量时,它里面的变量类型要和接口一致,多了,少了都不行

interface Jing {
  name: string;
  age: number;
}

let jing: Jing = {
  name: 'jingda',
  age: 25
};
复制代码
  • 可选属性
interface Jing {
  name: string;
  age?: number;
}

let jing: Jing = {
  name: 'jingda',
  age: 25 //可有可无
};
复制代码
  • 任意属性
interface Jing {
  name: string;
  age?: number;
  [propName: string] : any
  //使用 [propName: string] 定义了任意属性取 string 类型的值。
}

let jing: Jing = {
  name: 'jingda',
  age: 25 
};
复制代码
  • 只读属性

一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性:

interface Jing {
  readonly addr: string
  name: string;
  age?: number;
  [propName: string] : any
}

let jing: Jing = {
  addr: '江西',
  name: 'jingda',
  age: 25 //可有可无
};

addr: '北京' //报错
复制代码

数组

  • 数组的简单表示
let jing: number[] = [1,2,3];

let jing: number[] = [1,'2',3];//不允许,‘2’是字符串
复制代码
  • 数组泛型表示
let jing: Array<number> = [1,2,3];
复制代码
  • 接口表示数组
interface jingArr {
  [index: number]: number;
}

let jing: jingArr = [1,2,3]
复制代码
  • any 数组中的值可以为任意类型
let list: any[] = ['jingda', 22, { web: 'www' }];
复制代码

函数类型

  • 使用 =>
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};
复制代码

"=>"表示函数的定义,左边是输入类型,右边是输出类型 (x: number, y: number) => number 输入两个类型为number的变量,输出一个类型number的变量

  • 使用接口定义函数类型
interface jingFn {
  (x: string,y: string): boolean;
}

let jing: jingFn;
jing = function(x: string,y:string) {
  return x.search(y) !== -1;
}
复制代码

也可以设置可选参数 ? 和默认参数值(在定义类型的时候赋值)

文章分类
前端
文章标签