TIL : TypeScript

hihyeon_cho·2023년 1월 17일
typescript
0

TIL

목록 보기
54/101

TypeScript?

: TypeScript는 JavaScript에 구문을 추가하여 type을 초기에 선언하여 오류를 잡을 수 있도록 한다.

Javascript랑 다른점 ?

(1) Typescript는 정적 타입, Javascript는 동적 타입이다.

아래와 같이 자바스크립트는 초기에 number 값으로 선언되었음에도 불구하고 이후에 string값을 넣어줘도 별다른 문제 없이 값이 변경된다. 그러므로 동적 타입이라고 할 수 있다. 

let num = 3;
num = '삼';

하지만 Typescript는 위처럼 작성하면, 처음에 number를 할당했으니 number에 string를 할당할 수 없다고 error가 발생하게 된다.

(2) Typescript는 변수의 타입이 컴파일타임에 결정되지만, Javascript는 변수의 타입이 런타임에 결정된다.

컴파일 타임 (compile time) : 작성한 소스코드가 어떠한 것(js, binary 등)으로 변환되는 과정

런타임 : 프로그램이 실행되는 과정

Typescript를 쓰는 이유

Javascript에 비해 어렵지만,
런타임시 오류를 내보내기 때문에, 프로젝트가 커질수록 유지보수가 어려운 자바스크립트보다 유지보수가 유리하다. IDE에서 타입을 알기에 에러를 발생시켜, 문제점을 초기에 잡을 수 있다.

TypeScript 셋팅하기

설치하기

  1. npm init -y

  2. npm install typescript

  3. npx tsc --init

    사용할 모듈을 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 불러와서 실행한 다음에, 파일을 다시 없애는 방식으로 모듈을 사용함
    ⇒ tsc(typescript compiler)모듈로 초기화 할 건데, 이 모듈은 한번만 쓰고 버리겠다.

tsconfig.json

  • target ⇒ typescript를 target에 입력된 버전의 자바스크립트로 변환하겠다.
  • module ⇒ typescript에서 javascript로 전환될때, import문법을 어떻게 변환할지 정하는 부분( 대표적으로 commonjs, ES2015, ESNext ) 사용 commonJS ⇒ import 문법을 require문법으로 ES2015, ESNext ⇒ 그냥 import문법으로 변환

typescript ⇒ javascript로 바꿔야하는 이유!

브라우저가 이해를 못함. 브라우저가 알아들을 수 있는 것은 html, css, javascript 밖에 없으므로 변환하는 과정이 필요하다.

Typescript를 실행시키는 방법

  1. npx tsc로 자바스크립트 파일로 변환하여 변환한 파일을 node xxx.js 로 실행하기
  2. ts-node로 실행시키기



TypeScript의 기본타입

: string, number, boolean, object, array, tuple, Enum, any,void, null,undefined, never

💡 Array

  • 타입[]=[내용] 배열 요소를 나타내는 타입 뒤에 괄호를 쓰기
let arr1: number[] = [1, 2, 3];
let arr2: string[] = ["1", "2", "3"];
let arr3: boolean[] = [true, true, false];
  • Array<타입>=[내용] ( <> : 제네릭 )

💡 Tuple

: 요소의 타입과, 개수와 고정된 배열을 표현할 수 있다. 요소들의 타입이 모두 같을 필요는 없다.

let x: [string, number];
x = ["hi", 2];
x = [2, "hi"]; // error
console.log(x[0], x[1]);
console.log(x[2]) //배열에 2번째 인덱스가 없어서 error

💡 Enum

: enumeration의 줄임말로, 특정 값들의 집합을 의미하는 자료형이다.

  • 숫자형 Enum

    enum Direction {
  Up,
  Down,
  Left,
  Right,
}

//enum은 내부적으로 member들에게 number를 매긴다. (0부터 차례로)
//member의 number는 수동적으로 매길수도 있으며, ex) Down=200
//첫번째 member의 number를 넣어서 시작점을 설정할 수도 있다. ex) Up = 1

