슬랙봇 개발을 시작하기에 앞서 TypeScript의 기본 문법을 정리해보려고 한다:)

TypeScript란?

TypeScript(이하TS)는 MS에서 개발한 오픈소스 프로그래밍 언어.
JavaScript를 기반으로 정적 타입 문법을 추가한 언어로 JavaScript의 단점을 보완하기 위해서 만들어진 언어.
TS는 모든 브라우저, 호스트, 운영체제에서 동작한다.

Type이 뭐에유??-??

→ 타입이란 프로그래밍에서 다룰 수 있는 값의 종류를 의미 (Ex. int, string, boolean등등등)

• 타입은 대문자/소문자 구별
• 타입 선언을 생략할 시 동적으로 타입 결정
• [타입 선언 생략 + 값 할당] ⇒ any 타입 (밑에서 자세히)

TypeScript vs JavaScript

1. JS는 동적 타입 언어이기 때문에 런타임 속도는 빠른 반면 타입 안정성이 보장되지 않지만 TS는 정적 타입 언어이기 때문에 컴파일 시 시간이 좀 더 걸리더라도 타입 안정성을 보장한다.

   타입 안정성을 보장한다?

   → 타입 안정성이 보장되지 않는다는 것은 이러한 값의 종류가 잘못 전달될 경우 버그를 잡기 어렵다는 것을 의미. TS는 타입을 선언해 이를 보장하기 때문에 타입을 제어할 수 있게 되어 훨씬 더 간편하게 에러를 잡을 수 있다~!

   JS

   function sum(a, b){
   	return a+b;
   }

TS

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

1. JS 슈퍼셋(Superset)

   TS는 JS의 슈퍼셋, 즉 JS 기본 문법에 TS의 문법을 추가한 언어. 따라서 유효한 JS로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 TS로 컴파일해 변환할 수 있다!

   Superset이 뭔데??-??

   → A ≥ B일 때, A는 B의 Superset. 즉, TS는 JS를 포함한 어떤 다른 것들을 가지고 있다고 생각하면 된다~!

2. 객체 지향 프로그래밍 지원

   TS는 ES6에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

ES6??-??

• ECMAScript의 약자. 뒤의 수는 버전. 이는 JS를 이루는 코어 스크립트 언어.
• TS는 ES7이하의 표준을 포함한다. 그렇기에 기존의 ES5의 JS 문법을 그대로 사용해도 된다!
• ES6에서는 모듈 선언과 모듈 호출 방식을 지원하고 TS는 ES6에 있는 클래스 특징을 그대로 가지고 있다.
• 인터페이스 특징을 지원함으로써 완전한 객체 지향 프로그래밍환경을 제공한다.
• TS에서는 네임스페이스를 지원해 클래스가 커지고 개수가 많아지면 유사한 기능의 클래스들을 그룹으로 구분지어야 할 때 라이브러리 단위의 모듈 구성에 유리!

1. 컴파일 언어

   JS는 인터프리터 언어인 반면 TS는 컴파일 언어이다.

   • 동작방식 : TS → 컴파일 → JS → 실행 S로 변환될 때 helper 코드가 위아래로 추가되기 때문에 절대적인 코드의 양은 TS가 더 많다. ts config파일을 통해 JS파일 변환 시에 설정(경로, 버전 등)을 할 수 있다!
     

   TypeScript 기본 문법

   1. 기본 TS 타입 선언

   • 변수, 함수의 인자, 함수의 리턴값에 타입을 지정할 수 있음
   • null, undifined 가능
   • 타입을 명시하지 않으면 처음 할당될 때 모든 타입 허용(any타입)

     let name: any = 'string';
     name = 1;
     // any로 타입을 지정할 시 어떤 타입이든 가능

   문자열

   let str: string = 'hello';

   숫자

   let num: number = 100;

   배열

   let arr: Array<number> = [10, 20, 30];
   let arr2: number[] = [10, 20, 30];
   let arr3: Array<string> = ["god", "minjeong"];
   let arr4: [string, number] = ["minjeong", 182];

   객체

   let obj: object = {name: "soyeon", age: 23};
   let person: {name: string, age: number};

   Boolean

   let isAvailable: boolean = true;

2. 함수 선언

→ 파라미터와 리턴값에 대해 타입을 선언할 수 있다!

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

위의 예시에서는 파라미터와 리턴값 모두 number로 타입을 지정했다.

이때 타입과 맞지 않는 잘못된 값이 들어가면 error!

또한 기본값도 지정해줄 수 있다!

function sum(a: number, **b: number = '123'**): number{
	return a+b;
}

3. Option 인자

• 생략할 수 있는 함수의 인자 이름 뒤에 물음표를 붙여 옵션 인자로 지정할 수 있다!
• 옵션인자가 전달되지 않았을 때의 처리할 로직도 만들어줘야 함

function example(name: string, num? : number) : number {
	...
  if(num){
   ...
  } else{
   ...
  }
}

기본적인 타입선언/함수선언은 여기서 끝~

필요한 문법은 그때그때 찾아보아요^0^

4. import / export / export default

• import : 외부 모듈 불러오기 import {불러올 클래스명, 함수명, 상수 등등} from '상대경로'; 추가로 별칭을 붙일 수도 있어요 import { 불러올거 as **별칭명 }** from '상대경로';
  

• export : 모듈의 변수, 함수, 타입 등을 외부 모듈이 사용할 수 있도록 표기하는 키워드

  export let count: number = 1;
  export class Person {
  	name: string;
  }
  export function example(){
  	count++;
  }

  위의 예시에서 export를 붙인 모든 변수, 클래스, 함수는 다른 모듈에서 import해서 사용할 수 있다!
  

• export default : 모듈 내에서 export를 지정할 때 export default와 같이 하나의 default export를 지정할 수 있다. default export는 import하는 쪽에서 그 default export된 대상(클래스나 함수 변수 등등)을 바로 사용할 수 있도록 한다. 이는 모듈 내에서 단 하나만 존재해야 한다 !!!