[Typescript] 타입스크립트 기본

강좌 - (Youtube) 땅콩코딩PeanutCoding https://youtu.be/rwqqhvR353A

---

Static Typing

타입을 선언하고 선언된 타입에 맞는 값만이 할당 혹은 반환되어야 함

---

타입스크립트는 자바스크립트를 기반으로 한 언어
-> 자바스크립트에서 유효한 코드는 타입스크립트에서도 유효함

---

타입 추론 (Type Inference)

타입 표기가 없는 경우 타입 정보를 제공하기 위해 타입을 추론함

let a = 5;	## number로 a 선언
a = 'hello' 	## a가 number이므로 string 형태로 재할당하면 에러
a = 10; 	## number이므로 옳은 코드

Ex1)

let student = {
    name:'Jake',
    course :'Getting started with Typescript',
    codingIQ:80,
    code:function(){
        console.log('brain is working hard');
    }
}

function calculateCodingIQ(lostPoints){
    return 100 - lostPoints; // 결과물이 숫자임을 추론함
}

---

타입 명시

변수를 선언할 때 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정
-> 타입에 대한 더 많은 정보가 제공될수록 타입스크립트는 코드를 좀 더 깔끔하고 효과적으로 작성하고 유지보수할 수 있도록 도와줌

let x : string = "타입스크립트";

Ex2)

let studentID:number  =12345;
let studentName:string= "jenny Kim";
let age:number = 23;
let gender:string = "female";
let subject:string = "javascript";
let courseCompleted:boolean = false;

function getStudentDetails(studentID:number)
//함수의 타입 선언
:{
    studentID:number;
    studentName:string;
    age:number;
    gender:string;
    subject:string;
    createDate:Date;
} {
    return null;
}

---

인터페이스 (Interface)

인터페이스 작명 규칙

• 인터페이스 이름은 대문자로 시작

완성된 인터페이스는 타입으로써 사용할 수 있음
인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제됨

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

Optional Property

인터페이스 안에서 설정된 프로퍼티가 무조건 포함되어야 하는데,
프로퍼티 이름 다음에 ?를 붙이면 해당 프로퍼티는 없어도 된다.

interface Student { 
    studentID:number;
    studentName:string;
    age?:number; //Optional
    gender:string;
    subject:string;
    courseCompleted:boolean;
}

function getStudentDetails(studentID:number)
:Student {
    return {
        studentID:123456,
        studentName:'Mark jacobs',
        gender:'male',
        subject:'Node.js',
        courseCompleted:true
        
    };
}

인터페이스를 사용하면 반복되는 코드를 방지할 수 있다.

메소드 (Method)

객체(object) 내에서 선언된 함수

    addComment(comment:string):string;

    addComment?:(comment:string)=>string;

Readonly Property

읽기 전용 프로퍼티 -> 객체 생성 시 할당된 프로퍼티 값을 변경할 수 없음

---

열거형 Enum

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

enum GenderType{
    Male,
    Female
}

숫자 열거형 Numeric Enum

Male = 0, Female = 1```

#### 문자열 열거형 String Enum
```javascript
enum GenderType{
    Male = 'male',
    Female = 'female',
}

리터럴 타입

gender:'male' | 'female';

---

Any 타입

어떤 타입이든 모두 가능

let someValue:any;

Union 타입

여러 타입 선언 가능

let somevalue:number|string;

Type Aliases

type 키워드를 이용해 새로운 타입 정의하여 사용
반복되는 코드 줄일 수 있음

type StrOrNum = number ? string;

타입 가드

typeof 연산자를 이용하여 코드 검증을 수행하는 것

type StringOrNum = string | number;
let itemPrice :  number;

const setItemPrice=(price:StringOrNum):void=>{
    if (typeof price === 'string'){
        itemPrice=0;
    } else{   
        itemPrice=price;
    }
}
setItemPrice(50);

---

함수 작성 방법

타입 명시, 선택적 파라미터

function 함수이름(매개변수1:매개변수타입, 매개변수2:매개변수타입):함수반환타입{
}

기본 매개 변수

function sendGreeting(message = 'Hello', userName = 'there'):void{
console.log(`${message}, ${userName}`);
}
sendGreeting();
sendGreeting('Good morning');
sendGreeting('Good afternoon', 'Jenny');

---

객체지향 프로그래밍

연관된 변수와 함수들을 한 덩어리로 묶어서 구조화하여 표현하는 프로그래밍 스타일
Ex3)

class Employee{
    fullName:string;
    age :number;
    jobTitle:string;
    hourlyRate:number;
    workingHoursPerWeek:number;
    printEmployeeDetails= ():void=>{
        console.log(`${this.fullName}의 직업은
		${this.jobTitle}이고 일주일의 수입은 
        	${this.hourlyRate*this.workingHoursPerWeek}달러이다.`)
    }
}

클라스 속에서 정의된 함수들은 클라스 내 정의된 변수들에게 접근 가능
-> 상대적으로 적은 매개변수를 가짐

프로퍼티

클라스 내에 정의된 변수

메소드

클라스 내에 정의된 함수

클라스의 인스턴스

let employee1 = new Employee();

Constructor(생성자)

모든 클래스는 생성자를 가짐
클라스의 인스턴스, 즉 클라스로부터 객체를 생성할 때 호출되며 객체의 초기화를 담당함
클라스를 통해서 객체를 생성할 때 constructor(생성자)에 정의된 파라미터의 값이 arguments로 전달되어야 함

class Employee{
    fullName:string;
    age :number;
    jobTitle:string;
    hourlyRate:number;
    workingHoursPerWeek:number;

    constructor(fullName:string, age:number,jobTitle:string, hourlyRate:number, workingHoursPerWeek:number){
        this.fullName=fullName;
        this.age=age;
        this.jobTitle=jobTitle;
        this.hourlyRate=hourlyRate;
        this.workingHoursPerWeek=workingHoursPerWeek;


    }
    printEmployeeDetails= ():void=>{
        console.log(`${this.fullName}의 직업은 ${this.jobTitle}이고 일주일의 수입은 
        ${this.hourlyRate*this.workingHoursPerWeek}달러이다.`)
    }
}
 
let employee1 = new Employee('민수', 28, '주니어 웹개발자', 40, 35);

접근제한자 (Access Modifiers)

클라스 속 멤버 변수(프로퍼티)와 메소드에 적용될 수 있는 키워드
클라스 외부로부터의 접근을 통제

• Public
  클라스의 외부에서 접근 가능함
• Private
  클라스 내에서만 접근 가능
  클라스 외부에서 접근 불가능(비공개 멤버)
  작명할 때 이름 앞에 _ 붙임 private _fullName
• Protected
  클라스 내부, 상속받은 자식 클라스에서 접근 가능

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

    constructor(
        private _fullName:string, 
        private _age:number,
        private _jobTitle:string,
        private _hourlyRate:number, 
        public workingHoursPerWeek:number){
    }