前言
在 TypeScript 中，掌握数组类型、对象数组、二维数组等概念，对于构建复杂的数据结构至关重要。本文将深入探讨这些基本概念，并通过具体的代码示例详细展示它们的使用方法。此外，我们还将介绍函数和函数重载的概念，帮助您灵活地处理多种函数签名和参数。
数组类型
// 数组普通类型 let arr:number[]=[123,41242,1] let arr:string[]=["123","1232"] let arr:any[]=[1,"1",true] let arr:Array<boolean>=[true,false]
对象数组
interface X{ name:string age?:number } let arr:X[]=[ { name:"youren" } ]
二维数组
let arr:number[][] =[[1],[2],[3]] let arr:Array<Array<number>> =[[1],[2],[3]]
函数
function a(...args: any[]){ console.log(args) } a(12,3)
arguments
function a(...args: any[]){ console.log(arguments) } a(12,3)
函数使用
function add(a: number, b: number): number { return a + b } console.log(add(2, 1)); 后面的number 为返回的类型
function add(a?: number, b: number=2): number { return a + b } console.log(add());
对象的使用
箭头函数不能包含 this
interface Obj { user: number[], add: (this: Obj, num: number) => void //没有返回类型 } let obj: Obj = { user: [12, 13], add(this: Obj, num:number) { console.log(this,num) } } obj.add(3)
函数重载
可以传入 一个 id 和一个数组
当输入一个的时候是查找
多个的时候就是推入
let user: number[] = [1, 2, 3] // 传id // function findNum(id: number): number[] // // 查全部 // function findNum(): number[] function findNum(ids?: number | number[]): number[] { if (typeof ids == 'number') { return user.filter(v => v == ids) } else if (Array.isArray(ids)) { user.push(...ids) return user } else { return user } } console.log(findNum([4, 2, 1]))
interface IUser { id : number, name : string } let user : IUser[] = [ { id: 1, name: 'jack' }, { id: 2, name: 'tom' }, { id: 3, name: 'jerry' }, ]; function finNum(id : number) { return user.filter(v => v.id===id); } const a = finNum(1); console.log(a)
function finNum(id: number) { return user.find(i => i.id === id); }
内置对象
规则
Number是一个内置对象，有一些自己的方法 提供了处理数值的静态方法和属性，在TypeScript中也可以作为构造函数来使用，。
dom
bom
小案例
let canvas = document.querySelector('canvas') as HTMLCanvasElement let ctx = canvas.getContext('2d'); canvas.width = screen.availWidth canvas.height = screen.availHeight let str: string[] = 'XMLASB010101'.split('') let Arr = Array(Math.ceil(canvas.width / 10)).fill(0) const rain = () => { ctx!.fillStyle = 'rgba(0,0,0.0.05)' ctx!.fillRect(0, 0, canvas.width, canvas.height) ctx!.fillStyle = '#0f0' Arr.forEach((item, index) => { ctx?.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10) Arr[index] = item > canvas.height || item > Math.random() * 10000 ? 0 : item + 10 }) } setInterval(rain, 40)
let canvas = document.querySelector('#canvas') as HTMLCanvasElement let ctx = canvas.getContext('2d') as CanvasRenderingContext2D canvas.height = screen.availHeight; //可视区域的高度 canvas.width = screen.availWidth; //可视区域的宽度 let str: string[] = 'LOVE010101LOVE'.split('') let Arr = Array(Math.ceil(canvas.width / 10)).fill(0) //获取宽度例如1920 / 10 192 console.log(Arr); const rain = () => { ctx.fillStyle = 'rgba(0,0,0,0.05)'//填充背景颜色 ctx.fillRect(0, 0, canvas.width, canvas.height)//背景 ctx.fillStyle = "#0f0"; //文字颜色 Arr.forEach((item, index) => { ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10) Arr[index] = item >= canvas.height || item > 10000 * Math.random() ? 0 : item + 10; //添加随机数让字符随机出现不至于那么平整 }) console.log(Arr); } setInterval(rain, 80)
