学习vue3之路day2

TypeScript常用语法

对一个java后端来说js常用的类型方法大都相似。

基础类型

布尔值 boolean

let show: boolean = false;

数字 number

和js一样ts中所有数字都是浮点数。

let val:number = 10;

字符串 string

let name:string = "zhangsan"

Undefined 、null

默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量。

数组 []、Array

let data:number[] = [1,2,3];
let arr:Array<number> = [2,3,4];

*元组Tuple

元组类型定义一个固定大小的数组，里面的元素类型可以不同。 比如，你可以定义一对值分别为 string 和 number 类型的元组。

let tp: [string,number] = ["name",10];

枚举 enum

enum StateEnum{
    Open,
    Close
}

let state:StateEnum = StateEnum.Open;

// 通过数值获取名称
let name = StateEnum[1];

* any

不知道的类型，不希望类型检查器对这些值进行检查时 可以用any。

一用any回到js，不要滥用。

void

通常用来修饰函数无返回值

function fn():void{
}

object

表示除基本类型boolean,number,string 之外的类型。

let obj: object = {}

* 联合类型

表示取值可以为多种类型中的一种。 在函数定义，类字段声明中常用。

function say(x: number | string) : string {
  return x.toString()
}

* 类型断言

有点像java的强制类型转换。

方式一: <类型>值
方式二: 值 as 类型  tsx中只能用这种方式

function getLength(x: number | string) {
  if ((<string>x).length) {
    return (x as string).length
  } else {
    return x.toString().length
  }
}

类型推断

类型推断: TS会在未指定类型的时候推测出一个类型
有下面2种情况: 1. 定义变量时赋值了, 推断为对应的类型. 2. 定义变量时没有赋值, 推断为any类型

let val = 123  // number
let name = 'abc' //string
let obj; //any

接口 Interface

接口的作用是定义一个结构，定义对象的属性、行为。

可选属性用?表示

只读属性 readonly

// 定义人的接口
interface IPerson {
  id: number
  name: string
  age: number
  sex?: string
}

let p1: IPerson = {
  id: 1,
  name: '张三',
  age: 20,
  sex: '男'
}

定义函数

interface SearchFunc {
  (source: string, subString: string): boolean
}

类实现接口 implements

跟java 一样 一个类可以实现多个接口，接口可以继承接口extends

class User implements IPerson{
    id: number;
    name: string;
    age: number;
    sex?: string;
    
    constructor(id:number,name:string,age:number){
        this.id = id;
        this.name = name;
        this.age = age;
    }
}