Angular에서 사용되는 타입스크립트 문법
타입스크립트에 대한 간단한 문법을 정리하려고 합니다.
타입과 문자열
선언자
- var : javascript에서 전통적으로 사용해온 선언자로 모든 타입을 허용
- let : typescript에서 특화시킨 선언자로 타입을 지정해야 함
배열타입
배열의 타입을 아래와 같이 설정하며 배열에 값을 입력할때는 push()를 사용함
- let fruits: string[] = [“바나나”,”사과”,”오렌지”];
- let num1:Array
= [1,2,3]; - let num2:Array
= new Array (); - num2.push(1);
- num2.push(2);
- num2.push(3);
유니언타입
유니언 타입은 2개이상의 타입을 정의하고 그중에 맞는 것이 자동 설정이 되게 함
- var unionX: string
|number = 1; –> 1는 숫자이므로number타입으로 자동 설정- var unionX: boolean
|string = true; –> true는 boolean이므로boolean타입으로 자동 설정
유니언타입으로 함수 선언
예>
function typeCheck(p: string | number): string } number {
return p;
}
let type = typeCheck(1); // --> number 1
let type = typeCheck("1"); // --> string 1문자열 표현
-
줄바꿈 : 개행문자( \n )으로 표시
-
여러줄 줄바꿈 : 백틱을 이용 ( ` )
예제>
let multiLine: string = ` one = 1 twe = 2 ` -
백틱으로 ${표현식} 사용가능
예제>
let w: wtring = "world"; let one: number = 1; function hi() { return "hi" } let hellow_msg: string = ` hello ${w} // --> hello world 1 + ${one} // --> 1 + 1 ${hi()} // --> hi `
디스트럭처링 지원
디스트럭처링은 배열이나 객체의 데이터를 각 변수에 할당 할 때 간단하게 처리하는 방법
예제>
var params = ["반갑습니다.", 100];
let [m_name, m_num] = params;
console.log (`
${m_name}
${m_num}
`);메서드
배열 메서드
filter() 메서드
배열의 특정 조건에 부합하는 요소만 걸러서 보여줌
- arr.filter(콜백함수);
예제>
var rtn = [-1, -2, 0, 3, 5, -2].filter( po ); // --> 3, 5
function po(value) {
return value > 0;
}forEach() 메서드
배열을 순회하며 전체에 특정명령어를 실행 시킴
- arr.forEach(콜백함수);
예제>
[1, 2, 3, '사과'].forEach(arry);
function arry(ele, idx, array) {
console.log ('[' + idx + '] = ' + ele );
}화살표 함수
화살표 함수는 익명함수와 동일한 역활을 함
익명함수
function() { ... }
() => { ... }변수에 할당하는 함수
var p1 = function(x) { return x * x; };
var p1 = (x) => { return x * x; };Function이 한줄인 경우는 아래처럼도 표현이 가능함
var p1 = x => x * x;즉시 실행함수는 아래처럼 표현이 가능함
((x) => {
console.log( x * x ) ;
})(3);화살표함수에 필터 매서드 적용
var num_list [ 1, 2, 3, 4, 5 ];
num_list = num_list.filter( n => {
return n % 2 == 0;
});
console.log(num-list); // ---------> [ 2, 4 ]객체지향 프로그래밍
클래서 선언과 사용
기본적인 클래스 선언 형태
class MyClass {
constructor() { // constructor는 생성자로 클래스객체가 생성될때 기본적으로 호출되는 메서드입니다.
}
}클래스의 사용
클래스에 new키워드를 사용하여 객체를 생성하여 사용합니다.
var myClass = new MyClass(); // new키워드를 사용하여 객체를 생성하여 사용함전역변수의 선언과 사용
constructor()에 public 접근자를 사용하여 전역변수를 선언합니다.
class MyClass {
constructor( public aa, public bb) { // constructor에 public으로 선언한 변수는 클래스 내에서 전역변수로 사용할 수 있읍니다.
}
getMyClass(): string {// 함수를 이용하여 전역변수 aa를 리턴
return this.aa;
}
get alphabet() { // 게터함수를 이용하여 전역변수 bb를 리턴
return this.bb;
}
}클래스 상속
자식 Class에서 부모 Class를 상속함
class Parents{
constructor() { }
}
class MyClass extends Parents {
constructor() {
super( "인자1", "인자2"); // super메서드는 꼭 나와야 함
}
}protected
protected 가 지정되어 있는 메서드나 클래스는 클래스 외부에서 접근이 불가함.
단지 클래스 내부나 상속받은 자식 클래스에서만 접근이 가능함
- protected getName(): string { }
- protected constructor() { }
인터페이스
인터페이스에 선언된 변수나 메서드의 사용을 구현 클래스에 강제할 수 있음.
interface ifParents {
// 메서드나 변수 정의
}
interface ifChild extends ifParents {
// 메서드나 변수 정의
}
class MyClass implements ifChild {
// 인터페이스에 정의된 메서드나 변수를 추가한 후 구현
// 클래스 고유의 메서드나 변수를 추가한 후 구현
}클래스 상속
추상클래스는 구현과 강제를 동시에 수행하는 클래스로 abstract 키워드를 사용하여 선언함.
추상 메서드와 구현 메서드를 나누어서 정의 함
abstract class SmallAnimals {
abstract 추상 메서드(): string;
구현 메서드(): string {
// 추상 메서드를 이용하여 구현 메서드의 로직을 추가
}
}
class Mouse extends SmallAnimals {
// 추상 클래스에 정의된 추상 메서드를 구현
// 클래스 고유의 메서드나 변수를 추가
}
