HJ's WEB Dev BLOG

NodeBird.propTypes = {
    Component: PropTypes.elementType.isRequired,
}

👩🏻 리액트 코딩할 때 'prop-types' 라이브러리를 설치하지 않아도돼고 위 코드처럼 propTypes를 선언해주지 않아도 돼서 편하다.  propTypes는 전달받은 데이터의 유효성을 검증하기 위해 다양한 유효성 검사기를 내보내는데, 만일 prop에 유효하지 않은 값이 전달 되었을 때, 경고문이 자바스크립트 콘솔을 통해 보인다. 반면에 타입스크립트는 에러가 나는 즉시 바로 에러를 체크 해주는 점도 베스트였다. 에러난 구문에 마우스 커서를 올리면 에러가 날 때 어떻게 고쳐나가야 될 지도 친절하게 알려준다. 이처럼 타입스크립트는 일반적인 오류를 최대한 많이 검출하면서 올바른 프로그램을 만들 수 있게 설계되었다 ! 이러니 요즘 많이 쓰는 추세인 듯 하다 👏🏻 하지만, 타입스크립트를 생성할 때마다 일일이 js파일로 컴파일 해줘야한다는 점이 번거롭기 때문에 다음에는 웹팩과 eslint 등등 웹 개발 환경 세팅하는 방법에 대해서 공부하기!

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "dist"
  },
  "include": [
    "scripts/**/*"
  ]
}

• 포함은 TypeScript(*.ts) 파일을 찾을 수 있는 위치를 컴파일러에 알려줍니다.
• outDir 옵션은 TypeScript 컴파일러에 의해 트랜스파일된 일반 JavaScript 파일의 출력 폴더를 지정합니다.
• sourceMap 옵션은 컴파일러에서 sourceMap 파일을 생성할지 여부를 나타냅니다.

🎈 컴파일러 옵션

# tsconfig.json에 대한 fs를 역방향으로 검토하여 컴파일 실행
tsc

# 컴파일러 기본값으로 index.ts만 트랜스파일
tsc index.ts

# 기본 설정으로 src 폴더 안에 모든 .ts 파일을 트랜스파일
tsc src/*.ts

# tsconfig.json의 컴파일러 설정으로 src 폴더 안에 모든 .ts 파일을 트랜스파일
tsc --project tsconfig.json src/*.ts

typescript-kr.github.io/

🎈 타입스크립트 모듈화란?

타입스크립트에서 가르키는 모듈이라는 개념은 ES6의 모듈과 개념이 유사하다. 모듈은 전역 변수와 구분되는 자체 유효 범위를 가지며 export. import와 같은 키워드를 사용하지 않으면 다른 파일에서 접근할 수 없게 된다.

🎈 Import & Export

임포트와 익스포트는 자바스크립트의 코드를 모듈화 할 수 있는 기능이다. 여기서 모듈화란 쉽게 말해 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미한다.

🎈 모듈화의 필요성

기본적으로 자바스크립트의 유효 범위는 전역으로 시작한다.

🎈 기본 문법

export 변수, 함수

다른 파일에서 가져다 쓸 변수나 함수의 앞에 export라는 키워드를 붙혀 사용한다.

import {불러올 변수 또는 함수 이름} from '파일 경로';

 익스포트된 파일음 import로 불러와 사용할 수 있다.

🎈 타입스크립트 모듈화 예시

[types.ts]

export interface Todo {
  title: string,
  checked: boolean,
}

[app.ts]

import { Todo } from './types';

var item: Todo = {
  title: '할 일1',
  checked: false,
}

types.ts 라는 파일에 인터페이스를 다른 파일에 사용할 수 있도록 export[내보내기] 해주고, app.ts라는 파일에서 types를 import 시켜서 item 변수에 인터페이스 타입들을 불러왔다.

🎈 타입호환 이란?

타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미한다. 타입스크립트가 코드를 해석해 나가는 과정에서 두 개의 타입이 서로 호환이 되는지를 점검하는 것을 타입 호환성이라고 한다. 

interface Developer {
  name: string;
  skill: string;
}
interface Person {
  name: string;
}
var developer: Developer;
var person : Person;

person = developer;

이렇게 Developer와 Person의 인터페이스를 생성하고 중복되는 속성은 name뿐이다. Developer는 name과 skill이라는 속성이 총 2개나 있고, Person은 name이라는 속성 1개뿐. 만약 위에는 인터페이스를 선언하고 아래는 클래스를 선언해도 실제로 이 두 개의 타입은 같다고 한다. 타입에 정의되어 있는 타입을 가지고 실제로 호환 되는지를 점검하는데 이런 것을 공식문서에서는 구조적 타이핑이라고 한다.

이렇게 됐을 때,

person = developer;

이처럼 오른쪽에는 더 많은 속성을 가지고 있거나 더 큰 관계를 갖고 있을 때에 왼쪽과 호환이 된다.  더 객체가 많은 속성을 가진, 구조적으로 더 큰 관계를 갖고 있기 때문이다.

🎇 다른 예시 01

var add = function(a: number) {
  console.log(a);
}

var sum = function(a: number, b: number) {
  return a + b;
}

여기서 add와 sum의 차이점은 sum함수가 파라미터 한 개가 더 들어있다. 그래서 sum이라는 함수 자체가 add라는 함수보다 더 크다고 볼 수 있다. 크다라는 의미는 추가적으로 옵션들을 더 제공한다.

🎇 다른 예시 02

interface Empty<T> {

}
var empty1: Empty<string>;
var empty2: Empty<number>;
empty1 = empty2;
empty2 = empty1;

맨 위에 인터페이스는 안에 값이 비어있어서 어떤 값이 들어와도 동일한 타입이라고 간주한다. 

🎇 다른 예시 03 : 제네릭

interface NotEmpty<T> {
  data:T;
}
var notEmpty1: NotEmpty<string>;
var notEmpty2: NotEmpty<number>;
notEmpty1 = notEmpty2;
notEmpty2 = notEmpty1;

이렇게 제네릭으로 인터페이스 호출해주면 타입이 바뀐걸로 간주되어 서로 타입 호환이 되지 않아 에러가 난다.