TypeScript核心

常用操作方式

1、类型推断

在这里插入图片描述

ts会根据变量存放的初始值来进行变量类型限定。
如上:开始str是字符串,则此变量以后就只能存字符串值。
开发中的意义:变量分配字符串值,后期可能会书写一些字符串功能、方法等相关的操作,如果在过程中突然分配了一个数值,意味着这些针对字符串的操作都会出现错误,为了避免这种情况,ts有这种类型约束功能。
不建议书写,看起来不直观

2、类型注解

在这里插入图片描述

3、类型断言

在这里插入图片描述
程序在推断的时候认为有可能是 undefined,而 undefined * 5 就会变成 NaN

假如确定里面的值是必然有值大于2,可以通过类型断言的方式来设置,操作如下:

在这里插入图片描述

语法:变量 as 类型 或者 <类型>变量

4、基础类型和联合类型
let v1: string = 'abc'
let v2: number = 10
let v3: boolean = true
let nu: null = null
let un: undefined = undefined
any类型

any 表示任意类型,设置后相当于关闭了TS的类型检查,不建议使用;如果声明变量不指定类型,则TS解析器会自动判断变量为 any

let an: any
let s: string
s = an

any类型变量可以赋值给任意变量
在这里插入图片描述

unknown类型

unknown 表示未知类型的值,实际上就是一个类型安全的any,unknown类型的变量,不能直接赋值给其他变量

let unk: unknown
unk = "hello"
let s: string
if(typeof unk === "string") {
    
    
   s = unk
}
// 或者使用类型断言
s = unk as string
s = <string>unk

联合类型,希望值有可能被分配为字符串或null

let v4: string | null = null

null默认是可以分配给其他任意类型的

除了限定类型以外还可以做一些具体值的限定

在这里插入图片描述

let v5: 1 | 2 | 3 = 2
5、对象

{ } 用来指定对象中可以包含哪些属性

let a: {
    
    name: string, age?: number}
a = {
    
    name: "张三", age: 18}

[propName: string]: any表示任意类型的属性

let b: {
    
    name: string, [propName: string]: any}
b = {
    
    name: "张三", age: 18, gender: "男"}

设置函数结构的类型声明

let c (a: number, b: number) => number
6、数组、元组、枚举
数组

在这里插入图片描述

由数值组成的数组

let arr: number[] = [1, 2, 3]

let arr: Array<number> = [1, 2, 3]
元组

元组也可以存储多个数据,但它限定了存储的数据个数及每个数据的类型(固定长度的数组)

在这里插入图片描述
必须都匹配上

let t: [number, string, number] = [1, 'abc', 2]

希望某个值可选,在类型后加?

let t: [number, string, number?] = [1, 'abc']
枚举

枚举需要使用关键字enum,后面书写要声明的枚举类型名称,接着大括号里写要使用的数据

在这里插入图片描述

把所有可能的情况都列举出来,设置多个值,结果在多个值之间选择的时候适合用枚举

enum Gender {
    
    
    Male,
    Female
}
let r: {
    
    name: string, gender: Gender}
r = {
    
    
    name: "张三",
    gender: Gender.Male
}
7、函数

void类型 只能被分配 undefined 值(严格模式)

一般在使用的时候很少会给变量去赋这个值,通常用在函数上,比如函数没有返回值的时候默认就是 undefined

在这里插入图片描述

在配置的时候配置了不允许由 any 的情况,可以给参数分配类型

function MyFun (a: number, b: string) {
    
    
   return a + b
}

可以给返回值分配类型

在这里插入图片描述

当函数有返回值的时候不能写 void ,要写一个具体类型

function MyFun (a: number, b: string): string {
    
    
   return a + b
}
function MyFun (a: number, b: string): number {
    
    
   return 1
}

当类型与返回值不一致时也会报错

在这里插入图片描述

可以把参数设置成可选,注意:可选参数要放在必选参数之后

function MyFun (a = 10, b: string, c?: boolean, ...rest: number[]): number {
    
    
   return 1
}
const f = MyFun(10, 'abc', true, 1, 2, 3)
8、接口

通常用来进行一个对象的定义

interface Obj {
    
    
   name: string,
   age: number
}
const obj: Obj = {
    
    
   name: 'abc',
   age: 18
}
9、类型别名
type Username = string | number
let username: Username = 'jack'

type myType = 1 | 2 | 3 | 4 | 5
let k: myType
10、泛型
function myFn (a: number, b: number): number[] {
    
    
   return [a, b]
}

通过这个函数想处理一组字符串值、一组布尔值或者其他各种各样的值,做成一个比较通用的函数

function myFn<T> (a: T, b: T): T[] {
    
    
   return [a, b]
}
myFn<number>(1, 2)
myFn<string>('abc', 'def')

猜你喜欢

转载自blog.csdn.net/m0_46613429/article/details/140689770