1강 타입스크립트 필수 문법

타입스크립트

: 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어이다.

정적 타입의 컴파일 언어이며, 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환된다.

 

 

타입스크립트 장점 

 

1. 타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거한다.

 

2. 자바스크립트 보다 에러메세지 퀄리티가 높다. 

 

3. 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다.

 

 

타입스크립트 단점

 

1. 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다.

 

2. 코드가 길어져 가독성이 떨어질 수 있다.

 

 

 

tsconfig.json 파일 설정

//tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

 

tsconfig.json은 ts 파일들을 js로 변환할 때 어떻게 변환할지 세부 설정 가능하다.

 

target은 어떤 버전의 JS로 바꿀지 정하는 부분이다.

 

module은 JS 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정한다.

(common js의 경우 require 문법을 쓴다)

 

 

필수 문법 정리

// string 타입 지정
let 이름: string = "jung hee";

// 배열 타입 지정
let 성: string[] = ["kim", "park"];

// object 타입 지정
let 사람: { name: string } = { name: "정희" };

// object 타입 지정시 옵션을 주고 싶을때
let 노트북: { name?: string } = { name: "맥북" };

// 다양한 타입이 들어오게 하려면 Union type
let 핸드폰: string | number = "갤럭시";

// 타입을 변수에 담아서 쓸 수도있다. => type alias
type Mytype = string | number;
let 책: Mytype = 123;

// 함수 타입 지정
function 함수(x: number): number {
  return x * 2;
}

// array에 쓸 수 있는 tuple 타입
type Member = [number, boolean];
let TOM: Member = [123, true];

// object에 타입 지정해야할 속성이 많다면?
type Tablet = {
  [key: string]: string;
};

let ipad: Tablet = { name: "apple" };

// class 문법
class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

 

 

참고한 글 

 

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!

 

https://www.samsungsds.com/kr/insights/TypeScript.html

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript)