前端 typescript TS基础用法

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

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

许多新项目，如果选择VUE3或React进行开发时，大多都会带上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 = ['234', 'sdges']

let arrb: Array = [234, 124, 7456]

let arrc: Array = [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返回值

相关文章