console.log(Direction.Up, Direction.Down,Direction.Left,Direction.Right); //0,1,2,3

  • 문자형 Enum
    : 문자형 Enum은 Enum값 전부 특정 문자열 혹은 다른 Enum의 멤버의 값으로 초기화를 해주어야한다. 문자형 Enum은 숫자와 다르게 auto increment의 기능이 없다.

    enum Direction2 {
 Up = "UP",
 Down = "DOWN",
 Left = "LEFT",
 Right = "RIGHT",
}
  • 복합형 Enum
    : Number와 String을 섞어서 쓴 Enum. 유지보수 할때, 혼란을 야기할 수 있는 위험이 있다고 한다. 
    enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

💡 Any

: 타입이 어떤것이든 다 들어갈 수 있다. 자바스크립트파일의 모든 변수들의 타입은 any이다. ⇒ 남발금지 ! 최후의 방법으로 사용해야 함.

let str: any = "hi";
str = 88;
str = true;
str = ["a", "b"];
str = undefined;

let num: any = 19;
let arr: any = ["a", 2, true];

💡 Void

: 함수에서 retun 값이 없을 경우에 , 반환값의 타입

함수뒤에 :void 를 작성하면서 function c는 반환값이 없다고 알려주는 용도로 활용한다. 변수의 타입을 명시하는 용도로는 활용하지 않음

function c(){
    console.log('c')
}
위와 같이 함수안에 return 값이 없을 경우에,
function c(): void {
  console.log("c");
}
//함수뒤에 :void 를 작성하면서 함수 c는 반환값이 없다고 알려주는 용도로 활용한다. 변수의 타입을 명시하는 용도로는 활용하지 않음

💡 Null & Undefined

let a: null = null;
let b: undefined = undefined;

// 값을 할당할 수 없으므로 unionType을 활용할 때 많이 사용한다.
let unionType1: number|null = 123;
let unionType2: number|null = null; //number와 null을 둘 다 할당할 수 있다.

💡 Never

: 함수가 비정상적으로 종료되거나, 함수가 끝까지 실행되지 않았음을 의미하는 type.

function a(): never {
  while (true) {}
  // 여기 이후로 실행되지 않거나
}
function b(): never {
  throw new Error("Error"); //에러가 발생하면 반환되는게 never
}


Union Type

객체가 하나 이상의 타입이 될 수 있도록 선언하는 방법이다.

자바스크립트의 or 연산자와 같은 A이거나 B인 Type을 나타낸다.

const printOut = (input: string | number) => {
  console.log(input);
};
// | <= 파이프(연산자)를 이용해서 type을 여러개 연결하는 방식이 Union Type
printOut("문자열");
printOut(20);
printOut(true);

Type Alias

const user1: { name: string; power: number; height: number } = {
    name: 'Joy',
    age: 23,
    height: 160,
  };

  const printUser = (user: { name: string; age: number; height: number }) => {
    console.log(user.name, user.age);
  };

이렇게만 쓰면 다른 함수를 작성하거나 함수의 매개변수를 수정할 때,{ name: string; age: number; height: number } 를 반복적으로 적어주면서 type을 할당하게 됨.

그래서 따로 Type Alias를 사용한다 !

//type.ts
export type User = { 
  name: string; 
  age: number; 
  height: number 
}

( 보통 type alias는 따로 관리하여 import 하는 방식으로 사용한다. )

import type { User } from "./type";

const user1: User = {{
    name: 'Joy',
    age: 23,
    height: 160,
  };

const printUser = (user: User) => {
  console.log(user.name, user.age);
};

내일은 예제를 더 찾아보면서 활용하는 걸 연습해 봐야겠다!

profile
hihyeon_cho
코딩은 짜릿해 늘 새로워 ✨
이전 포스트

TIL : React 개념 정리

다음 포스트

TIL : Typescript

0개의 댓글