博客

TS是JS的超集，JS所拥有的，TS都有。

JS是弱类型语言，天生存在很多缺陷。

而TS是强类型语言，有了TS加持，JS应用会变得更加稳定且强大。

许多新项目，如果选择VUE3或React进行开发时，大多都会带上TS。

TS是前端领域大势所趋。

TS基础用法

基础类型

let name: string
let age: number
let isVip: boolean
//变量声明时，加上一个类型
name = '234'
age = 234
isVip = true
//使用变量时，类型必须是前面定义好的

数组类型

// 写法一
let arr: number[] = [234, 15, 1]
let arr2: boolean[] = [true, false]
// 写法二
let arra: Array<string> = ['234', 'sdges']
let arrb: Array<number> = [234, 124, 7456]
let arrc: Array<boolean> = [false, false, true]

联合类型

let joint1: (number | string | boolean)[]
joint1 = ['2345', 23423, true]

let joint2: (number | null)
joint2 = null

类型别名

// type用来定义类型别名，类型别名建议大写开头
type Alias1 = (string | number)
type Alias2 = number[]

let a1: Alias1 = '245'
let a2: Alias2 = [234]
//使用类名别名，方便复用

函数类型

function add(n1: number, n2: number): number {
    return n1 + n2
}
let addFn = add(1, 3)
console.log('当前打印---', addFn)   //4

箭头函数

const jt = (n1: number, n2: number): number => {
    return n1 - n2
}
console.log('当前打印---', jt(5, 2))    //3
console.log('当前打印---调用number类型自带的方法', jt(9, 2).toFixed(9))    //7.000000000

函数类型别名

// 定义一个别名
type AddFn = (num1: number, num2: number) => number
// 使用别名AddFn
const add2: AddFn = (num1, num2) => {
    return num1 + num2
}
console.log('当前打印---add2', add2(10, 20))  //30

viod特殊类型，用于标记函数没有返回值

const greet = (msg: string): void => {
    console.log('当前打印---', 'Hello,' + msg)  //Hello,程心
}
greet('程心')

const temp = (): void => {
    console.log('当前打印---', '云天明')  //云天明
}
temp()

函数可选参数，参数可传可不传，即参数名后面加?

// 必选参数不能位于可选参数后面
const optional = (msg: string, num?: number) => {
    console.log('当前打印---', `${msg},${num}`)  //234,999
}
optional('234', 999)

对象类型

// 空对象
let obj1: {} = {}

// 有一属性的对象
let obj2: { name: string } = {
    name: '24'
}

// 有多个属性或方法的对象，注意定义多个属性的类型时用分号隔开
let obj3: { name: string; age: number; sayHi(): void } = {
    name: 'sf',
    age: 234,
    sayHi() {
        console.log('当前打印---', 'Hi')
    },
}

// 对象类型别名
// 考虑到复用，对象类型用类型别名存储
// 这里面的方法为可选，为下面做铺垫
type ObjType = { name: string; age: number; isVip: boolean; sayHi?(): void }
let newObj: ObjType = {
    name: 'fff',
    age: 0,
    isVip: true,
    sayHi() {
    },
}
console.log('当前打印---', newObj)
// 方法如果是可选的，那么就有可能是为undefined，那么undefined调用括号就会报错
// 解决方案：加判断，或者短路运算，或者可选链操作符
newObj.sayHi && newObj.sayHi()
// 可选链操作符，跟上面&&是一样的作用
newObj.sayHi?.()

接口类型

// 只能用来定义对象类型别名
// interface和type的相比，少了等于号
// type存什么都可以，interface只能存对象
interface Person {
    name:string
    gender:string
    age:number
    habby?():void
    love?:string
}

let t:Person = {
    name:'34',
    gender:'342',
    age:9
}
console.log('当前打印---',t)

接口继承

interface Point2D{
    x:number
    y:number
}

interface Point3D extends Point2D {
    z:number
}
// extends关键字实现继承
let point:Point3D = {
    x:444,
    y:333,
    z:88
}

type实现接口继承

// 与interface的区别在于，extends换成了&符号
type Point2D2 ={
    x:number
    y:number
}
type Point3D2 = Point2D2 & {
    z:number
}

let typePoint:Point3D2 = {
    x:43,
    y:234,
    z:9
}

元组类型

// TS的元组其实就是特殊的数组：
// 1.元组的长度是固定的
// 2.元组的每一项类型也是固定的

// 数组
let arr5:number[]
arr5 = [23,23,4]

// 元组
// 定义了两个number，那么arr6数组只能有两个元素
let arr6:[number,number]
arr6 = [234,235]

TS 类型推论

// 如果没有定义类型，TS会根据初始值推断出类型，鼠标悬停即可看到
let h = 'rte'
// 重新赋值为string，可以
h = 'sf'
// 重新赋值为number，会报错
// h = 234

// 注意：能省略--类型的情况
// 一、声明变量或形参的时候，提供初始值
// 二、主动写了函数return返回值