[11주차] 1. TypeScript(1)

TypeScript

• 자바스크립트를 알고 있다면 금방 배움

장점

• 자바스크립트는 weakly type으로 실수를 하게 될 수 있음
  • 코드가 실제로 실행이 되어야만 실수한지 안한지 알 수 있음
  • 타입스크립트 사용시 이런 문제점 보완 가능
• VS code 같은 IDE 사용시 많은 도움을 얻을 수 있음
  • 함수 사용시 어떤 파라미터 넣는지
  • 컴포넌트의 props에 어떤 값을 넣는지
  • 실수로 빠뜨린 props 있을 시 에러 감지
• 사소한 실수 많이 방지

파일 생성 법

• 1. 디렉토리 생성 : git bash 에서 mkdir 디렉토리명
• 2. git bash 에서 cd 디렉토리명
• 3. package JSON 생성 : git bash 에서 yarn init -y
• 4. 해당 디렉토리 에디터로 열기 : git bash 에서 code ./
• 5. typescript(typescript 사용 위한 모듈), ts-node(따로 컴파일하지 않고도 typscript를 콘솔에서 바로 실행할 수 있게 해주는 모듈) 설치
     : package json 파일 오픈한 상태로 vs code 터미널에 yarn add typescript ts-node
• 6. 프로젝트의 타입스크립트 설정 파일(tsconfig.json) 생성
     : vs code 터미널에서 yarn run tsc --init 입력
• 7. 타입스크립트 파일 생성 : src 폴더>확장자 ts인 파일 생성

작성법

• 타입스크립트 파일 작성 후 터미널에 yarn run tsc 작성시 tsconfig 설정에 맞게 동일한 이름의 컴파일된 js 확장자의 파일이 생성됨
• tsconfig
  • outDir : 컴파일된 config를 어디다 저장할 지 지정
• ts node 실행법 : yarn run ts-node ts파일경로’

기본 타입

type 종류

• number : 숫자
• any : 어떤 값이든 될 수 있음
• boolean : true or false
• string : 문자열
• 배열 : type명[ ] -> 해당 타입 배열
• null, undefined

type 선언 방법

• 특정 값 선언시 사용되는 type들
• 무조건 let 변수명 : type명 = 값; 이렇게 :type명 무조건 지정하지 않고 생략하고 작성 가능
• 문자열으로 지정 된 상태에서 숫자형을 넣는다거나 등의 타입이 지정된 상태에서 다른 타입의 값들을 넣으려고 할 때는 에러가 뜬다

type OR 연산자 활용

• let 변수명 : type명 | 또다른type명 = 값; 으로 OR sign을 넣어 type 또는 또다른 type일 수도 있는 변수 생성 가능, 그래서 값에도 둘 중 하나 맞는 것 넣으면 제대로 작동됨
• 특정 값들만 넣을 수 있을 경우 let 변수명 : 값 | 값 | 값 = 값; 으로 값으로도 넣어야 하는 특정 값을 지정해줄 수 있다.

함수 type 설정

• 함수 파라미터에 type 지정 안할시 기본적으로 any로 지정되며 빨간 줄이 쳐짐
• 함수 결과값 type 설정(사전에 결과값 type명 설정시 반환값 없거나 다른 타입일시 빨간줄 쳐짐)
  function 함수명(파라미터: type명) : 결과값type명 {}
• or 연산자로 type 지정 가능

interface

• 클래스 또는 객체를 위한 타입 지정할 때 사용되는 문법
• interface interface명 {실행할 작업}
• implements interface명 : 해당 interface 조건에 부합한다.
• class 클래스이름 implements interface명 {} 일시 클래스 중괄호 구역 안 코드들이 해당 interface 선언한 작업 충족하지 않으면 클래스 이름에 빨간줄이 그어진다.
• constructor 사용
• interface에서 선언한 작업 말고도 다른 작업 작성하고 싶을 시 변수 :type 앞에서 선언 후 constructor(사용할 변수 : type) {변수활용해서 할 작업(ex) this.변수 = 값;)} 작성
• constructor 괄호 안에 변수 앞에 public/private 넣을시
  • 컴파일 될 경우에는 전혀 의미 없음, typescript 내부에서만 유의미한 속성
  • public : new 생성자를 활용해 새로운 객체 만들고 객체. 했을 때 그 변수 자동 조회(팝업) 가능
  • private : new 생성자를 활용해 새로운 객체 만들고 객체. 했을 때 그 변수 자동 조회(팝업) 불가능

객체 타입 지정

