typescript笔记一：基础类型

1. TS的数据类型

TS常用类型

类型	描述
String	字符串类型
Nubmer	数字类型
Boolean	布尔值类型
Object	对象类型
Array	数组类型
any	任意类型(不推荐)
unknown	类型安全的any类型
void	空值（undefined)
never	不能是任何值
tuple	元组，TS新增类型，固定长度数组
enum	枚举，TS新增类型

1.1 基础类型声明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

// 1.字符串类型
let sayHi: string = '你好'
// 2.数值类型
let money: number = 0
// 3.布尔类型
let isLogin: boolean = false
// 4.symbol类型
const sym1 = Symbol("user")
const sym2 = Symbol("user")
const userList = {
    [sym1]: "Admin",
    [sym2]: "用户"
}
// 5.数组类型
let userNameList: string[] = ["张三", "李四", "王五"] // 写法一

let userNameList2: Array<string> = ["张三", "李四", "王五"] // 写法二
// 6. 对象类型  一般不用
let adminInfo: object = {
    name: "法外狂徒",
    age: "189"
}
//我们不能获取对象单个数据，也不能设置数据
// adminInfo.user = "哈哈哈" //报错
// adminInfo[name] = "张三"  //报错

// 在TypeScript中，它们各自的类型也是undefined和null，也就意味着它们既是实际的值，也是自己的类型
// 7.undefined
let nnd: undefined = undefined
// 8. null
let nll: null = null

1.2 any和unknown类型

any是类型类型，默认不声明时为any类型

//可以对any类型的变量进行任何的操作，包括获取不存在的属性、方法
//any类型的变量赋值任何的值，比如数字、字符串的值
let say : any = "hi"
 	say = 2
 	say = false

unknown 是类型安全的any类型

作用场景：定义类型不确定的变量

//unknown 是类型安全的any类型
let user:unknown ；
let name:unknown ；
	user= "憨八龟"；
 // 注意：unknown类型的变量不能直接赋值给其他变量  
  例如：  let name = user  则直接报错
  //此时我们可以使用类型断言
 //类型断言，可以用来告诉解析器的变量的实际类型
   name = user as String
   //或者
   name = <string> user

function demo(): string {
    return "demo"
}
function demo2(): number {
    return 23
}
const flag = true
let known: unknown
if (flag) {
    known = demo()
} else {
    known = demo2()
}

if (typeof known === 'string') {
    console.log(known.length);
}

1.3 void类型

void类型一般表示一个空值。

常用场景：当方法没有返回值的时候

//没有返回值的时候 默认void类型 可不写
function sum (num1:number,num2:number):void{
	console.log(num1)
}

1.4 never类型

never 表示永远不会发生值的类型。

常用场景：抛出异常

function  fn():never{
	throw new Error ("报错了")//JS报错后无法继续向下执行
}

function getType(getType: number | string) {
    switch (typeof getType) {
        case "string":
            console.log("执行参数为string类型时的函数");
            break
        case "number":
            console.log("执行参数为number类型时的函数");
            break
        default:
            const check: never = getType //永远不会产生值

    }
}

1.5 tuple类型

元组，元组就是固定长度的数组。元组中每个元素都有自己特性的类型，根据索引值获取到的值可以确定对应的类型。

在开发中,数组建议存放相同类型的元素，不同类型的元素最好放在对象或者元组中。

const user: [string, number, number] = ["张三", 8888, 2321]
const name = user[0] //张三 类型string

元组也常用于作为返回值

来自公众号codewhy笔记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

function useState<T>(state: T): [T, (newState: T) => void] {
    let currentState = state
    const changeState = (newState: T) => {
        currentState = newState
    }
    return [currentState, changeState]
}
const [counter, setCounter] = useState(19)

2. TS类型补充

2.1 函数参数类型

// 在开发中,通常情况下可以不写返回值的类型(自动推导)
function sunPrice(price1: number, price2: number): number {
    return price1 + price2
}
sunPrice(20, 30)

上下文中的函数: 可以不添加类型注解：

const user= ["张山","李四","王五"]
user.forEach((item)=>{
	console.log(item)
})

2.2 可选类型–?:

//Z是可选类型 格式 ?:
function printPoint(point: {x: number, y: number, z?: number}) {
  console.log(point.x)
  console.log(point.y)
  console.log(point.z)
}

printPoint({x: 123, y: 321})

2.3 联合类型 --|

当变量或参数不止类型有多种时使用：

function getUser(openId: number | string) {
    if (typeof openId == "number") {
        // xxxx
    } else {
        // xxx
    }
}
getUser(20)

2.4 类型别名–type

ts通过type定义类型别名，提升代码阅读性。

//未定义类型别名时
function getCord(cord: { x: number ,y: number ,z?: number
}) {
 
 }


//定义类型别名后
type cord = {
  x: number
  y: number
  z?: number
}
function getCord(cord: cord) {
  
}

2.7 可选链操作符–!

可选链操作符是ES11中增加的特性。它的作用是当对象的属性不存在时，会短路，直接返回undefined，如果存在，那么才会继续执行。在TS中同样支持：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

type Person = {
    name: string,
    price?: {
        subsidy?: number,
        privateAccount: number
    }
}
const userInfo: Person = {
    name: "你好",
    // price: {
    //     subsidy: 200, //补贴
    //     privateAccount: 399,//个人账户
    // }
}
//未使用可选链
console.log(userInfo.name)
console.log(userInfo.price.subsidy)//报错


