前端TS学习笔记 (TS几种类型)

许你满眼星辰

已于 2022-09-06 17:44:07 修改

阅读量3.4k

点赞数

文章标签：学习前端 TS

于 2022-09-02 18:00:10 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58849641/article/details/126667732

版权

本文详细介绍了TypeScript中的基本数据类型，如布尔、数值和字符串，以及数组和联合类型的使用。此外，还讲解了类型别名和函数类型的定义，包括函数参数和返回值的类型指定。最后，涉及到了对象类型、可选参数、对象字面量以及函数无返回值的情况。通过实例展示了TypeScript在类型系统的严谨性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.TS声明数据类型

const isBoon:boolean = false;              //定义isBoon为布尔类型
const nums:number = 10;                    //定义nums为数值类型
const str:string = "hello world";          //定义str为字符串类型

2.TS数组类型

const list1:number[] = [1, 2, 3];           //定义list1为数组类型  并只能在里面只能数值
const list2:string[] = ['小明', '小李'];    //定义list2为数组类型  并只能在里面只能字符串
const list3:Array<string>=['小明', '小李']; //这是定义数组类型 只能字符串 另外一种写法

3.TS联合类型

//数值和字符串二选一   只能选一个类型   不能多选
const list1 : number | string = 9
const list2 : number | string = '小明'

//数组（没括号的） 看后者定义什么类型  就是什么类型   不能二选一
const list3 : string | number[]=[1,3]
const list4 : number | string[]=['小明','小王']

//数组（有括号的） 可以共存   这是最终写法
const list5 : (number | string)[]=[9,'小王']

4.TS类型别名 (也叫自定义类型)

//定义customArray1是数值类型   则都可以用customArray1去定义
type customArray1=number
let arr1:customArray1=9

//定义customArray2是字符串类型   则都可以用customArray2去定义
type customArray2=string
let arr2:customArray2='小明'

//定义customArray3既可以是数值又可以是字符串数组类型   则都可以用customArray3去定义
type customArray3=(number | string)[]
let arr3:customArray3=[1,'a']
let arr4:customArray3=[2,'b']

5.TS函数类型

//函数类型num1  num2规定只能数值  number规定返回值是数值
function addnumber(num1:number,num2:number):number{
    return num1+num2
}

console.log('合计',addnumber(5,6))



//表达式类型
const addnumber1=(num1:number,num2:number):number=>{
    return num1+num2
}

console.log('合计2',addnumber1(9,9))

6.TS同时指定参数,返回值类型 (理解就行)

const add:(num1:number,num2:number)=>number=(num1,num2)=>{
    return num1+num2
}

7.TS当函数没有返回值函数返回值类型为: void

function sayName1(myName:string):void{
    console.log(myName)
}

8.TS函数可选参数

function getNum(start?: number, end?: number): void {
    console.log(start, end)
}


getNum()        //undefined undefined
getNum(6)       //6 undefined
getNum(6, 9)    //6 9

可选参数：在可传不可传的参数名称后面添加 ? (问号)

注意：可选参数后面不能再出现必选参数

9.TS对象类型

//给person对象规定类型
let person: { name: string; age: number; sayHello(): void; sayName(name: string) } = {
    name: '小明',
    age: 13,
    sayHello() { },
    sayName(name) { }
}




//当对象过多的时候    可以用以下写法
let person: {
    name: string
    age: number
    sayHello(): void
    sayName(name: string)
} =
{
    name: '小明',
    age: 13,
    sayHello() { },
    sayName(name) { }
}