'WEB-INF'에 해당되는 글 916건

AngularJs2 란? - What's angularJs2

1. 정의

- 앵귤러Js 와는 전혀 다른 프레임 워크(핵심 개념은 같다)

- 클래스 중심의 프로그래밍

- 컴포넌트에 의해 영역이 명확

- 지시자와 바인딩을 이용한 프로그래밍 템플릿 개발

2. 특징

- 컴포넌트가 개발의 중심

- 타입 스크립트를 주력 언어로 채택

- AngularJs 보다 로딩 시간과 바인딩을 통한 렌더링 성능이 빨라졌다

타입스크립트의 클래스 typescript classes

1. 정의

- 인스턴스화(물체화) 시키기 위한 값들(함수, 변수..)등의 모음이다

- 자바와 매우 흡사하다

2. 클래스의 특징

- 수식자 (public, private, protected..)  이 존재하며 변수나 함수를 선언한다

- 함수가 선언된다면 꼭 내용이 있어야 한다

- constructor를 선언 할 수 있다

1) 예제

class Point{ x: number; constructor(x : number, public y: number = 0){ this.x = x; } sum(){ return "hello"; } static origin = new Point(0 ,0); } var point1 = new Point(22, 33); //y값의 자동으로 0 들어간다 var point2 = new Point(25);

타입스크립트의 인터페이스 - typescript interface

1. 정의

- 함수나 오브젝트가 구조적으로 어떤 구조를 가져야 하는지에 대한 약속이다

- 자바의 인터페이스와 흡사하다

2. 인터페이스(interface)

1) 오브젝트 구조

interface Dummies { name : string; age?: number; //optional greet() : void; } var person : Dummies = { name : "Hee", age : 23, greet() { } }; var person1 : Dummies = { name : 'Jeong', greet() {} }

- ? : 선택적으로 오브젝트를 만들 때 넣을 수도 있고 안넣을 수도 있다

- ? 을 제외한 모든 부분은 만들어 져야 한다

2) 함수 구조

interface Search{ ( source : string, sub : string ) //함수의 반환 형태는 boolean : boolean } //인터페이스를 적용한다 var mySearch : Search; //인터페이스가 적용된 함수명을 이용하여 작성 mySearch = function (src : string, sub : string) { return true; }  

- 함수의 파라미터 명은 변경이 가능하지만 타입은 불가능 하다

타입스크립트의 함수 - Typescript function

1. 기본 함수

- 타입스크립트의 기본 함수 형태

//named function hello(){ return "helloWorld"; } //anonymous let bye = function(){ return "bye"; } console.log(hello()); console.log(bye());

- 기본 형태는 일반 스크립트와 같다

2. 타입스트립트(typescript) 함수 

1). typing the function(타입함수)

function hello(a: number, b:number){ return a+b; } console.log(hello(3,2));  

- 파라미터에 타입을 작성한다

2) writing the function(함수를 변수에 저장)

//: number는 반환 형태를 나타낸다 var step1 = function(num : number) : number{ return num * num; } console.log(step1(1)); var step2 = function(num : number){ return num * num; } console.log(step2(2)); //=> 를 이용하여 함수를 표현한다 var step3 = (num : number) : number => { return num * num; } console.log(step3(3)); var step4 = (num : number) => { return num * num; } console.log(step4(4)); //함수의 축약 형태이다 var step5 = (num : number) => num * num; console.log(step5(5));  

- 결과는 모두 같지만 함수를 작성하는 형태가 다르다