JS) 자바스크립트보다 좀더 엄격한 TypeScript에 대해

백준우·2022년 1월 2일

JavaScript typescript

JavaScript & TypeScript

목록 보기

15/15

1. TypeScript에 대해

1.1 TypeScript란...

1.2 TypeScript 사용 이유

2. TypeScript 사용법

3. TypeScript 쉬운 예제

1. TypeScript에 대해

마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어이며 확장자로는 .ts를 사용하며, 컴파일의 결과물로 JavaScript 코드를 출력한다. 최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시켜야 한다.

1.1 TypeScript 특징

타입스크립트는 정적 타입의 컴파일 언어이며 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다.
타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어입니다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다.
타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공한다.

즉, 개발자가 의도한 변수나 함수 등의 목적들을 명확하게 전달할 수 있고 그렇게 전달된 정보를 토대로 컴파일 에러알림같은 풍부한 피드백을 받을 수 있게 되므로 자바스크립트를 실제로 사용하기 전에 타입 에러들을 미리잡는것이라고 할 수 있다.

1.2 TypeScript 사용 이유

JavaScript의 상위호환이 TypeScript이므로 쉽게 익힐 수 있다.
타입을 설정하여 정적인타입의 컴파일언어로 협업단계에서 용이하게 사용된다.
대부분의 라이브러리들이 타입스크립트를 지원하며 마이크로소프트의 VScode를 비롯해 각종 에디터가 지원된다.
절차지향,객체지향,함수형등 여러가지 패러다임을 적용할 수 있습니다.
코드에 목적을 명시하고 목적에 맞지않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거합니다.

2. TypeScript 사용법

이번엔 간단한 예제를 ts파일로 생성하여 js 파일로 컴파일하는 방법을 실행해 보겠다.
개발환경은 vsCode이다.

TypeScrip로 만들 파일을 생성한다. (확장자를 .ts로 설정 하면 된다.)
npm으로 typescript를 설치한다.

$ npm i -g typescript

tsconfig.json파일을 생성, 설정합니다.($ tsc --init 으로 설정파일을 받아와 주석해제를해도 됨)

{
 "compilerOptions":{
   //컴파일 ECMA script대상 지정
   "target":"es6",
   // 모듈 코드 생성 지정
   "module":"commonjs",
   // js파일 컴파일 경로 지정
   "outDir":"./dist",
   // 컴파일할 파일 경로 지정 
   "rootDir":"./src",
   //타입 스크립트의 엄격한 유형검사 활성화 
   "strict": true,
   //모듈 해석 전략을 지정할 수 있습니다. 
   "moduleResolution":"node",
   //es6 모듈을 사양을 준수하여 Commonjs 모듈을 가져올 수 있게 해준다.
   "esModuleInterop":true
  }
 }

ts파일에 ts문법에 맞추어 코드를 작성

)test.ts
const test: string = "abcd";
const test2: number = 5;

ts파일을 js파일로 컴파일 하기

$ tsc test.ts

js파일 결과물 확인

3. TypeScript에 사용되는 방식들

TypeScript를 사용하면 js와는 다르게 타입을 설정해야한다.
이번엔 이러한 타입을 설정하는 방법과 TypeScrip만의 활용방법을 나열해보도록 하겠다.

3.1 기본타입 설정하기

//숫자와 문자에 대한 타입설정
const strTest:string = 'abcd'
const numTest:number = 123
//배열에 대한 타입설정
const arr1Test:number[] = [1,2,3,4,5]
const arr2Test:string[] = ['a','b','c']
const arr3Test:[string,number] = ['baek',5] ( !== [5,'baek'] )

3.2 enum 활용

enum Obj {
  a = 5,
  pan = "pal",
  one = 1,
  two = "two",
}
//숫자는 양방향으로 검색이 가능하다.
const ex = Obj.a;
console.log(ex);5
const ex2 = Obj[5];
console.log(ex2);'a'
//문자열은 좌 -> 우로 단방향으로만 검색이 가능하다.
const ex3 = Obj.pan;
console.log(ex3); //'pal'
// const ex4 = Obj['pal']\
// console.log(ex4)

