TS--初识2

野葛
133 阅读5分钟

Ts静态类型--你一旦定义了，就不可以再改变了。

  • 如何定义静态类型

const count: number = 1;

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

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

  • 自定义静态类型

    interface XiaoJieJie {
  uname: string;
  age: number;
}

const xiaohong: XiaoJieJie = {
  uname: "小红",
  age: 18,
};

Ts基础静态类型和对象类型

  • 基础静态类型

基础静态类型非常简单，只要在声明变量的后边加一个 :号，然后加上对应的类型哦。比如下面的代码，就是声明了一个数字类型的变量，叫做count。

const count : number = 918;
	const myName ：string = 'jspang'
类似这样常用的基础类型还有，我这里就举几个最常用的哦,类似这样常用的基础类型还有，我这里就举几个最常用的哦,`null,undefinde,symbol,boolean，void`。

  • 对象类型

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

    • 数组类型

       const xiaoJieJies: String[] = ["谢大脚", "刘英", "小红"];

    • 类类型

    class Person {}
 const dajiao: Person = new Person();
    • 函数类型
    const jianXiaoJieJie: () => string = () => {
  return "大脚";
};

Ts类型注释和类型判断

  • 类型注释
let count: number;
count = 123;

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

  • 类型判断
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);

当然 TypeScript 也可以推断出对象中属性的类型，然后里边有两个属性。

const XiaoJieJie = {
  name: "刘英",
  age: 18,
};

写完后你把鼠标放在XiaoJieJie对象上面，就会提示出他里边的属性，这表明 TypeScript 也分析出了对象的属性的类型。

Ts重要宗旨就是每个变量，每个对象的属性类型都应该是固定的如果你推断就让它推断，推断不出来的时候你要进行注释。

函数参数和返回类型定义

  • 简单类型定义
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);

合适的做法是给函数的返回值加上类型注解，代码如下：

function getTotal(one: number, two: number):number{
  return one + two + "";
}
const total = getTotal(1, 2);
  • 函数无返回值时定义方法

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

  function sayHello(): void {
     console.log("hello world");
  }
  • never 返回值类型--一个函数是永远也执行不完的，就可以定义返回值为never

比如执行执行的时候，抛出了异常，这时候就无法执行完了

function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}
  • 函数参数为对象(解构)时

正确写法：

function add({ one, two }: { one: number, two: number }): number {
 return one + two;
}
const three = add({ one: 1, two: 2 });

TypeScript 中数组类型的定义

  • 一般数组类型的定义
const numberArr: number[] = [1, 2, 3];
const stringArr: string[] = ["a", "b", "c"];
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的别名。

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

const xiaoJieJies: Lady[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

用类来定义也是可以的：

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

const xiaoJieJies: Madam[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

元组的使用和类型约束

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

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

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

avatar
文章
阅读
粉丝