타입스크립트 기초

인터페이스

키워드 : interface

• 인터페이스명은 보통 i- 접두사를 붙여줘서 명명하지만 타입스크립트에선 지양한다.
• 그리고 첫글자는 대문자를 사용해준다.

interface 인터페이스명 {
	키: 타입;
    키: 타입; ...
}

interface Student {
	studentID :number;
    studentName :string;
    age :number;
    gender :string;
    subject :stirng;
    courseCompleted : boolean;
}

명시된 인터페이스는 타입처럼 사용해줄 수 있다!

 

인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다!

function getStudentDetails(studentID :number) :Student {

	return {
    	studentID :1,
   	 	studentName :'Jack',
    	age :20,
    	gender : 'FM',
    	subject : 'ts',
    	courseCompleted : false,
    };
}

위의 함수의 경우 Student 인터페이스를 리턴해줘야만 하므로 return 문 안에 인터페이스의 구조의 내용이 모두 담겨야 에러가 발생하지 않는다.

다만, 인터페이스의 내용이 들어올지 말지 모르거나 필수 사항이 아닌 경우 ? 를 붙여서(선택적 프로퍼티) 인터페이스를 만들면 그 값이 누락되더라도 에러가 발생하지 않는다.

interface Student {
	studentID :number;
    studentName :string;
    age? :number; 		//선택적 프로퍼티
    gender? :string;	//선택적 프로퍼티
    subject :stirng;
    courseCompleted : boolean;
}

function getStudentDetails(studentID :number) :Student {
	return {
    		studentID :1,
    studentName :'Jack',
    subject : 'ts',
    courseCompleted : false,
    };
}

 

 

인터페이스 내에 함수 선언 - 메서드 

선택적 프로퍼티 ? 를 메서드에서도 사용 가능하다.

interface 인터페이스명 {
	함수명(파라미터 :타입명) :리턴타입;		// 함수 정의
    함수명 : (파라미터 :타입명) => 리턴타입;	// 화살표 함수 정의
}

 

readonly 프로퍼티는 읽기 전용 프로퍼티

객체 생성시 할당된 프로퍼티의 값을 바꿀 수 없게 만들어준다.

키워드 : readonly

interface Student {
	readonly studentID :number;
    readonly studentName :string;
    age? :number; 		//선택적 프로퍼티
    gender? :string;	//선택적 프로퍼티
    subject :stirng;
    courseCompleted : boolean;
}

function saveStudentDetails (student: Student) :void {
	student.studentID = 2; //error
    student.studentName = 'Zoe'; //error
}

인터페이스를 tsc 로 변환 시 자바스크립트로 변환되지 않는다!

 

---

열거형(enum)과 리터럴 타입

Enum 이란,

연관된 아이템들을 함께 묶어서 표현할 수 있는 수단

키워드: enum

enum 열거형명 {
	타입명,
    타입명, ...
}

enum 열거형명 {
	타입명 = 0,
    타입명 = 1,
	타입명 = 2, ...
}

자바스크립트 상 객체로 변환된다! 기본적으로 enum 에 값을 지정하지 않으면, 순서대로 0, 1, 2 ... 의 값을 가진다. - 숫자형 enum

 

enum GenderType {
	Male,
    Female,
}

interface Student {
	readonly studentID :number;
    readonly studentName :string;
    age? :number; 	
    gender? :GenderType;	
    subject :stirng;
    courseCompleted : boolean;
}

function saveStudentDetails (student: Student) :void {
	student.gender = 'Female'; //error
    student.gender = GenderType.Female; //ok
}

 

타입스크립트에는 예외적으로 문자형 enum 이 가능

// 문자형 열거형
enum 열거형명 {
	타입명 = '문자',
    타입명 = '문자', ...
}

열거형에 접근하려면 열거형명.타입명 으로 가능하다.

 

 

리터럴 타입

| 를 사용하여 열거형을 따로 만들어주지 않아도 값을 나열해주면 된다.

interface Student {
	readonly studentID :number,
    readonly studentName :string
    age? :number,
    gender? : 'male' | 'female' | 'genderNeutral',
    subject :stirng,
    courseCompleted : boolean,
}

 

 

타입

any 타입

어떠한 타입이든 모두 가능한 경우, 즉 원래의 자바스크립트처럼 다른 타입의 값을 할당해줄 수 있는 것

 

다만, 타입스크립트를 사용하는 이유는 타입에 관한 많은 정보를 명시할수록 타입 에러를 컴파일시 잡아낼 수 있기에 유지보수에 유리하므로 any 타입 사용을 지양한다.

 

 

그러나 제한된 타입들을 동시에 지정하고 싶다면, 

유니언 타입