interface interface명 {
변수?: type명
}

• ?:가 뒤에 붙는 변수는 이 interface에 있을 수도 없을 수도 없다는 것(생략하고자 하는 값)을 의미

상속 가능

• interface interface명 extends 또다른interface명 {}

Type Alias

• Alias: 별칭
• 타입에다가 별칭을 지어주는 것을 의미
• 객체 타입 지정 시 대부분 type alias 사용해도 괜찮지만 라이브러리를 위한 타입 설정시 interface를 사용하는 것을 권장하고 어떤 것을 사용하던지 일관적으로 써야 한다.

객체 타입 지정

type interface명 {
변수?: type명
}

• ?:가 뒤에 붙는 변수는 이 interface에 있을 수도 없을 수도 없다는 것을 의미

상속 가능

• type interface명 = 또다른interface명 & {}

interface가 못하는 작업 가능

• 예시
  type interface명 = interface명 []
  const 변수 : interface명 = [값들]

Generics

• 타입스크립트에서 함수, 클래스, interface, type alias 사용시 여러 종류의 타입에 대하여 호환을 맞추어야 하는 상황에서 사용하는 문법
• 보통 이런 모양을 가지고 있다.
• 연산자 활용 가능
• 함수에 파라미터로 들어오는 값이 딱 정해져 있지 않은 경우 이 문법을 사용
• 실제 파라미터에 넣는 타입을 유추할 수 있음
• 내부에 있는 값의 타입이 어느거든 될 수 있는 데 any 사용하기 싫고 타입을 지켜내고 싶을 때 사용

사용법

• 예시
  function 함수명<T1, T2> (a: T1, b: T2) {
  return{ …a, …b };
  }

리액트 컴포넌트

• 확장자 tsx : js 코드를 사용하는 타입스크립트 파일 의미, 타입스크립트를 리액트에서 작성할 때 사용하는 확장자
• 새로운 컴포넌트 생성시 tsx 확장자로 파일 생성. ts확장자 사용시 작동하지 않음

초기 생성 단계

• 1. 리액트 프로젝트(디렉토리) 생성(typescript 사용 가능한)
     : npx create-react-app 프로젝트명 --template typescript
• 2. code ./프로젝트명

React.FC 화살표 함수

• 컴포넌트 생성시 화살표 함수로 생성(function 키워드로 작성해도 되긴 하는데 이게 많이 쓰임)
  const 컴포넌트이름 : React.FC = (props) => {}
• function 컴포넌트이름 ({typeAlias에 들어간 값들} : typeAlias이름) {} 와 동일
• 장점
  • children 이라는 props 값이 react node 값으로 자동으로 탑재되어 있어 별도로 Type Alias에 그 값을 안넣어줘도 된다. 따로 선언 안해도 사용 가능
  • 단점이 될 수도 있다. children이 필요할수도 안할수도 있어서 명료하지 않기 때문이다.
  • 컴포넌트. 했을 때 뒤에 오는 기능들이 자동완성되는 경우가 있음
• 단점
  • defaultProps가 제대로 작동하지 않음
    • 해결방법
      • defaltProps로 사용하고자 하는 값을 Type Alias 내부 선언된 값 뒤에서 ?를 붙여준다.( 값?: type;) 배열의 경우 컴포넌트 내부에 if (!array) return null;을 선언해 줌으로써 array가 undefined type 일 경우를 방지하여야 한다. 그래야 비로소 배열 내장함수를 사용할 수 있다.
      • 컴포넌트.defaultProps로 선언해주는 것이 아닌 컴포넌트 선언하는 단계에서 props 괄호에 {defaltProps로 사용하고자 하는 값 선언} 로 비구조화 할당을 해야 작동이 됨

컴포넌트에 함수 넣어야 할 경우

• onClick 같은 함수 넣어줘야 할 경우에는 type TypeAlias이름 = {onClick =() =>void;};
  • onClick = () =>void; 뜻은 onClick은 함수타입인데 이 함수에서 아무 파라미터를 가져오지 않고 아무값도 리턴하지 않는다는 것을 의미
  • name이라는 값을 string 타입으로 파라미터로 받아오고 싶으면 onClick = (name:string) =>void;

Tips

• 타입스크립트 사용법 참조 링크 : https://bit.ly/tshandbook-k
• MATH.PI = 파이 값
• Queue : 줄 서는 것과 비슷, 앞에 것 먼저 처리
  • enqueue : queue에 새로운 항목 추가
  • dequeue : queue에서 가장 첫번째 항목 빼오겠다.