类型注解
let age: number = 18
// 说明： :number就是类型注解
// 作用： 为变量添加类型约束，约定number为数值类型
// 解释: 约定了什么类型，只能给变量赋值该类型的值，否则代码报错
常用类型概述
TS类型，基础类型细分为2类：js已有类型、ts新增类型
js已有类型
基础类型：number、string、Boolean、null、undefined、symbool 对象类型：object（包括数组、对象、函数）
- 原始类型
let age: number = 18 // number类型
let bool: boolean = false // boolean类型
let name: string = 'zs' // string类型
- 对象类型 TS中对每个具体的对象都有自己的类型语法
// 数组 又可以细化为字符串数组、number数组、boolean数组等等
// 第一种写法（推荐）
let arr: number[] = [1,2,3]
let arr: string[] = ['1','2','3']
let arr: boolean[] = [false,true]
// 第二种写法
let arr: Array<string> = ['1','2','3']
let arr: Array<number> = [1,2,3]
.....
// 函数 函数的类型即指的是参数和返回值的类型
// 方式一：单独指定参数、返回值类型
function add(num1: number,num2: number): number{
return num1 + num2
}
const add = (num1: number,num2: number): number => {
return num1 + num2
}
// 方式二、同时指定参数和返回值类型（仅适用于函数表达式形式）
const add: (num1: number,num2: number)=>number = (num1,num2) => {
return num1 +num2
}
// 方式三、当函数没有返回值时，指定类型为void(TS新增类型)
function greet(name: string):void{
console.log('欢迎'+name)
}
// 方式四、函数参数可选（特别注意的是有多个参数的时候，可选参数一定是最后末尾的参数）
function mySlice(start?: number,end?: number){
console.log(start,end)
} // mySlice() mySlice(1) mySlice(1,2)
function mySlice(start: number,end?: number){
console.log(start,end)
}// mySlice(1,2) mySlice(1)
// 对象 描述对象属性和方法的类型 tips：单行书写使用分号分隔，换行不需要
// 方式一
let person: {name: string;age: number;sayHi(): void;greet(name: string): void} = {
name:'zs',
age:18,
sayHi() {},
greet(name){}
}
// 方式二
let person: {
name: string
age: number
sayHi:() => void
} = {
name:'zs',
age:18,
sayHi() {}
}
// 方式三 对象属性可选同函数一样，使用问号标识 ?
let person: {
name?: string
age: number
sayHi:() => void
} = {
age:18,
sayHi() {}
}
ts新增类型
联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等
// 联合类型(|)
let arr: (string | number)[] = [1,'1'] // 有小括号代表数组元素既可以是数字，也可以是字符串
let arr: string | number[] = [1,2] // 没有小括号代表，只能为字符串数组或者是数字数组
// 自定义类型（类型别名） 关键字 type 作用：可以自定义类型 简化重复书下类型
let arr1: (string | number)[] = [1,'2']
let arr2: (string | number)[] = [3,'4']
// 使用类型别名改造后
type customArray = (string | number)[]
let arr1: customArray = [1,'2']
let arr2: customArray = [3,'4']
// 接口 关键字interface
//改造前
let person: {
name?: string
age: number
sayHi:() => void
} = {
age:18,
sayHi() {}
}
let person1: {
name?: string
age: number
sayHi:() => void
} = {
age:18,
sayHi() {}
}
// 改造后
interface Iperson {
name?: string
age: number
sayHi:() => void
}
let person: Iperson = {
age:18,
sayHi() {}
}
let person1: Iperson = {
age:18,
sayHi() {}
}
// tips ： 自定义类型type与接口interface是有相似之处，也有不同之处的
// 相同点：都可以为对象定义类型，简化书写
// 不同点：接口interface只能为对象定义类型 ，type是可以给任意类型的数据，定义别名类型
// 接口继承 关键字 extends
interface person {
name: string,
age: number
}
interface son extends person {
sex: string
}
let son: son= {
name:'zs',
age:18,
sex:'男'
} // 此处name与age的类型继承于person
// 元组 [number,number]明确知道数组有几个元素，并且知道每个元素的类型(示例地图坐标[经度，维度])
let postion: number[] = [1,2,4,5]
let postion: [number,number] = [39.5427,37.123654]
// 字面量
let str1 = 'hello TS' // str1根据类型推论即为 string
const str2 = 'hello TS' // str2类型推论类型为 'hello TS'（类比常量）
// 字面量类型常配合联合类型一起使用，用来表示一组明确的可选值列表
function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {
console.log(direction)
}
changeDirection('up')
// 枚举 关键字 enum
enum Direction {up,down,left,right}
function changeDirection(direction: Direction) {
console.log(direction);
}
changeDirection(Direction.up) // 枚举成员是有值的，默认初始为0，自增长的（数字枚举）
enum Direction {up=10,down,left,right}
function changeDirection(direction: Direction) {
console.log(direction);
}
changeDirection(Direction.up) // 也可以给枚举成员设置值，同样保持自增长
enum Direction {up='up',down='down',left='left',right='right'}
function changeDirection(direction: Direction) {
console.log(direction);
}
changeDirection(Direction.up) // 字符串枚举 没有自增长的特性，枚举成员必须都设置对应的值
&tips // 字面量加联合类型的方式，跟枚举功能类似的，但是一般推荐使用字面量加联合类型的方式，
// 因为枚举，在编译为js文件时，同时会被编译成js代码
// any 不推荐使用，会使ts失去类型检查
let obj: any = {x:0}
obj.y // 访问对象不存在的属性，没有报错提示
let a // 声明变量没有赋值，会隐式具有any类型
function add(num1,num2) {} // 声明函数，参数不添加类型，也是会隐式具有any类型
类型推论
TS有类型推论的机制，用处：1、在有些情况，是可以省略类型注解的 2、可借助开发工具查看变量类型
- 声明变量并初始化
let age: number = 18 // 没有省略类型注解
let age = 18 // (推荐) 声明变量并初始化为18，根据类型推论机制age为number类型，省略类型注解
- 决定函数返回值时
function add(num1: number,num2: number) { // 确定返回值为number类型
return num1 + num2
}
类型断言
在比TS更明确值的类型时，可以使用类型断言 关键字 as
例如：
// document.getElementById('link')的类型为HTMLelement这个太广泛不能明确link的类型，
// link属性找不到href， 使用类型断言，明确link为HTMLAnchorElement类型，即可以找到a标签特有的href属性
const link = document.getElementById('link') as HTMLAnchorElement
link.href = '11111'
typeof操作符
js中可以使用typeof操作符查询变量的数据类型，在ts中 typeof操作符可以查询变量的数据类型，也可以在类型上下文中（类型注解的地方）引用变量或属性的类型
console.log(typeof 's') // string
let p = {x: 1,y: 2}
function formatPoint(point: {x: number,y: number}) {}
function formatPoint(point: typeof p) {} // 使用操作符typeof引用变量p的类型，这里等同于 {x: number,y: number}
&tips: typeof只能用来查询变量或者属性得类型，无法查询其他形式的类型（例如：函数的调用类型）
