TypeScript - 개념, 기본타입, 함수

박정호·2022년 10월 24일
typescript

TypeScript

목록 보기
1/8
post-thumbnail

🚀 타입스크립트란?

타입스크립트란 자바스크립트에 타입을 부여한 언이이다. 즉, 자바스크립트의 확장된 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 하고 이 변환 과정을 컴파일이라고 한다.

1️⃣ 사용이유

👉 에러의 사전 방지

다음과 같이 app.js에서 사용자의 정보를 받아오고 index.html에 출력하는 코드가 있다.

<index.html>

<h1>사용자 정보</h1>
    <div>
      <p>이름: <span id="username"></span></p>
      <p>이메일: <span id="email"></span></p>
      <p>주소: <span id="address"></span></p>
    </div>
<app.js>
var username = document.querySelector("#username");
var email = document.querySelector("#email");
var address = document.querySelector("#address");
		...
	  username.innerText = user[0].name;
      email.innerText = user[0].email;
      address.innerText = user[0].address;

결과는 다음과 같이 출력된다.

🧐 address는 왜 데이터를 받아오지 못할까? address의 경우 name,email과 달리 객체내의 객체가 존재한다. 따라서, 정확한 객체내의 속성을 작성하지 않으면 [object Object]와 같은 에러가 출력된다.

✅ 이처럼 정확한 속성의 타입을 알지 못하면, 콘솔창을 통해 어떤 데이터가 존재하는지 알아야하며, 화면이 출력되고 나서야 결과값을 확인 가능하다. 따라서, 코드 작성 시 미리 에러를 방지하기 위한 방법 중 하나가 타입스크립트이다.

가장 쉬운 예로는 다음과 같은 코드가 있다.

만약 sum의 파라미터로 두개의 정수를 정확히 삽입하면 문제가 없지만, 실수로 문자를 삽입하면 정확한 sum의 기능을 하지 못하게 되고 화면에 출력해서야 확인이 가능할 것이다.

// math.js
function sum(a, b) {
  return a + b;
}
sum(10,20); // 30
sum(10, '20'); // 1020

👍 따라서, ts파일에서 이러한 에러를 방지한다. a,b에 대한 타입을 미리 설정하여 맞지않는 타입이 오게 되면 오류가 발생하게 만드는 것이다.

// math.ts
function sum(a: number, b: number): number {
  return a + b;
}
sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

💡 참고로 JS Doc을 통해 JS파일에서도 ts와 같이 타입 설정이 가능하다. 하지만, 가독성이 나쁘고 효율성이 떨어지므로 TS를 사용하는 것이 좋다.

//@ts-check
/**
 *
 * @param {number} a 첫밴째 숫자
 * @param {number} b 두번째 숫자
 * @returns
 */

const add = (a, b) => {
  return a + b;
};

sum(10, "20"); //에러코드

👉 코드 자동 완성과 가이드

코드를 작성할 때 개발툴의 기능을 최대로 활용할 수 있다.

  • num은 정수형이므로 그에 맞게 사용할 수 있는 메서드들이 IntelliSense로 보인다.

  • num은 문자형이므로 그에 맞게 사용할 수 있는 메서드들이 IntelliSense로 보인다.

💡 IntelliSense: 코딩을 보다 편리하게 하는 기능 집합에 지정된 이름

2️⃣ 사용 방법

앞서 말했듯이 확장자가 ts인 파일은 브라우저가 바로 인식시킬 수 없으므로 컴파일이 필요하다. 즉, ts파일을 js파일로 변환하는 작업이 필요하다.

1. 다음과 같은 라이브러리 설치

npm i typescript -g

2. 해당 ts파일을 tsc 명령어를 통해 JS파일로 변환

tsc index.ts

3. 폴더 내에 js파일이 생성된 것을 확인 가능

4. tsconfig.json 생성
: tsconfig.json은 ts파일들을 js파일로 변환할때 어떻게 변환할 것인지 세부설정이 가능한 파일이다.
(설정파일 옵션문서)

