포스트

TypeScript 맛보기

게시
Preview Image
By ykdman
9 분읽는 시간

TypeScript 맛보기

타입 스크립트를 써야하는 이유

기존 동적언어인 JS에서 타입 명시 구문을 추가하여 개발 시,

컴파일 단계에서 에러 상황을 미리 인지 할 수 있어 개발 단계에서의 예외 처리가 유용하다.

즉, 런타임 에러 를 방지하기 좋다.

공통적으로 TS를 사용해야 하는 이유는 다음과 같다.

  • 버그 예방
  • 향상된 개발자 경험과 코드 퀄리티 향상
  • 크로스 브라우징 문제 해결
    • TS 는 문법변환에서 이점이 있다.

TS 와 JS 의 관계

  • TS는 JS의 superset 언어이다.
  • JS의 문법에 타입 표기 구문이 추가 된 상태의 문법을 사용한다.
  • TS는 JS와 달리 브라우저에서 실행 되지 않는다.
    • TS를 JS로 컴파일 하여 사용해야 한다.

TypeScript 설치하기 및 사용하기

  1. npm 으로 typescript 설치

    1

     npm install typescript

  2. TS config 파일 생성

    1

     npx tsc --init
    • tsconfig.json 파일에서 TS 사용에 관한 다양한 설정을 할 수 있다.

  3. 작성한 TS를 JS로 컴파일 하는 방법

    1

     npx tsc "파일명.ts"
    • 위의 명령어를 사용하면, 지정된 TS 확장자 파일을 JS 파일로 컴파일한 파일이 생성된다.

TS의 기본유형 알아보기

  • TS 는 기본적으로 코드 작성 과정에서 지정한 타입이 아닌 값이 들어오는 것을 추적하여 에러를 알려준다. (대부분 에디터의 능력에 의존)
  • 때문에 개발 단계에서 컴파일 없이 타입에러를 빠르게 알 수 있는 것이 장점이다.

💻 기본자료형

  • 원시형 : number, string, boolean, null, undefined

    1
2
3
4
5
6
7
8
9
10
11
12
13

      // 원시형 : number (Number와는 다르다.)
  let age : number ;
  // 미리 number 형으로 선언해놓으면 나중에 숫자를 할당하는 것이 가능
  age = 2;
    
  // 원시형 : string
  let userName : string;
  userName = "Tim";
    
  //  원시형 : boolean
  let isBoolean : boolean;
  isBoolean = true;

  • 참조형 : arrays, objects,

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

      // 참조형 : array
  // 자료형[] 과 Array<자료형> 은 기본적으로 같다.
  let hobbies1 : string[];
  let hobbies2 : Array<string>;
    
  hobbies1 = ['a','b','c']
  hobbies2 = ['golf', 'soccer'] 
    
  let ages : number[];
  let userAges : Array<number>;
    
  ages = [1,2,3];
  userAges = [12,156,67];
    
  // 참조형 : object
  let person : {
    name : string,
    age : number
  }
    
  person = {
    name : "Tim Cook",
    age : 56
  }
    
  // 객체 배열 type 만들기
  let people : {
    name : string,
    age : number
  } []

기본적으로 TS에서는 변수의 type을 지정했을 때 해당 type의 값이 변수에 할당되지 않으면 에러가 발생한다.

참조형인 객체에서는 특히 위의 코드에서와 같이 지정한 key에 type 까지 필수로 할당 되어야 오류 없이 변수를 사용할 수 있다.

타입 추론 (Type Infrence)

1
2
3

// 타입 추론(Type Inference)
let program = "This is TS Program";
program = 12
  • 발생 에러 : Type 'number' is not assignable to type 'string’
  • TS는 강력한 타입 추론을 통해 변수에 처음 지정된 타입을 추론하여 자료형을 강제한다.
    • 처음 할당된 값을 변수의 자료형으로 간주한다!

유니온 유형

1
2
3
4
5

// 유니온 유형
let test : string | number ;
test = 1; // 정상
test = "test"; // 정상
test = true // 에러 발생 : Type 'boolean' is not assignable to type 'string | number'
  • 유니온 유형은 타입에 여러가지 자료형을 받을 수 있도록 | (or) 를 사용하여 타입을 지정하는 방식이다.

Type Aliases (타입 이름 붙이기)

  • 동일한 타입을 반복해서 작성하는 것을 방지 하기 위해 사용된다.
  • type 키워드를 사용하여, 재사용 가능한 타입을 생성한다.
    • Pascal Case로 첫글자는 대문자
    • JS에는 없는 문법이며 TS에서만 사용 가능하다.
1
2
3
4
5
6
7
8
9
10

// Type Aliases
type Person = {
  name : string,
  age : number
}

const testPerson : Person = {
  name : "testman",
  age : 123
}

  • 위의 코드를 JS로 컴파일 하면 다음과 같은 코드로 작성된다.

    1
2
3
4

      var testPerson = {
      name: "testman",
      age: 123,
  };
    • type 키워드는 JS에 없기 때문에, 실제 JS에서는 위와 같이 작성 됨을 알 수 있다.
    • 즉, 코드 작성 환경에서 TS는 컴파일 전에 미리 타입을 지정하고 재사용하는 방식이 유용하다는 장점을 최대한 살려야 한다.

타입이 있는 함수 선언

1
2
3
4
5
6
7
8
9

// 타입이 있는 함수를 선언하는 방법
function add(a: number, b: number) : number {
  return a + b;
}

const add2 = (a : number, b: number) : number => {
  return a + b
}
  • 기본적으로 타입 추론을 통해 TS는 함수의 결과 (반환값) 자료형을 추론 할 수 는 있다.
  • 인수를 넣는 공간 뒤에 콜론을 통해서 함수의 반환값에 대한 자료형을 지정할 수 있다.
  • 입력값이 any 이고 반환을 하지 않아 타입 추론이 되지 않는 함수는 void 형을 반환하게 지정된다.

제네릭 (Generic)

  • JS에는 없는 문법이다.
  • 타입을 지정하기 어려운상태에서 입력되는 인수의 자료형을 사용하기 위해 사용된다.
  • 함수 명 옆에 <> 키워드를 사용하여 제네릭을 사용할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Generic

// Generic을 사용하지 않은 함수
function inserAtBegining1(array: any[], value: any) {
  const newArray = [value, ...array];
  return newArray;
}
// Generic을 사용한 함수
function inserAtBegining2<T>(array: T[], value: T) {
  const newArray = [value, ...array];
  return newArray;
}

const newArray1 = inserAtBegining1(['a','b','c'], 10)
const newArray2 = inserAtBegining2([1,2,3] , -1) // 타입이 강제되어 number만 넣을 수 있다.
const stringArray = inserAtBegining2['a','b','c'], 'test')// 정상 수행 된다.
  • Generic을 사용하지 않을 때의 함수(위의 코드) 는 인수들의 타입을 any로 지정하여, 실제 함수 사용시에는 어떠한 자료형의 값이 들어올지 추론이 안되기 때문에, 실제 컴파일에서 에러 발생 가능성이 높다.
  • 반면 Generic을 사용한 함수는 함수를 사용할 때 입력되는 인수들이 <T> 로 지정되어, 입력되는 인수가 정해진 순간, 해당 인수의 자료형을 추론하여, 그 외의 인수들또한 자료형이 결정 된다.
  • 제네릭을 사용하여, 함수 타입에 대한 유연성과 안정성을 추구할 수 있다.
TS, 기초
javascript JS TS TypeScript
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.