走进typescript得世界

前言

vue3已经发布了，ts的脚步已经阻拦不住了，还只会ES6?别想了，人家都已经在行动了，以下是ts的基本系列教程，ts的基本语法，高级语法等，以及在vue项目中如何应用ts，跟着我赶紧撸起来吧。

基本数据类型

数字

const a: number = 3;

字符串

const b: string = "1";

数组

const c: number[] = [1, 2, 3];
const d: Array<number> = [1, 3];
const arr: any[] = [1, "33", true];

元组

可以为数组中的每个参数定义相对应的类型

const e: [number, string] = [1, "ww"];

枚举

enum error {
  blue = 3,
  "orange",
}
const f: error = error.orange;
console.log(f); //输出4

布尔类型

const g: boolean = true;

对象

const i: object = {};

undefined&&null

let j: undefined;
let k: null;

void

function aa(): void {
  console.log(1);
}

//如果方法有返回值，可以加上返回值的类型
function bb(): number {
  return 1;
}

never

let l: never;

//匿名函数并抛出异常
l = (() => {
  throw new Error("111");
})();

任意类型

let h: any = 1;
h = true;
h = "st";

接口

 在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，

  在程序设计里面，接口起到一种限制和规范的作用。

  接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。ts中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

函数接口

        为了使用接口表是函数类型，我们需要给接口定义一个调用签名，

        她就像是一个只有参数列表和返回值类型的函数定义，参数列表里的每个参数都需要名字和类型

export default {};
// 创建一个函数接口
interface ISum {
  (num1: number, num2: number): number;
}
// 创建函数
let sum: ISum = function (x: number, y: number): number {
  return x + y;
};
// 调用函数并将返回结果赋值
let res = sum(20, 21);
console.log(res);

接口继承

// 函数的继承 子承父业
interface IFather {
  name: string;
  age: number;
}
// 继承extends
interface ISon extends IFather {
  hobby: string;
}
let stu1: ISon = {
  name: "张三",
  age: 20,
  hobby: "唱歌、跳舞",
};
console.log(stu1.name, stu1.age, stu1.hobby); //张三 20 唱歌、跳舞

索引签名

解决参数可多可少的问题

• 可选参数

• 使用变量 将变量赋给一个对象将对象传过去

• 类型断言

  export default {};
  ​
  // 解决参数可多可少的问题
  ​
  // 少一个或多个问题  可选参数
  interface IInfo {
    name: string;
    age?: number;
    sex: string;
    [props: string]: any; //索引签名 数据类型any任意
  }
  let stu1: IInfo = {
    name: "张三",
    age: 20,
    sex: "男",
  };
  console.log(stu1); //  { name: '张三', age: 20, sex: '男' }
  ​
  let stu2: IInfo = {
    name: "李四",
    sex: "男",
  };
  console.log(stu2); //{ name: '李四', age: 21, sex: '男', hobby: '吃饭、睡觉、打豆豆' }
  ​
  // 多一个或者多个解决方法
  // 一、使用变量将变量赋值给一个对象将，对象传过去
  let stuInfo = {
    name: "赵六",
    age: 20,
    sex: "女",
  };
  let stu3: IInfo = stuInfo;
  console.log(stu3); //{ name: '赵六', age: 20, sex: '女' }
  ​
  // 二、使用类型断言 <类型>值    值 as 类型
  let stu4: IInfo = { name: "王五", sex: "男", hobby: "打游戏" } as IInfo;
  console.log(stu4); //{ name: '王五', sex: '男', hobby: '打游戏' }
  let stu5: IInfo = <IInfo>{ name: "赵四", sex: "女", hobby: "打羽毛球" };
  console.log(stu5); //{ name: '赵四', sex: '女', hobby: '打羽毛球' }
  ​
  // 三、索引签名 对象中的键都会被转化为字符串
  //主要设置在IInfo中的 [props: string]: any;
  let stu6: IInfo = {
    name: "王大拿",
    age: 30,
    sex: "男",
    hobby: "唱歌、跳舞",
  };
  console.log(stu6); //{ name: '王大拿', age: 30, sex: '男', hobby: '唱歌、跳舞' }