[포스코x코딩온] 웹 풀스택 과정 14주차 회고 | Typescript

 

📌 TypeScript

Javascript의 기본 문법에 자료형을 체크하는 기능을 추가한 것이다.

• Javascript의 type 해석으로 인한 오류 방지: Javascript가 자의적으로 type을 해석하고 코드를 실행하여 의도와 다른 방식으로 쓰이는 것을 방지한다.
• 실시간 디버깅: 정적 파일언어이기 때문에, 실행하지 않고도 코드 상의 에러를 알 수 있다.

💡 Typescripte 사용하기

• TypeScript 설치: npm i typescript (설치 안되면, global로 설치 npm i typescript -g)
• 설치 되었는지 버전 확인: tsc -v
• tsconfig 파일 생성: tsc --init
• ts 파일을 js 파일로 변환: tsc 파일이름.ts (웹브라우저는 ts 파일을 읽을 수 없기 때문에 ts 파일에서 js 파일로 변환하는 과정이 필요)
• ts-node 모듈을 설치하여, ts 파일을 js 파일로 변환하지 않고 실행 가능: 설치 npm i ts-node >> 실행 ts-node 파일이름.ts

💡 Typescript의 변수 타입

변수나 함수를 만들 때, 타입까지 명시하여 선언해야 한다. (변수이름: 타입;)

💡 기본 타입

number

let num: number = 1;

string

let str: string = "str";

boolean

let isTrue: boolean = true;

undefined

let undef: undefined;

null

let empty: null = null;

array

: 배열에 들어갈 요소의 타입을 설정해야 한다. (길이를 명시할 필요는 X)

• 배열 내 한가지 종류의 타입 넣기

let arr: string[];
const numArr: number[] = [1, 2, 3, 4, 5];
let strArr: Array<string> = ["apple", "banana"];

• 배열 내 여러 종류의 타입 넣기

let arr1: (number | string)[] = [1, 2, 3, "one", "two", "three"];
let arr2: Array<boolean | null | number[]> = [true, null, [10, 20]]

object

let obj: object = {
  name: "hi",
  age: 10,
}

💡 TS 타입 (JS에는 없음)

Tuple

• 순서와 개수가 정해져 있는 배열 (JS에서는 배열과 같음)
• 배열 내 각각의 요소에 모두 타입을 지정해야 한다.
• 순서와 규칙이 있는 배열에는 Tuple을 이용한다.

let drink: [string, number];
drink = ["cola", 2000];
let drink2: [string, number] = ["cola", 2000]

• 일반 js 배열과 동일하게, 인덱스로 접근 / 메서드 사용 / spread 연산자 사용 가능하다.

console.log(drink[0]); // cola
console.log([...drink2, "콜라공장"]); // ["cola", 2000, "콜라공장"]

• readonly: 데이터를 변경할 수 없다.

let drink3: readonly [string, number] = ["sprite", 2000];
// drink3.push("콜라공장"); // error 발생 (실시간 디버깅)

Enum

• 숫자 열거형, 문자열거형으로 값들에 미리 이름을 정의하고 사용하는 타입이다.
• 주로, Enum으로 정의된 타입 Auth(그룹)를 만들고 점 접근법으로 Auth에 정의된 값을 이용한다.

enum Auth {
  admin = 0,
  user = 1, 
  guest = 2,
}
console.log(Auth.admin); // 0
console.log(Auth.user); // 1
console.log(Auth.guest); // 2

• 선언 이후로는 내용을 추가하거나 삭제할 수 없다.
• enum의 value로는 숫자와 문자열만 허용한다.
• 값을 넣지 않고 선언한다면, 가장 위의 요소부터 0으로 할당되어 1씩 늘어나는 숫자형 enum으로 지정된다.

enum Cake {
  chocolate,
  vanilla,
  strawberry,
  kiwi = "kiwi", // 숫자와 문자열 같이 쓸 수 있으나, 통일하는 것이 좋음
}
console.log(Cake.chocolate); // 0
console.log(Cake.vanilla); // 1

any

• 어떤 타입이든 상관없이 오류가 나지 않는다.
• 빈 배열을 먼저 선언하고 싶을 때 or 받아오는 데이터 타입이 확실하지 않을 때 사용할 수 있으나, 웬만하면 사용을 지양하는 것이 좋다.

let val: any;
let arrAny: any[] = [1, 2, "str", true];

💡 사용자 정의 type

interface

