[TypeScript] 타입스크립트 기본 / 타입 / 연습

타입스크립트

- 타입스크립트 자바스크립트 차이

- dynamically typed(JS, 파이썬) => 런타임에서 타입 결정

- Statically typed(TS) => 컴파일에서 타입 결정

 

컴파일러

- 바벨 이용해서 TS -> JS로 변환가능

 

1. Statically Typed

- 엄격한 타입이 장정

- 반대로 동적타입은 사용자가 내 어플리케이션을 사용하면서 버그가 빵빵 터질 수 있음

 

2. OOP가 가능

- 유지보수성이 높음

- 생산성 높음

- class, interface, generics, types가능

 

 

타입스크립트 공부방법

- 어떤 타입을 정확하게 이해하는 것이 중요

 

 

셋업

- 타입스크립트는 컴파일로 툴이 함께 제공됨!

- VSC에서 커맨드 쉼표 => strict null 체크

- node.js / npm / babel 설치

- 프로젝트별로 타입스크립트를 설치할 수 있지만, 글로벌하게 설치도 가능함

- npm install -g typescript

- tsc => 타입스크립트 컴파일러 명령어

- tsc -v  버전확인

 

 

VSC 추천 익스텐션

- Prettier 설치, cmd+, 로 셋팅 /prettier quote => TS/JS 둘 다 single quote로

 - indent rainbow, bracket, auto rename tag

- CSS PEEK, html css support

- markdown preview

 

 

타입스크립트 사이트

- 공식 사이트

- 업뎃이 자주 일어나서 핸드북이 오래된 정보일 경우도 있다.

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

 

 

타입스크립트 핵심

-  Typed Javascript at Any Scale

 

 

타입스크립트 컴파일러 툴 소개

- TS를 컴파일러로 JS로 변환해서 해야함

- 간단하게 공부하고 바로 변환할 수 있게 하는 것(나중에 프로젝트 셋팅할 땐 바벨로 할 것임)

npm install -g ts-node

 

tsc -h 하면 정보가 나옴

tsc main.ts -watch 모드를 이용하면, 이 파일을 계속 바라봐서 내용을 저장만해도 ts에서 바꾼 소스코드가 js로 변환된 코드에서도 바뀌는 것이 확인 가능함

 

.ts 작성할 떄 모듈로 작성해야함

{ } 로 감싸줘야 글로벌리하게 선언 안됨

 

 

코드로 공부하기

 

https://github.com/iluvdadong/typescript-basic

GitHub - iluvdadong/typescript-basic: Learn TypeScript from Scratch!

 

  // TypeScript ✨
  function fetchNum(id: string): Promise<number> {
    // code ...
    // code ...
    // code ...
    return new Promise((resolve, reject) => {
      resolve(100);
    });
  }

  // JavaScript ✨ => TypeScript
  // Optional parameter
  function printName(firstName: string, lastName?: string) {
    console.log(firstName);
    console.log(lastName); // undefined
  }
  printName('Steve', 'Jobs');
  printName('Ellie');
  printName('Anna');

  // Default parameter
  function printMessage(message: string = 'default message') {
    console.log(message);
  }
  printMessage();

  // Rest parameter
  // 갯수에 상관없이 파라미터를 받아오고 싶으면, rest parameter사용할 수 있음. number[]는 number로 된 배열이라는 뜻
  function addNumbers(...numbers: number[]): number {
    return numbers.reduce((a, b) => a + b);
  }
  console.log(addNumbers(1, 2));
  console.log(addNumbers(1, 2, 3, 4));
  console.log(addNumbers(1, 2, 3, 4, 5, 0));

 

참고, reduce는 map과 filter를 같이 쓰는 방법이다.

 

 

array

{
  // Array
  const fruits: string[] = ['🍅', '🍌']; // 선호 readonly가 가능
  const scroes: Array<number> = [1, 3, 4];
  function printArray(fruits: readonly string[]) {}
  // readonly가 많이 쓰인다. => 파라미터 값을 읽을 수만 있고 변경할 수가 없음.
  // string[] 방식으로만 배열을 선언해야 readonly가 가능함

  // Tuple -> interface, type alias, class
  // 고정된 사이즈의 서로 다른 타입이 있을 때 사용 가능
  // 배열인데, 내부 데이터가 타입이 다른 경우 그것이 튜플임
  let student: [string, number];
  student = ['name', 123];

  // 튜플 내부에 있는 데이터에 접근하기 위해서는 배열에서 접근한 것 처럼 해야함
  // 튜플 사용을 권장하지 않음. index로 데이터에 접근하는게 가독성이 너무 떨어진다.
  // object, class 형태로 사용하자!
  // 튜플을 사용할 수 있는 곳에는 interface나 type alias나 class로 대체해서 사용하라

  student[0]; // name   
  student[1]; // 123

  // object distructuring을 구조할당!을 사용하면 
  // 좀 더 가독성이 올라감
  const [name, age] = student;

  // 튜플을 사용하는 예제
  // React의 useState는 튜플의 형태로 리턴됨
}

 

 

객체지향의 개념

Class => 어떻게 생겼는지 묘사, 그 안에는 fields와 method가 있다.

- template

- declare once

- no data in

 

Object => 객체는 명사로

- instance of a class

- created many times

- data in

 

 

 

객체지향의 원칙

- 캡슐화 Encapsulation

서로 관련있는 데이터와 함수를 오브젝트 안에 담아두고, 외부에서 보일 수 없고, 외부에서 보일 수 있는지 생각하고 만드는 것이 출발!

고양이가 행복해하고 이런건 내부 state, 근데 고양이와 play 해주고 먹이를 주면서 내부 state를 변경해줄 수 있음

 

- 추상화 Abastaction

커피머신이 있으면, 그 구조를 다 이해하지 않아도. 버튼만 누르면 작동하지 않나.

내부에서 얼마나 복잡하게 구현하지 않고, 외부에서 보이는 function 인터페이스만 보고도 구현 가능

 

- 상속 Inheritance

커피머신이 있으면, 좀 더 기능을 더해서 다양한 커피 기능을 만들 수 있음

parent child혹은 super sub 라고 부름

IS-A 관계라고도 함

동물이 있고, 동물소리내는 함수가 있으면, 상속 받은 고양이, 개 등도 다 동물소리내는 함수가 있다.

 

- 다형성 Polymorphism

make coffee라는 것을 이용해서 어떤 커피머신인지 신경쓰지 않고 해당 함수를 사용할 수 있는 것!

 

 

 

 

 

 

 

 

 

*드림코딩앨리 복습