| 기호를 사용하여 타입들을 나열하여(리터럴타입처럼) 사용

let 변수명 :타입1 | 타입2 | 타입3;

 

Type Aliases

코드를 타입으로 지정하고 재활용

즉 유니언 타입을 계속 반복해서 사용하는 것은 비효율적이므로 커스텀 타입을 만드는 것이다.

키워드 : type

type 새로운타입명 = 타입1 | 타입2;

 

Type Guard

typeof  연산자(변수의 데이터 타입을 리턴)와 조건문을 사용하여 type 으로 지정해준 타입과 다른 타입이 맞지 않을 경우 예외처리가 가능하다.

 

 

 

타입스크립트에서의 함수

void 타입 - 아무것도 반환하지 않는 경우 사용할 수 있는 함수의 타입

function 함수명(파라미터 :타입, 파라미터 :타입) :리턴타입 { }

 

기본적으로 타입스크립트는 함수에 정의된 모든 매개변수가 함수 호출 시 필요하다고 가정하므로 

(자바스크립트는 매개변수에 값이 없다면 undefined 를 반환하는데 반해,)

선택적 매개변수(?)를 사용하여 매개변수를 받지 않아도 되는 것을 지정해줄 수 있다.

 

다만, 선택적 매개변수를 해주려면 필수 매개변수의 뒤쪽에 위치해줘야 한다.

function 함수명(파라미터1: 타입, 파라미터2?: 타입, 파라미터3?: 타입) { }

파라미터2가 선택적 매개변수므로 뒤의 파라미터3은 선택적 매개변수가 아니라면 에러

 

매개변수의 디폴트값 지정

function 함수명(파라미터 ='기본값', 파라미터 =2) :리턴타입 { }

기본값을 설정(=) 해주면 타입추론에 의해 타입을 생략해도 된다.

 

 

 

타입스크립트의 객체지향 프로그래밍

클래스와 오브젝트 관계

연관된 변수와 함수들을 한 곳에 모아 구조화하여 표현하는 프로그래밍 스타일

클래스는 객체의 뼈대/설계도 와 같다. 프로퍼티/메서드로 구성, this 를 사용하여 메서드가 프로퍼티에 접근 가능

객체는 클래스를 통하여 만들어질 수 있다. - 클래스의 인스턴스임

 

클래스의 생성자

키워드 : constructor

클래스로부터 객체를 생성하게 될 때 호출되며 객체의 초기화를 담당한다.

class Employee {
	fullName :string;
    age :number;
    jobTitle :string;
    hourlyRate :number;
    
    constructor(fullName:string, age:number, jobTitle:string, hourlyRate:number) {
    	this.fullName = fullName;
        this.age = age;
        this.jobTitle = jobTitle;
        this.hourlyRate = hourlyRate;
    }
    
    printEmployeeDetails = ():void => {
    	console.log(`${this.fullName} 의 직업은 ${this.jobTitle} 이다.`);
    }
}


let emp :Employee = new Employee('Jack', 23, '개발자', 40);

 

접근 제한자

클래스 속 프로퍼티와 메서드에 적용할 수 있는 키워드로

클래스 외부로부터의 접근을 통제해줄 수 있다.

 

1. private : 클래스 내부에서만 접근 가능하므로 클래스 외부에서 접근할 수 없다, 즉 외부에서 읽거나 값을 할당해줄 수 없다... (보통 _를 변수명 앞에 써줘서 표현) -> Getter/Setter 사용하여 외부에서 접근
2. public : 클래스의 외부에서 접근 가능/ 기본값
3. protected : 클래스의 내부와 상속받은 자식 클래스에서 접근 가능

 

Getter/Setter

private 로 제한된 프로퍼티나 메서드에 접근하기 위해서 우회하여 접근하기 위한 방법

키워드 : get / set

class 클래스명 {

	private _name :string;
    
	get 프로퍼티() {
    	return this._name;
    }
    set 프로퍼티(name :string) {
    	this._name = name;
    }
}


let 객체명 :클래스명 = new 클래스명();

객체명.프로퍼티 ---> get 접근
객체명.프로퍼티 = value ---> set 접근

 

객체가 생성될 때 생성자의 매개변수로 전달된 값은 객체의 프로퍼티 값으로 자동으로 그 값이 초기화되고 할당됨!!!

class Employee {
    constructor(
    	private fullName:string,
        private age:number, 
        private jobTitle:string, 
        private hourlyRate:number
    ) { }
    
    get fullName() {
    	return this._fullName;
    }
    set gullName(value :string) {
    	this.fullName = value;
    }
    
    printEmployeeDetails = ():void => {
    	console.log(`${this.fullName} 의 직업은 ${this.jobTitle} 이다.`);
    }
}