TypeScript 기본 문법 정리

SSO·2022년 4월 19일
0

LikeLion10th

목록 보기
7/16

슬랙봇 개발을 시작하기에 앞서 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된 대상(클래스나 함수 변수 등등)을 바로 사용할 수 있도록 한다. 이는 모듈 내에서 단 하나만 존재해야 한다 !!!
profile
Github_qkrthdus605

0개의 댓글