TypeScript基础语法 - 数据类型限制(一)

1.TypeScript 的静态类型
  • 如何定义静态类型:
const count: number = 1;

这就是最简单的定义一个数字类型的count的变量,这里的: number就是定义了一个静态类型。这样定义后count这个变量在程序中就永远都是数字类型了,不可以改变了。比如我们这时候给count复制一个字符串,它就报错了。

//错误代码
const count: number = 1;
count = "test";

但这只是最简单的理解,再往深一层次理解,你会发现这时候的count变量,可以使用number类型上所有的属性和方法。我们可以通过在count后边打上一个.看出这个特性,并且编辑器会给你非常好的提示。

  • 自定义静态类型
interface XiaoJieJie {
  uname: string;
  age: number;
}

const xiaohong: XiaoJieJie = {
  uname: "张三",
  age: 18,
};

这时候你如果声明变量,跟自定义不一样,VSCode直接就会报错。需要注意的是,这时候xiaohong变量也具有uname和age属性了。如果使用了静态类型,不仅意味着变量的类型不可以改变,还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性。

2.TypeScript 基础静态类型和对象类型

在 TypeScript 静态类型分为两种,一种是基础静态类型,一种是对象类型

  • 基础静态类型

基础静态类型,只要在声明变量的后边加一个:号,然后加上对应的类型

const count : number = 123;
const myName :string = 'test'

类似这样常用的基础类型还有,null,undefinde,symbol,booleanvoid这些都是最常用的基础数据类型,

  • 对象类型
const xiaoJieJie: {
  name: string,
  age: number,
} = {
  name: "张三",
  age: 18,
};
console.log(xiaoJieJie.name);

对象类型也可以是数组

const xiaoJieJies: String[] = ["张三", "李四", "王五"];

这时候的意思是,变量xiaoJieJies必须是一个数组,数组里的内容必须是字符串。如果是把字符串改为数字,代码会报错。

//错误代码
const xiaoJieJies: String[] = ["张三", "李四", 1];

用类的形式,来定义变量

class Person {}
const xjj: Person = new Person();

这个意思就是xjj必须是一个Person类对应的对象才可以。我们还可以定义一个函数类型,并确定返回值。代码如下:

const newxjj: () => string = () => {
  return "张三";
};

TypeScript的对象类型有几种形式

  1. 对象类型
  2. 数组类型
  3. 类类型
  4. 函数类型
3.TypeScript 中的类型注释类型推断
  • type annotation 类型注解
let count: number;
count = 123;

这段代码就是类型注解,意思是显示的告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解。

  • type inferrence 类型推断
let countInference = 123;

这时候我并没有显示的告诉你变量countInference是一个数字类型,但是如果你把鼠标放到变量上时,你会发现 TypeScript 自动把变量注释为了number(数字)类型,也就是说它是有某种推断能力的,通过你的代码 TS 会自动的去尝试分析变量的类型。

  • 如果 TS 能够自动分析变量类型, 我们就什么也不需要做了
  • 如果 TS 无法分析变量类型的话, 我们就需要使用类型注解

不用写类型注解的例子:

const one = 1;
const two = 2;
const three = one + two;

用写类型注解的例子:

function getTotal(one, two) {
  return one + two;
}

const total = getTotal(1, 2);

这种形式,就需要用到类型注释了,因为这里的one和two会显示为any类型。这时候如果你传字符串,你的业务逻辑就是错误的,所以你必须加一个类型注解,把上面的代码写成下面的样子。

function getTotal(one: number, two: number) {
  return one + two;
}

const total = getTotal(1, 2);

这里有的一个问题是,为什么total这个变量不需要加类型注解,因为当one和two两个变量加上注解后,TypeScript 就可以自动通过类型推断,分析出变量的类型。

当然 TypeScript 也可以推断出对象中属性的类型,比如现在写一个小姐姐的对象,然后里边有两个属性。

const XiaoJieJie = {
  name: "张三",
  age: 18,
};

写完后你把鼠标放在XiaoJieJie对象上面,就会提示出他里边的属性,这表明 TypeScript 也分析出了对象的属性的类型。在写 TypeScript 代码的一个重要宗旨就是每个变量,每个对象的属性类型都应该是固定的,如果你推断就让它推断,推断不出来的时候你要进行注释。

