땅콩코딩 강의

1강 : 타입스크립트란 무엇일까?

• 타입스크립트는 자바스크립트를 기반으로한 언어다.
  
  출처 : 땅콩코딩

<타입스크립트 특징 몇 가지>
1. 타입 표기

• 변수 값에 데이터 타입 지정 가능하다.
  
  에러를 알려준다.

2. 객체지향적이다.
   객체지향적 프로그래밍 OOP(Object Oriented Programming)의 특성을 가지고 있다.
3. 컴파일 타임 오류(=컴파일시 나타나는 오류)를 알 수 있다.
   컴파일이란? 어떤 언어의 코드를 다른 언어로 바꿔주는 변환 과정
   

• 타입스크립트는 프로그래밍 언어인 동시에 컴파일러이다, 타입스크립트를 자바스크립트로 변환된다.

2강 : 설치와 환경 설정

1. 비쥬얼스튜디오 설치하기
2. 익스텐션 설치하기
   비쥬얼 스튜디오 코드에 써드파티플러그 설치하기
   익스텐션이란? 비쥬얼 스튜디오 코드에 추가적으로 설치할 수 있는 기능들

• Prettier
• Eslint
• Path Intellisense
• Bracket Pair Colorizer
• Material Icon Theme

3. 타입스크립트 설치하기

• NPM과 NodeJS
  NPM을 사용하기 위해 NodeJS를 설치해야 한다.
  -g란? global인데 작업중인 프로젝트와 관련없이 타입스크립트를 전역으로 설치하는 명령어이다.
  <타입스크립트 설치하기>
• 맥은 sudo npm install -g typescript
• 윈도우는 npm install -g typescript
• TypeScript Compiler : tsc 명령어를 사용해서 타입스크립트를 자바스크립트로 변환 가능하다.
• 타입스크립트는 자바스크립트를 기반으로 한 언어라서 자바스크립트에서 유효한 코드는 타입스크립트에서도 유효하다!
• 콘솔창 열기
  맥 Command + Option + j
  윈도우 Control + Shift + j
• 이렇게 따라하다 보면 에러가 생기는데(app.ts)쪽에 에러 생김 그러면 터미널에 tsc --init적어주면 에러 사라지고 tsconfig.josn이라는 파일도 같이 생긴다.
• 그리고 app.ts를 지우고 다른걸 적으면 안바뀌는데 이럴때 tsc-w(파일명) 라고 터미널에 적으면 된다.
  w = Watch 감시하다.

3강 : 타입 추론(Type Inference)

• 타입스크립트의 특징은 Static Typeing(정적 타이핑)이다.
  Static Typeing? 타입을 선언하고 선언된 타입된 값만이 할당 또는 반환되어야 한다.
  
  그림처럼 하면 에러가 안나지만 a = "lee"라고 하면 에러가 난다.
• 타입스크립트에서는 타입 표기가 없는 경우 여러분의 코드를 읽고 분석하여 타입을 유추해낼수 있습니다. 이것이 타입 추론(Type Inference)이다!
  
• 타입스크립트에서는 타입의 표기가 없는 경우, 코드를 읽고 분석하여 타입을 유추해냄(신기방기)

4강 : 타입 명시

• 타입 명시란? 변수를 선언할 때, 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정한다.
  
• void란? 이 함수는 아무것도 반환하지 않는다 라는 의미를 부여하는 것이다.
• 변수를 선언할 때, 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정.
• void(공허한)는 이 함수는 아무것도 반환(return)하지 않는다는 의미
• 함수의 Parameter에 type 지정이 가능함
• 함수의 결과 값 에도 또한, type이 지정이 가능하다.
• 타입 선언 문법
  a. 변수 명 선언: 타입 = 변수 값;
  a. let x: string = '나는 영원한 문자열';
• 함수 값의 type이 void나 any가 아니라면, 무조건 함수의 값이 반환(return)되어야 한다.
• type에 관한 더 많은 정보를 주면 줄수록, 코드를 더 간결하고 깔끔하게 작성할 수 있어 유지 및 보수에도 도움이 된다.

5강 : 인터페이스

• 인터페이스를 통해 객체를 정의하는 방법을 알아보자.
  
  이 그림의 객체를 더 나은 방법으로 바꿀 수 있다, 인터페이스를 사용해서!
• 인터페이스는 대문자로 시작해야한다.
  
  그림처럼하면 Student라는 이름의 인터페이스가 코드내에 정의되었다.
• 완성된 인터페이스는 타입으로써 사용 가능하다.
  
  이렇게하면 타입을 지정해 줄 수 있다.
• 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다.
• 선택적 프로퍼티는 ?를 넣어주면 된다.
  
• 인터페이스와 메소드
  지금까지 프로퍼티만 인터페이스 내에 정의하였는데
  메소드도 인터페이스 내에서 정의 가능하다.
  메소드란? 객체내에서 선언된 함수다.
  
  둘다 똑같은 메소드다.
