1. 변수 Varialble
변수는 주로 const와 let을 이용하여 선언한다.
변수 선언의 기본 형태는 아래와 같다.
// 변수에 값을 넣으면서 초기화
const myStr : String = "Hello World!";
let myNum : Number = 2017;
// 변수만 초기화
let myNum : Number;
myNum = 2017;
// 변수 타입 생략
const myStr = "Hello World!";
let myNum = 2017;
변수만 초기화하는 경우 let만 선언이 가능하며, const는 사용이 불가능하다.
한 번 정해진 변수 타입은 변경이 불가능하며, 변수를 초기화할 때 변수의 타입을 적어주지 않더라도 초기화할 값으로 컴파일러가 변수의 타입을 결정할 수 있으므로 명시적인 생략이 가능하다.
const array1 : Number[] = [2017, 6, 29];
const array2 : [Number, String] = [2017, "Thursday"];
const myArr : (Number|String)[] = [2017, "Thursday"];
myArr[0] = "2017";
타입을 설정할 때, 파이프( | )를 이용하면 여러타입 중 하나를 선택할 수 있는데, 이를 유니온 타입이라고 한다.
2. 함수 Function
기본적인 함수 형태는 같으나 차이가 있다. TypeScript는 함수에도 타입 선언이 가능하며, 타입 지정 대상은 함수로 전달되는 매개 변수와 최종 리턴 값이 될 수 있다.
function myFunc1(a : number, b : number) : number {
return a+b;
}
consle.log(myFunc1(1,2));
function myFunc2(a : number, b : number) {
return a+b;
}
consle.log(myFunc2(1,2));
위의 예제에서 둘의 차이점은 리턴 값의 타입을 선언하여 보여주는 것이며, 두 함수의 결과 값은 모두 같다.
var myFunc3 = (num : number) : number => {
return (num * num);
}
var myFunc4 = (num : number) => {
return (num * num);
}
위의 예제는 Arrow 함수를 이용하여 함수를 표현항 방식이다.
var myFunc5 = (num : number) => (num * num);
또한 위와 같이 축약형태로도 사용이 가능하다.
3. 오브젝트 objects
오브젝트는 key와 value를 쌍으로 가지는 인스턴스이다. value는 스칼라(scalar), 함수, 다른 오브젝트 등을 값으로 가질 수 있다.
var objName = {
key1 : 2017,
key2 : "value",
key3 : function() {......},
key4 : ["content1", "content2"]
};
오브젝트는 위와 같은 형태로 구현할 수 있다.
그리고 오브젝트 내에 함수를 선언하여 오브젝트의 함수로 사용이 가능하다. 아래는 오브젝트 내에 함수를 선언하여 사용하는 예제이다.
var person = {
firstName : "마루나"
lastName : "J"
sayHello : function(){}
};
person.sayHello = function() {
console.log("Hello!" + person.firstName);
);
person.sayHelo();
위와 같은 형태로 사용이 가능하다. 그리고 함수의 매개변수에 오브젝트를 넣을 수 있다.
매개 변수에 사용하는 형태는 obj 혹은 obj : {firstName : string} 처럼 사용하면 된다.
4. 인터페이스 Interfaces
클래스의 구현부가 제외된 형태의 것으로 인터페이스로 선언한 객체가 인터페이스 내에 선언한 프로퍼티나 메소드를 가지는 것을 의미한다.
실질적인 구현은 인터페이스를 사용하는 클래스에서 한다.
interface Shape {
getArea() : number;
}
class Rect implements Shape {
width : number;
height : number;
constructor(width, height) {
this.width = width;
this.height = height;
}
getArea() {
return (width * height);
}
}
위와 같은 형태가 인터페이스를 사용하는 가장 기본 형태이다. implements는 Shape 인터페이스를 사용한다고 선언하는 것이므로 Rect 클래스 안에서 인터페이스를 사용해야한다.
아래는 변수 선언 방법에 대한 내용이다.
// 기본 변수 선언
value1 : string;
// 선택적으로 변수를 사용할 수 있도록 선언
value2 ?: number;
// 읽기만 가능한 변수 선언으로 변수 수정이 불가
readonly value3 : string;
위의 readonly는 프로퍼티에서 사용이 되며, 변수에는 const로 상수 선언이 가능하다.
interface square {
color?: string;
width?: number;
}
function createSquare(config : Square) : {color : string; area : number} {......}
// 에러 발생
let mySquare = createSquare({colour : "red", width : 100});
// 성공
let temp = {colour : "red", width : 100};
let mySquare = createSquare(temp);
위에서 실패한 예제는 color 변수대신 colour 변수가 들어가있다. 이 경우 명백히 잘못된 인자가 들어간 것이므로 에러가 발생한다. 하지만 아래의 경우 temp에도 color 변수가 colour로 입력되어있는 것을 확인할 수 있다. 아래의 경우에는 colour이 temp의 변수이므로 다른 곳에서 해당 변수를 사용할 수 있다고 판단하여 에러가 발생하지 않는 것이다.
interface interFunc {
(source : string, subString : string) : boolean;
}
let mySearch : interFunc;
mySearch = function(source : string, subString : string) {
let result = source.search(subString);
if (result == -1) {
return false;
} else {
return true;
}
}
인터페이스의 함수는 파라미터와 리턴 값을 지정할 수 있다. 함수 인자 이름은 변경이 가능하며, 괄호안에 값을 넣는다. return값은 ' : '을 이용하여 선언한다.
5. 클래스 Classes
이전 게시글에서 나온 ECMAScript2016(ES6)의 클래스 설명과 차이점을 비교하면서 확인하는게 더 유용할 것 같다.
class Rect {
width : number;
height : number;
static count : number;
constructor(width : number, height : number) {
this.width = width;
this.height = height;
Rect.count++;
}
}
new Rect(10, 10);
new Rect(20, 20);
Rect.count; // 2
위의 예제가 기본 클래스의 형태이며, ES6와는 달리 클래스 생성자에서 사용하는 변수는 클래스 내부 프로퍼티로 선언을 하여야한다. 선언하지 않을 경우 생성자에서 오류가 발생한다.
또한, ES6의 경우 static 메서드는 사용이 가능하지만 static 프로퍼티를 사용하지 못했다. 하지만 TypeScript의 경우 static 프로퍼티 사용이 가능하다. 그리고 접근 제한자(private, public, protected)가 사용이 가능하며, readonly도 사용이 가능하다. readonly는 어느 접근 제한자에도 제한없이 사용이 가능하다.
- readonly 사용 방법 : 접근제한자 readonly 변수;
상속을 위한 추상클래스(추상메소드를 가진 클래스)는 구현부가 없는 메소드를 가진 클래스이다. 객체 인스턴스는 생성이 불가능하며, 상속용으로만 사용이 가능하다.
+) 인터페이스는 모든 메소드가 추상 메소드인 반면 추상클래스는 실제 구현이 있는 메소드도 포함하여 사용 할 수 있다.
'알아가기 > AngularJS' 카테고리의 다른 글
| 이클립스에서 AngularJS 프로젝트 생성하기 (0) | 2017.07.20 |
|---|---|
| angularJS 프로젝트 만들기 (0) | 2017.07.18 |
| ECMAScript2015(ES6) 기본 개념 (0) | 2017.06.28 |
| 자바스크립트 패턴 모듈패턴(IIFE) (0) | 2017.06.14 |
| 자바스크립트 패턴 클로저(Closures) 개념 (0) | 2017.06.05 |