4.TypeScript 函数参数和返回类型定义
  • 简单类型定义
    getTotal的函数,并且对传入的参数作了定义
function getTotal(one: number, two: number) {
  return one + two;
}

const total = getTotal(1, 2);

这时候我们写的代码其实是有一个小坑的,就是我们并没有定义getTotal的返回值类型,虽然TypeScript可以自己推断出返回值是number类型。 但是如果这时候我们的代码写错了,比如写程了下面这个样子。

function getTotal(one: number, two: number) {
  return one + two + "";
}

const total = getTotal(1, 2);

这时候total的值就不是number类型了,但是不会报错。正确写法如下:

function getTotal(one: number, two: number): number {
  return one + two;
}

const total = getTotal(1, 2);
  • 函数无返回值时定义方法
function sayHello() {
  console.log("hello world");
}

这就是没有返回值的函数,我们就可以给他一个类型注解void,代表没有任何返回值。

function sayHello(): void {
  console.log("hello world");
}
  • 函数参数为对象(解构)时
function add({ one, two }) {
  return one + two;
}

const total = add({ one: 1, two: 2 });

浏览器中你会看到直接报错了,意思是total有可能会是任何类型,那我们要如何给这样的参数加类型注解?

function add({ one, two }: { one: number, two: number }): number {
  return one + two;
}

const three = add({ one: 1, two: 2 });

一个参数和多个参数都是一样的

5.TypeScript 中数组类型的定义
  • 一般数组类型的定义
const numberArr = [1, 2, 3];

这时候你把鼠标放在numberArr上面可以看出,这个数组的类型就是 number 类型。这是 TypeScript 通过类型推断自己推断出来的。 如果你要显示的注解,也非常简单,可以写成下面的形式。

const numberArr: number[] = [1, 2, 3];

同样道理,如果你的数组各项是字符串,你就可以写成这样。

const stringArr: string[] = ["a", "b", "c"];

也就是说你可以定义任意类型的数组,比如是undefined。

const undefinedArr: undefined[] = [undefined, undefined];

这时候问题来了,如果数组中有多种类型,比如既有数字类型,又有字符串的时候。那我们要如何定义那。 很简单,只要加个(),然后在里边加上|就可以了,具体看代码。

const arr: (number | string)[] = [1, "string", 2];
  • 数组中对象类型的定义
const xiaoJieJies: { name: string, age: Number }[] = [
  { name: "张三", age: 18 },
  { name: "李四", age: 28 },
];

这种形式看起来比较麻烦,而且如果有同样类型的数组,写代码也比较麻烦,TypeScript 为我们准备了一个概念,叫做类型别名(type alias)

type Lady = { name: string, age: Number };

const xiaoJieJies: Lady[] = [
  { name: "张三", age: 18 },
  { name: "李四", age: 28 },
];

这样定义是完全起作用的,比如我们下面在对象里再加入一个属性,这时候编译器就会直接给我们报错了。

这时候有的小伙伴就会问了,我用类进行定义可以吗?答案是可以的,比如我们定义一个Madam的类,然后用这个类来限制数组的类型也是可以的。

class Madam {
  name: string;
  age: number;
}

const xiaoJieJies: Madam[] = [
  { name: "张三", age: 18 },
  { name: "李四", age: 28 },
];
6.TypeScript 中元组的使用和类型约束
  • 元组的基本应用
const xiaojiejie = ["zhangsan", "teacher", 28];

这时候把鼠标放到xiaojiejie变量上面,可以看出推断出来的类型。我们就用类型注解的形式给他作一个注解,代码如下:

const xiaojiejie: (string | number)[] = ["dajiao", "teacher", 28];

这时候你已经增加了代码注解,但是这并不能很好的限制,比如我们把代码改成下面的样子,TypeScript依然不会报错。

const xiaojiejie: (string | number)[] = ["dajiao", 28, "teacher"];

我们只是简单的把数组中的位置调换了一下,但是TypeScript并不能发现问题,这时候我们需要一个更强大的类型,来解决这个问题,这就是元组。

元组和数组类似,但是类型注解时会不一样。

const xiaojiejie: [string, string, number] = ["dajiao", "teacher", 28];

这时候我们就把数组中的每个元素类型的位置给固定住了,这就叫做元组。

你可能感兴趣的:(TypeScript基础语法 - 数据类型限制(一))