• 인터페이스에서 쓸 수 있는 Read Only 속성을 배워보자.
  Readonly 프로퍼티는 읽기 전용 프로퍼티로 객체 생성시 할당된 프로퍼티의 값을 바꿀수 없다!
  
• ts에 있는 인터페이스는 js에는 보이지 않는다, 실제로 인터페이스는 코드가 렌더링될때 아무런 영향력이 없기때문에 타입스크립트 컴파일러가 타입스크립트를 자바스크립트로 컴파일할때 인터페이스를 코드에서 지워버린다. 즉, 인터페이스는 작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해서 존재한다고 생각하면 된다.
• 더 많은 타입에 대한 정보가 제공될수록 더 많은 실수를 찾는데 도움이 된다!

6강 : 열거형(Enum)과 리터럴 타입

• Enum이란? 연관된 아이템들을 함께 묶어서 표현 할 수 있는 수단
  
• Enum은 맨위에 지정해준다.
  
  그리고 밑에 그림과 같이 적어준다.
  
• 숫자 열거형(Numeric Enum)
• 문자열 열거형(String Enum)
  문자열 열거형은 숫자 열거형처럼 자동증가하는건 없지만 코드를 실행할때 조금 더 읽기 쉬운 장점이 있다.
• 리터럴 타입
  enum보다 더 심플한 타입이다.

7강 : Any, Union Type, Type Aliases, Type Guards

• Any타입이란?
  
  
  이렇게 해도 아무 오류가 없다! 👊 하지만 타입스크립트에서의 일반적인 규칙은 타입에 관한 더 많은 정보를 명시할 수록 더 좋다!
• 제한된 타입들을 동시에 지정 하고 싶을때 any타입말고 더 좋은 방법은 없을까?
  이럴때는 유니언타입을 쓰자
• 유니언타입이란?
  
  
  둘 중 아무타입이나 할당해도 가능하다!
• 같은 코드를 반복하는 것 보다는 코드를 타입으로 지정하고 재활용하는것이 좋다 이럴때
  타입 별칭(Type Aliases)을 쓰자
  
  
  위 그림은 price가 'string'일 경우!
• 유니언타입을 사용할때 이렇게 Typeof를 사용하여 코드 검증을 수행하는 것
  이것을 타입 가드(Type Guard)라고 한다.

8강 : 함수의 타이핑, 그리고 선택적 매개 변수와 기본 매개변수

• 함수의 타입 명시

1. 함수의 반환(Return) 타입
2. 함수의 매개변수(Parameter)

• 함수의 반환값을 명시하기 위해서
  
  
  string을 명시하고 싶으면 string을 적어준다.
• 타입스크립트는 함수에 정의된 모든 매개 변수가 함수에 필요하다고 가정한다.
• 기본 매개 변수(Default Parameter)
  'there'라고 쓰면 undefined가 안뜨고 there가 기본 값이 된다!!
  
• 화살표함수
  

9강 : OOP 객체지향 프로그래밍 이란? 클래스와 오브젝트 관계 파헤치기

• 객체지향 프로그래밍?

1. 연관된 변수와 함수들을 한 덩어리로 묶어서 구조화하여 표현하는 프로그래밍 스타일이다.
2. 어플리케이션을 실제 세상에 존재하는 객체와 같은 단위로 쪼개고 객체들이 서로 상호 작용함으로써 시스템이 동작하는 것이다.

• 객체지향 프로그래밍에서 Class랑 object는 떼려야 뗄 수 없는 관계이다.
  
  
  
• 클래스 속에서 정의된 함수들은 클래스 내 정의된 변수들에게 접근 가능 하다.
  클래스 속에서 정의된 함수들은 상대적으로 적은 매개변수를 가진다.
• 클래스 내에 정의 된 변수를 프로퍼티(Property)
• 클래스 내에 정의 된 함수를 메소드(Method)

10강 : 생성자(Constructor), 접근 제한자(Access Modifiers), Getter 와 Setter

• 객체지향에는 생성자(Constructor)개념이 있다.
  모든 클래스는 생성자라는 매서드를 가질 수 있다.
  클라스의 인스턴스, 즉 클라스로 부터 객체를 생성할 때 호출되며 "객체의 초기화를 담당"한다.
• 클래스를 통해서 객체를 생성할 때, Constructor(생성자)에 정의된 Parameter(매개변수)의 값이, Arguments(인자)로 전달 되어야 한다.
• Access Modifiers(접근제한자)
  객체지향프로그래밍에서는 접근제한자라는 기능이 있다.
  클래스 속 멤버 변수(프로퍼티)와 메소드에 적용될 수 있는 키워드이다.
  클래스 외부로 부터의 접근을 통제한다.
  
• get과 set 키워드를 사용하여 getter와 setter를 선언할 수 있다.
  

끝.