Vue3+TS学习day01

定义变量类型：任意类型 ：类型推断

//定于boolean类型
let boo: boolean = false
//定义数值类型
let num: number = 3
//定义字符串
let str: string = '我爱中国'
//定义模板字符串
let title:string =`这是我的标题${myTitle}`

//定义空值
let unde: void = null

//定义undefined

let nuoo void = undefined

//重点：null表示值为空   undefined 表示未定义

//定义任意值(any)l来定义任意类型 可以定义常量、方法

let strNum:any = '我爱中国'

strNum = 7

let anyThink:any="我爱中国"
anyThink.setName("我是中国人");
anyThink.myName.setFistName("风清扬");

//类型推断

let str = '我爱中国'

str = 12

这里会类型推断为是字符串











  

联合类型

//联合类型

let strNum: string | number;

strNum = '我是中国人'

strNum = 7

//定义联合类型可以赋值 字符串也可以赋值定义的任意类型。

//定义联合类型的方法

function getLength(strNum:string | number):number{
  return strNum.length;
}

//上述错误 number 类型中没有length ，所以错误。下面这个正确 

function getLength(strNum:string | number):string{
  return strNum.toString();
}

TS中的接口

//定义接口

interface Person {
  name: string
  age: number
}

//tom 接收接口 注意重点：接口名首字母大写，后面要用等号 = 连接 

 
let tom: Person = {
  name: '张三',
  age: 18,
}
//上述接口中定义类型和接收类型需要一致，如果不一致如下：

//接口中可选属性用?  如下：


interface Person {
  name: string
  age?: number
}

let tom: Person = {
  name: '张三',
 
}

//接口中任意属性定义

interface Person {
  name: string
  age: number
  [promName: string]:any
}

let tom: Person = {
  name: '张三',
  age: 18,
  sex:'男',
  higt:'178cm'
}

//定义只读属性  

interface Person {
  readonly id:number
  name: string
  age: number
  [promName: string]:any
}

let tom: Person = {
  id:100,
  name: '张三',
  age: 18,
  sex:'男',
  higt:'178cm'
}

tom.id = 500; 

//只读属性定义了，就不能修改。

TS中数组

let arr: number[] = [11, 15, 17, 21, 56, 89]

//上述定义了一个number 类型的数组
//给数组追加元素
arr.push(8)

//下面定义了一个任意数组

let temp :any[] =[12,15,'张三','赵六',true,false,null]

temp.push('王五')
temp.push('李四')

console.log(temp)

TS中函数：

//函数定义
function sum(a:number,b:number):number{
  return a+b;
}

sum(215,117)

//这样定义的函数只能按照数量类型匹配传值，不然会报错。


/函数表达式定义
let num = function (a:number,b:number):number{
  return a + b;
}

console.log(num)
//这里用到了类型推断  num 没有定义类型，num根据函数表达式推断为是number 

//指定类型定义

let num2: (a: number,b: number) => number = function (a:number,b:number):number{
  return a + b;
}

通过=> 后面是类型