• object의 타입을 정의하는 규칙이다.
• object를 선언할 때, :object가 아니라 interface로 만든 type을 써준다면 (아래 예시에서 :Student, 내부에 있는 key의 type까지 지정할 수 있다.

interface Student {
  name: string;
  isPassed: boolean;
}
const student1: Student = {
  name: "kim",
  isPassed: true,
}

• interface는 상속이 가능하다.
• 필수값이 아니라면 물음표 처리한다.

interface 야구부 extends Student {
  position: string;
  weight: number;
  height: number;
  [grade: number]: Score; // grade가 key가 되는 것이 아니라 의미를 부여하는 역할을 해준다.
  readonly backNumber?: number;
}

const tiger: 야구부 = {
  name: "tiger",
  isPassed: true,
  position: "pitcher"<
  weight: 90,
  height: 180,
  1: "A",
  2: "B",
}

• 점 접근법, 대괄호 접근법으로 value 변경 가능하다.

tiger["1"] = "C";
tiger.isPassed = false;

type

• object 뿐만 아니라, 문자열이나 숫자로 제한을 둘 수 있다.

type Score = "A" | "B" | "C" | "D";
const score1: Score = "A";
// const score2: Score = "E"; // error (type에서 설정한 것 이외의 값이 들어올 수 X)

• object에 선언도 가능하다.

type Person = {
  name: string;
  age?: number;
  like?: string[];
};

let person1: Person = {
  name: "person1",
  age: 20,
  like: ["blue", "apple"],
}

💡 함수에서의 type 선언

• 선언 시, 매개변수의 타입과 return 타입(생략가능)을 설정한다.
• return이 없는 함수는 void로 설정할 수 있다.
• 선언된 매개변수의 개수와 함수 호출 시 전달되는 파라미터의 개수가 동일해야 한다.

선언하는 방식

• 기본 함수 형식

function sum(a: number, b: number): number {
  return a + b;
}

• 화살표 함수

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

• 리턴 생략한 형태

const sum = (a: number, b: number) => a + b;

TS vs JS

• JS에서는 매개변수를 선언하고, 호출 시 parameter를 전달하지 않거나 더 많은 갯수를 전달했을 때 오류가 발생하지 X
• TS의 경우, 선언한 매개변수의 개수와 타입과 일치하는 parameter를 전달하지 않으면 오류가 발생한다.
• 들어오지 않아도 되는 변수가 있다면, 물음표 처리하여 undefined가 될 수도 있음을 정의한다.

function print(a: number, b: number, c?: number): void {
  console.log(a);
  console.log(b);
  console.log(c);
}
// 함수 호출
print(1,2,3); // 1 2 3
print(1, 2); // 1 2 undefined

const squareArea = (a: number, b: number) => a * b;
console.log(`사각형 넓이: ${squareArea(3, 4)}`);

never

• 항상 함수 끝에 도달하지 않는 경우의 return 타입이다.
• 함수를 빠져나갈 수 있는 특정 조건이 있다면 never 타입이 아니다.

function goingOn(a: number): never {
  while (true) {
    console.log("go")
    // if (a>10) break; // error (never 타입이 아님)
  }
}

interface 선언 시, 함수 타입 지정

• 함수 선언과 마찬가지로, 매개변수와 return 값의 타입을 지정한다.

interface Greet {
  name: string;
  hi(): string; // 함수 hi()가 string 타입을 리턴한다.
  bye(a: number): string; // 함수 bye()가 number 타입의 인자를 받아 string 타입을 리턴한다.
}
const kim: Greet = {
  name: "kim",
  hi() {
    return "hi my name is" + this.name;
  },
  bye(a: number) {
    return `작별인사를 ${a}번 했다.`;
  }
}

// 함수에 접근하여 호출한다.
console.log(kim.hi()); // hi my name is kim
console.log(kim.bye(2)); // 작별인사를 2번 했다.

• interface로 함수의 타입만을 설정할 수도 있다.

interface Add {
  (a: number, b: number): number;
}
const sum: Add = function (num1, num2) {
  return num1 + num2
};

• 여러 interface를 교차 타입으로 사용할 수 있다.

interface Toy {
  name: string;
  start(): void;
}
interface Car {
  name: string;
  color: string;
  price: number;
}

const toyCar: Toy & Car = {
  name: "tayo",
  start() {
    console.log(this.name);
  },
  color: "blue",
  price: 20000,
}
toyCar.start(); // tayo

함수 오버로딩

• 매개변수의 타입/갯수, return 타입이 다를 때, 같은 이름의 함수로 매개변수의 종류와 개수를 달리 설정할 수 있다.

function add(a: string, b: string): string;
function add(b: number, b: number): number;
function add(a: any, b: any) {
  return a + b;
}

Generic

• 모든 값이 들어올 수 있는 함수의 경우, Generic 타입을 이용한다.
• Generic 타입을 설정한 뒤, 함수를 호출할 때 데이터 타입을 지정하여 사용한다. (타입을 마치 함수의 파라미터처럼 사용할 수 있음)

function getValue<T>(val: T): T {
  return val;
}
function arrLength<T>(arr: T[]) {
  return arr.length;
}

console.log(getValue<string>("str")); // str
console.log(arrLength<number>([1, 2, 3, 4])); // 4
console.log(arrLength<string>(["a", "b"])); // 2

• 매개변수 타입이나 return 타입이 T 하나로 묶을 수 없는 경우, 다른 문자를 사용하면 된다. (일반적으로 T, K 를 사용)

function printSome<T, K>(x: T, y: K) {
  console.log(x);
  console.log(y);
}

printSome<string, number>("str", 1); // str 1