{
  "compilerOptions": {
    "allowJs": true, // JavaScript 파일 컴파일 허용
    "checkJs": true, // .js 파일 오류 리포트 설정
    "noImplicitAny": true // 명시적이지 않은 'any' 유형으로 표현식 및 선언 사용 시 오류 발생
  }
}

💡 tsc 명령어 동작을 파일 생성마다 할 수 없으니 자동화할 수 있는데 이것은 웹팩의 의한 설정을 통해 알아보자.
: What is Webpack?: https://velog.io/@pjh1011409/webpack

3️⃣ 기본 타입

💡 잠깐) 타입표기(Type Annotation)
: :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식

✏️ String

ts 문자열 선언

let str: string = "hello";

✏️ Number

ts 숫자 선언

let num: number = 10;

✏️ Array

ts 배열선언

/ 숫자 선언
let arr: Array<number> = [1, 2, 3];
or
let arr2: number[] = [1, 2, 3];

// 문자 선언 
let arr3: Array<string> = ["1", "2", "3"];
or
let arr4: string[] = ["1", "2", "3"];

✏️ Tuple

  • 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식
  • 만약 정의하지 않은 타입, 인덱스로 접근하는 경우 에러 발생

ts 튜플 선언

let address: [string, number, boolean] = ["hi", 10, true];

//Error
arr[1].concat('!'); // Error, 'number' does not have 'concat'
arr[5] ='hi'; // Error, Property '5' does not exist on type '[string, number, boolean]'.

✏️ Boolean

ts 진위값 선언

let show: boolean = true;

✏️ Enum

  • 특정값(상수)들의 집합을 의미

ts 상수 선언

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

// 인덱스 번호로 접근
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];

// 인덱스 사용자 설정 가능
enum Avengers { Capt = 2, IronMan, Thor }
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

✏️ Any

  • 기존의 js로 구현된 서비스코드에 ts를 점진적으로 적용할 때 활용하기 좋은 타입
  • 모든 타입에 대해서 허용한다는 의미

ts any 선언

let str: any = 'hi';
let num: any = 10;
let arr: any = ['a', 2, true];

✏️ Void

  • 변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입
let unuseful: void = undefined;
function notuse(): void {
  console.log('sth');
}

✏️ Never

  • 함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입
function neverEnd(): never {
  while (true) {

  }
}

4️⃣ 함수 in TS

✏️ 함수의 파라미터 타입

const sum = (a: number, b: number) => {
  a + b;
};
sum(10, 20);

✏️ 함수의 반환 타입

const add = (): number => {
  return 10;
};

✏️ 함수의 구조 타입

인자의 개수에 따른 에러

: ts에서는 함수의 인자를 모두 필수 값으로 간주한다. 따라서, 함수의 매개변수를 설정하면 undefined 또는 null이라도 인자로 넘겨야 한다. 아래와 같이 정의된 매개변수 갯수 만큼 인자를 넘기지 않아서 에러가 발생한다.

// 인자 개수에 따른 에러
const sum2 = (a: number, b: number): number => {
  a + b;
};

sum2(10, 20, 30, 40, 50); // error: 2개의 인수가 필요한데 5개를 가져왔습니다

함수의 optional parameter

: ?를 사용하여 선택적인 인자 설정이 가능하다.

const log = (a: string, b?: string, c?: string) => {};
log("hello world",'1'); // 세번째 인자가 비어도 가능
log("hello"); // 두번째, 세번째 인자가 비어도 가능

참고하기 아주 좋은 사이트

참고 : 캡틴판교 타입스크립트

profile
박정호
기록하여 기억하고, 계획하여 실천하자. will be a FE developer (HOME버튼을 클릭하여 Notion으로 놀러오세요!)
다음 포스트

TypeScript - Interface, Type Aliases

0개의 댓글