본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


TypeScript

Typescript 배열

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2019. 4. 26.

 

 

배열의 기능은 자바스크립트와 동일하다.

변수에 형태를 써주는 것 뿐 대부분 사용되는 문법, 종류, 함수 등 거의 동일한 구조로 되어 있다.

var nums : number[] = [1, 2, 3, 4, 5];
for (var i = 0; i < nums.length; i++) {  //일반적인 반복문
   console.log(nums[i]);
}

nums.push(6);

nums.forEach(function(val){  //foreach
   console.log(val);
});

nums[0] = 0;

for(var j in nums){  //in 형태
   console.log(nums[j]);
}

...

나중에 클래스를 조금 더 살펴봐야하지만 타입스크립트에서는 자바처럼 제네릭을 활용하여 자료형을 맞추어주면 배열이던지 아니면 부모 - 자식 관계든 여러가지 종류로 사용 가능 하다.

아래 코드는 제네릭을 활용한 클래스를 배열에 담는 코드이다.

class CustomArray {  //사용자 클래스
   constructor(private num : number){  //생성자를 통한 변수 넣기
   
   }
   public abcd(){
       console.log(this.num);
   }
}


const array : CustomArray[] = new Array<CustomArray>();  //제네릭을 활용하여 배열생성

array.push(new CustomArray(100));  //데이터 넣어주기
array.push(new CustomArray(200));
array.push(new CustomArray(300));


array.forEach( (item)=> item.abcd() );  //출력

push, slice, map, filter 등등 자바스크립트에서 사용하였던 기능 대부분 사용 가능하다.

* ts파일은 자바스크립트 형태 파일이 아니며, 컴파일 되기 전 형태의 파일이다.

* ts파일은 java처럼 java 파일 형태이지 class 파일 형태가 아니다.

* ts파일은 반드시 tsc 명령어를 통해 js 파일로 컴파일 해야 된다 (예: tsc 대상파일.ts) -> js파일을 만들어줌

* 만들어진 js 파일은 html에 넣어서도 사용 가능하며, 일일이 하기 귀찮을 때는 node 대상.js를 입력하면 결과를 볼 수 있다

반응형

'TypeScript' 카테고리의 다른 글

Typescript 인터페이스  (0) 2019.04.26
Typescript 유니언(Union)  (0) 2019.04.26
Typescript 함수  (0) 2019.04.26
Typescript 자료형  (0) 2019.04.25
TypeScript 시작  (0) 2019.04.25
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글