[JS]Typescript

장여진·2022년 3월 29일
0
post-thumbnail

Typescript란?👀

  • 자바스크립트의 타입을 강제시키는 언어
  • 에러를 사전 방지가능하고 코드 가이드 및 자동 완성으로 개발 생산성이 향상
  • yarn add typescript로 설치
  • yarn tsc --init으로 tsconfig.json생성 => complie을 할 때 부가적인 옵션을 부여할 수 있는 파일

1. 타입스크립트

  • 타입의 종류 = string, number, boolean ,객체는 타입이 없어서 직접 생성필요(interface이용)

  • 타입 추론(처음들어간 데이터를 통해 타입 인식) vs 타입 명시(타입을 직접 지정해주는 것)

// 타입추론
let aaa = "안녕하세요";

// 타입 명시
let bbb: string = "반갑습니다.";

[타입 선언 예시]

// 문자타입
let ccc: string;
ccc = "반가워요~~";

// 숫자타입
let ddd: number;
ddd = 345;

// 불린타입
let eee: boolean;
eee = true;

// 배열 타입
let fff: number[] = [1, 2, 3, 5];
let ggg: string[] = ["철수", "유리", "훈이"];
let hhh: (number | string)[] = ["철수", "유리", "훈이", 1, 2, 3];
let hhh2:(number[] | string[]) = [1,2,3,4]; 또는 ["철수", "유리", "훈이"];

// 객체 타입(타입 추론가능)
interface IProfile {
  name: string;
  age: number | string;
  school: string;
  hobby?: string; //지금은 없는 내용이지만 나중에는 생길 수 도 있음을 의미
}

let profile: IProfile = {
  name: "철수",
  age: 8,
  school: "다람쥐초등학교",
};

// 함수 타입
const add = (money1: number, money2: number, unit: string): string => {
  return money1 + money2 + unit;
};

add(1000, 2000, "원");

2.데코레이터

  • 사용자가 구조를 수정하지 않고 기존 객체에 새로운 기능을 추가할 수 있도록 하는 디자인 패턴

  • 타입스크립트에서 데코레이터를 사용하기위해서는 tsconfig.json에 아래 코드를 추가
    "emitDecoratorMetadata": true, "experimentalDecorators": true,

  • 데코레이터가 선언되어있는 아래에 클래스, 속성, 메서드, 파라미터를 전달 받는 함수

function zzz(aaaa) {
  console.log("=============================");
  console.log(aaaa);
  console.log("=============================");
}

@zzz //함수
class Appcontroller {} //인자

**nestjs에는 typescript가 자동으로 설치되어있음!


공부하며 작성하고 있는 블로그입니다.
잘못된 내용이 있을 수 있으며 혹시 있다면 댓글 달아주시면 감사하겠습니다 😊

0개의 댓글