FrontEnd Typescript – Array

Typescript – Array

자바스크립트에서 배열은 Array 클래스의 인스턴스이며 다음과 같이 선언

let { 배열이름 } = new Array ( 길이 )

자바스크립트에서 배열은 다른 언어와 다르게 객체임 . 배열은 Array 클래스의 인스턴스인데 클래스의 인스턴스는 객치이기 때문

let a = [1,2,3]
let o = {name:'jack', age:32 }
console.log(Array.isArray(a) , Array.isArray(o)) // true , flase

배열의 타입

  • 타입 스크립트에서 배열의 타입은 아이템 [] 형식이며 배열의 아이템이 number이면 배열의 타입은 number[] 이며 String은 String[] 임
let numArray: number[] = [1,2,3]
let strArray: string[] = ['Hello','World']

type IPerson = {name: string,age?:number}
let personArray: IPerson[] = [{name:'Jack'}, {name:'Jane
,age:32}]

배열의 for…in문

  • 자바스크립와 타입스크립트는 for문을 좀더 쉽게 사용해주기 위해 for …in 문을 제공하여 배열도 객체이므로 배열에도 사용할 수 있음
let names = ['Jack', 'Jane', 'Steve']

for(let index in names){
		const name = names[index]
		console.log('[${index}] : ${name}') // [0]: Jack [1]: Jane ...
}

제네릭 방식의 타입 – 배열편

  • 배열을 다루는 함수를 작성할 때는 number[]과 같이 타입이 고정된 함수를 만들기 보다는 T[]형태로 배열의 아이템 타입을 한꺼번에 표현하는것이 편맇며 이와같은 방법을 제네릭(Generic)타입이라고 함
const arrayLength = (arry) => array.length

  • 이 함수가 number[], string[], IPerson[] 등 다양한 아이템 타입을 가지는 배열에 똑같이 적용되게 하려면 다음과 같이 표현
const arrayLength = (array: T[]): number=> array.length

Leave a Reply

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Related Post

React 프로젝트 구조와 폴더 설명React 프로젝트 구조와 폴더 설명

React는 효율적인 UI 개발을 지원하는 강력한 라이브러리입니다. React 프로젝트를 체계적으로 관리하기 위해 적절한 폴더 구조를 설계하는 것은 매우 중요합니다. 이번 글에서는 React 프로젝트의 기본 구조와 주요 폴더의 역할에 대해 자세히