👋🏻 타입스크립트 시작하기

---

자바스크립트는 웹 페이지에 사소한 상호작용을 추가하기 위한 스크립팅 언어로 시작되었다. 현재 자바스크립트는 프론트엔드와 백엔드 어플리케이션을 어우르는 언어로 성장했다. 프로그램의 크기, 범위, 및 복잡성은 기하급수적으로 커졌지만, 자바스크립트 언어의 능력은 여전하다. 자바스크립트의 독창적인 런타임 의미 체계와 언어와 프로그램 복잡성 간의 불일치는 에러를 일으키는 가장 큰 원인이 되었다.

특히 타입 오류, 다른 종류의 값이 예상되는 곳에 특정한 값이 사용된 경우에 타입스크립트가 사용된다. 타입스크립트의 목표는 자바스크립트 프로그램의 정적 타입 검사자이다. 코드가 실행되기 전에 실행하고(정적), 프로그램 타입이 정확한지 확인하는 도구(타입 검사)이다.

타입스크립트를 사용하는 이유

---

• IDE를 적극적으로 활용한다 (자동완성, 타입확인)

  • IDE는 Integrated Development Environment(통합 개발 환경)이란 공통된 개발자 툴을 하나의 그래픽 사용자 인터페이스(GUI)로 결합하는 어플리케이션을 구축하기 위한 소프트웨어이다.

  • 함수를 사용 할 때, 해당 함수가 어떤 파라미터를 필요로 하는지, 어떤 값을 반환하는지 코드를 확인하지 않아도 된다.

  • 컴포넌트 사용 시, props에 무엇을 전달해야 하는지, JSX를 작성하는 과정에서 알려준다.

  • 컴포넌트 내부에서도 자신의 props에 어떤 값이 있는지, state에 어떤 값이 있는지 알 수 있다.

    • 리덕스와 함께 사용하면 스토어 안에 어떤 상태가 있는지 바로 조회 가능하다.

• 실수방지
  • 함수 컴포넌트 등의 타입 추론이 된다.
  • 사소한 오타를 만들어도 코드를 실행하지 않고 IDE상에서 바로 알 수 있게 된다.
  • null / undefined인 값의 내부 값 혹은 함수를 호출에도 사전에 null 채킹하지 않으면 오류를 띄운다.

타입스크립트 사용하는 방법

---

• 터미널에서 npm install -g typescript
  • tsc --init 으로 필요한 옵션을 지정할 수 있다.
    • target : 컴파일된 코드가 어던 환경에서 실행될 지 정의
      • 화살표 함수 -> es5 -> 함수 선언문으로 만든다.
    • module : 컴파일된 코드가 어떤 모듈 시스템을 사용될 지 정의한다.
    • strict : 모든 타입 체킹 옵션을 활성화 한다는 것을 의미
    • esModuleInterop : common js 모듈 형태로 이루어진 파일을 es2015 모듈 형태롤 불러올 수 있다.
    • outDir : 컴파일된 파일들이 저장되는 경로를 지정할 수 있다.

기본 타입

---

let count = 0;
count += 1;
count = 'typescript'; // 숫자였던 변수에 문자열을 할당하면 에러가 발생한다

const message: string = 'hello world';
// 변수를 선언할 때, 식별자 옆에 ': type'을 지정한다.

const done: boolean = true; // boolean 값

const number: number[] = [1,2,3]; // 숫자 배열
const message: string[] = ['a','b','c']; // 문자열 배열
// 배열도 위와 같이 지정 가능하다.

message.push(1); // 문자열 배열에 숫자를 push하려고 하면 에러가 발생한다.

let mightBeUndefined: sting | undefined = undefined; 
// string 일수도 있고 undefined 일 수도 있다.
let nullableNumber : number | null = null;
// number 일수도 있고 null 일 수도 있다.

let color: 'red' | 'orange' | 'yellow' = 'red'; // 세개의 값중 하나이다.
color = 'yellow';
color = 'green'; // 위에 정해진 조건에 맞지 않아 에러가 발생한다.
console.log() // 'green' 형식은 'red' | 'orange' | 'yellow' 형식에 할당될 수 없다.

// tsc명령어를 입력해서 컴파일하려고 하면 실패한다.

함수에서 타입 정의하기

---

function sum(x: number, y: number): number {
  return x + y;
}

sum(1,2);

// 여기서 sum에 포커스되면 함수의 파라미터로 필요한 값의 타입을 바로 알려준다.
// sum 함수의 가장 우측에 적용된 타입 ': number'는 결과물의 타입을 지정한 것이다.
// 그래서 'return null'과 같이 타입과 맞지 않은 값을 리턴하면 오류가 발생한다.
console.log(sum(null)) // 'null'형식은 'number' 형식에 할당할 수 없다.

function sumArray(numbers: number[]): number {
  return numbers.reduce((acc, current) => acc + current, 0);
}

const total = sumArray([1,2,3,4,5]);

// 이렇게 배열의 내장함수를 사용할 때에도 타입을 유추해준다.
// '(parameter)의 타입이 number라는 것을 명시해준다'

function returnNothing(): void {
  console.log('hl')
}

// 반환 타입을 void로 설정하면 함수에서 아무것도 반환하지 않을 수 있다.

---

벨로퍼트님과 포이엠웹님, 그리고 타입스크립트 공식문서를 살펴보면서 나아갈 타입스크립트 공부의 시작입니다. 화이팅~!