//使用可选链
console.log(userInfo.name)//你好
console.log(userInfo?.price?.subsidy)//undefined

2.8 !!和??

??和!!都是es6+的特性

1.!!操作符：

将一个其他类型转换成boolean类型

//!!操作符等同于Boolean()
const message = ""

let flag = Boolean(message)
let flag1 = !!(message)
console.log(flag); //false
console.log(flag1);//false

2.??（空值合并操作符）操作符：

当操作符的左侧是 null 或者 undefined 时，返回其右侧操作数， 否则返回左侧操作数。

??操作符和||语法有点类似

但是??操作符的返回值不是左边就是右边

而||语法可以有多个选择例如 type= demo||emo||" 未知"

||语法常用于if判断

const message="你好啊"
const result =message?? "我好啊" //如果message为false 返回右侧

2.9 字面量类型

type selectorType = "radio" | "checkbox" | "input"
// 字面量类型 selector的类型只能是"radio" | "checkbox" | "input"三种
function getSelector(selector: selectorType) {
    if (selector === "input") {
        console.log("选择器", selector)
    } else {

    }

}
getSelector("input")

2.10 类型缩小

类型缩小就是类型保护。通过判断缩小范围。

常见的类型保护有以下几种：

• typeof
• 平等缩小（、=、！==)等等
• instanceof
• in

1. typeof

在 TypeScript 中，检查返回的值typeof是一种类型保护：因为 TypeScript 对如何typeof操作不同的值进行编码

type Car = number | string

function carType(car: Car) {
    if (typeof car == 'number') {

    }
}
carType(213)

2.平等缩小

我们可以使用Switch或者相等的一些运算符来表达相等性（比如===, !==, ==, and != ）。

type selectorType = "radio" | "checkbox" | "input"
// 字面量类型 selector的类型只能是"radio" | "checkbox" | "input"三种
function getSelector(selector: selectorType) {
    if (selector === "input") {
        console.log("选择器", selector)
    } else {

    }

}
getSelector("input")

3. instanceof

JavaScript 有一个运算符来检查一个值是否是另一个值的“实例”，也可以判断复杂类型的具体类型。

class student1 {
}
class student2 {

}
function work(p: student1 | student2) {
    if (p instanceof student1) {
        console.log("执行student1")
    } else {
    }
}
let sdt = new student1()
work(sdt)

4. in

如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。

type Fish = {
  swimming: () => void
}

type Dog = {
  running: () => void
}

function walk(animal: Fish | Dog) {
  if ('swimming' in animal) {
    animal.swimming()
  } else {
    animal.running()
  }
}

const fish: Fish = {
  swimming() {
    console.log("swimming")
  }
}

walk(fish)

3. 函数

3.1 函数的类型

//1.函数的返回值定义
//:number 代表该函数的返回值
function sum(x: number, y: number): number {
    return x + y;
}
//2.函数表达式的类型声明
//注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>
// 定义常量时, 编写函数的类型
type AddFnType = (num1: number, num2: number) => number
const add: AddFnType = (a1: number, a2: number) => {
  return a1 + a2
}

案例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2 参数的可选类型

// b?:number 代表b参数是可选的
// 注意：可选类型必须在必传类型的后面
function logNbr(a: number, b?: number) {
    console.log(a, b); //20 undefined
}
logNbr(20)

3.3 默认参数

在函数中我们可以给一个参数赋予默认值，当我们传递的参数值为undefined时，使用默认值。

在开发中 我们传递的参数有时候我们获取的，有可能获取的值为undefined

function logNbr(a: number, b: number = 20) {
    console.log(a, b); //20 20
}
logNbr(20, undefined)

export { }

3.4 剩余参数

剩余参数 是ES6+提出的，TS也同样支持。

function sum(defalut: number, ...nbrList: number[]): number {
    let total = defalut
    nbrList.map(item => {
        total += item
    })
    return total

}
console.log(sum(30, 40, 60)) //130
console.log(sum(30, 40, 50, 60)) //180

3.5 函数的this

TS中对this是有默认推导的：

const info = {
    name: "hello",
    say() {
    	//this指向info==>作用域链
        console.log(this.name)
    }

}
info.say()

但是当我们的this指向不明确时，TS就会报错

function say() {
//error:'this' implicitly has type 'any' because it does not have a type annotation.
    console.log(this.name)
}
const info = {
    name: "hello",
    say
}
info.say() 
//因为ts检测时不确定你会以什么形式调用say方法 ,所以检测不通过
//有可能是通过info.say()||say()..
//say()调用时 this指向没有name就报错

当我们指定this类型后：

// 指定this
function say(this: { name: string }) {
    console.log(this.name) 
}
const info = {
    name: "hello",
    say
}
info.say() //hello
//需要通过call绑定this
say.call({name:"刘德华"}) //刘德华

3.6 函数的重载

函数的重载又称为重载签名，表示函数可以使用不同的方式进行调用。

JS的话不会实现重载而是直接覆盖。

如果可以使用联合类型则优先使用联合类型。

// 案例: 做一个通用累加 如果是数字则相加 如果是字符则字符长度相加
// 两个参数类型相同

function sum(op1: number, op2: number): number
function sum(op1: string, op2: string): number
function sum(op1: any, op2: any): any {
    if (typeof op1 === "string") {
        return op1.length + op2.length
    }
    return op1 + op2
}

console.log(sum(20, 20)) //40
console.log(sum("abcd", "efg")) //7