3.3 TypeScript에서 객체로 활용하는 interface

// 
type Score = "A" | "B" | "C";
interface User {
  name: string;
  age: number;
  gender?: string; //gender를 입력하여되고 안해도 된다.
  readonly birthyear: number; //객체로 선언할때 이후로는 수정이 불가하다.
  [key: number]: Score; //number타입을 key로 하며 Score의 값중 하나를 value로 가짐
}
let user: User = {
  name: "baek",
  age: 30,
  birthyear: 2000,
  1: "B",
};
user.name = "joon";

3.4 interface로 함수 정의하기

interface Add {
  (num1: number, num2: number): number;
}
const add: Add = (a, b) => {
  return a + b + 2;
};
interface IsAdul {
  (age: number): boolean;
}
const a: IsAdul = (age) => {
  return age > 19;
};

3.5 클래스문법을 활용한 TypeScript

interface Car {
  color: string;
  wheels?: number;
  start(): void;
}
//BMW클래스에 interface(Car)를 대입
class BMW implements Car {
  color;
  wheels = 4;
  constructor(c: string) {
    this.color = c;
  }
  start() {
    console.log("Go...");
  }
}
const bmw = new BMW('green')
bmw.color = 'green'
//bmw에 Car를 객체로 선언 
const bmw: Car = {
  color: "yello",
  start() {
    console.log("start");
  },
};
console.log(bmw.color);

3.6 overLoad사용(전달받는 매개변수에따라 함수가 다르게 출력되게 해야할때)

function join(name:string, age:number| string): string
function join(name:string, age:number| string): User
//아래와 같이 분기처리만 할경우 함수가 정상적으로 작동하지 않는다. 
//따라서 위의 2개의 줄을 작성해서 분기처리를 하여아 한다.
//(함수의 결과가 User로 나올지,string으로 나올지 확실히 분리 해주어야 한다.)
function join(name:string, age:number| string): User| string{
  if(typeof age ==='number'){
	return {
	name,
	age
	}};
  else{
	return '나이는 숫자로 입력하시오'
  };
}

3.7 Literal Types

const level = 'high' | 'middle' | 'low';
interface User {
  name: string,
  class : level
}
const baek:User{
  name :'bake'
  class:'low' //level의 값을 제외하고 사용시 에러가 출력된다.
}

3.8 Union Type

//가지고 있는 특별한 값으로 interface의 값을 나눈다.
interface Car {
  name: 'car',
  color: string,
  start(): void
}
interface train{
  name: 'KTX',
  color: string,
  stop(): void
}
function riding(ride: Car | train){
  if(ride.name === 'car'){
    ride.start();
  }
  else{
    gift.stop();
  }
}

3.9 Intersection Type

//여러개의 타입을 하나의 타입으로 합쳐준다. 
interface Car {
  name: 'car',
  color: string,
  start(): void
}
interface train{
  name: 'KTX',
  color: string,
  length: number,
  stop(): void
}
const publicride: Car & train = {
  name:'korea',
  start(){},
  color:'red'
  length:10000

느낀점

이번 4주프로젝트에서 TypeScript를 활용하기 위해 공부를 시작하였다.
예제를 공부하면서오류가 났지만 JS와 다르게 오류의 발생범위를 정확히 짚어주어 수정이 수월하였다.
백엔드를 담당하게되어 프론트보다는 사용성이 높지는 않겠지만 협업하는 환경에서는 매우 용이하게 쓰일것으로 보인다.

참고

백준우

이게 되네?

이전 포스트

JS) 자바스크립트보다 좀더 엄격한 TypeScript에 대해

JavaScript & TypeScript

1. TypeScript에 대해

1.1 TypeScript란...

1.2 TypeScript 사용 이유

2. TypeScript 사용법

3. TypeScript 쉬운 예제

1. TypeScript에 대해

1.1 TypeScript 특징

1.2 TypeScript 사용 이유

2. TypeScript 사용법

3. TypeScript에 사용되는 방식들

느낀점

참고

JS) Redux , 상태관리

0개의 댓글