풀스택 웹개발 부트캠프 15주차 (1)

TypeScript

• JavaScript의 기본 문법에 자료형 체크 기능을 추가한 것
• JavaScript가 자의적으로 type을 해석하고 코드를 실행시켰을 때, 의도와 다른 방식으로 쓰이는 것을 방지
• 정적 파일 언어 → 실행하지 않고도 코드 상의 에러를 알려줌 (실시간 디버깅)

TypeScript 사용

• 웹 브라우저는 ts 파일을 읽을 수 없음
• ts → js 변환 과정 필요

// TypeScript 설치
npm i typescript

//version 확인
tsc -v

// tsconfig 파일 생성
tsc --init

// ts 파일 생성 후, 이를 js로 변환
tsc 파일 이름.ts

// ts 파일 생성 후, 이를 js로 변환
node 파일명.js

• 변환 및 실행 자동화

// ts-node 모듈 설치
npm i ts-node

// 실행
ts-node 파일명.ts

JavaScript & TypeScript 공통 자료형

• number
• string
• boolean
• array
• object
• null
• undefined

number, string, boolean, null, undefined

• 변수나 함수를 만들 때, type까지 명시해서 선언

let num: number = 1;
let str: string = "str";
let isTrue: boolean = true;
let undef: undefined;
let empty: null = null;

array

• 배열의 길이를 미리 명시할 필요 ❌
• elements의 type은 명시 필요 ⭕

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

• 배열에 여러 개의 타입 넣기

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

1. number or string 배열 arr1
2. boolean or null or number 배열 arr2
3. 어떤 자료형이든 상관없이 들어갈 수 있는 배열 arrAny
   • any type은 type을 정확하게 명시하기 어려울 때 사용
     but 이는 typescript를 사용하는 의미가 사라지므로 과다하게 사용하는 것은 적절치 않음

object

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

TypeScript에만 존재하는 자료형 (JavaScript ❌)

• Tuple
• Enum
• never
• void
• any

Tuple

• Javascript에서는 배열과 같음
• 인덱스 접근 ⭕, 메서드 사용 ⭕, spread 연산자 사용 ⭕
• 순서와 개수가 정해져 있는 배열 (요소의 길이, type 고정)
• 일반 배열과 달리 배열의 element에 개별적으로 모두 type을 지정해주어야 함
• 순서와 규칙이 있는 배열 → Tuple 사용
• readonly : 데이터 변경 ❌

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

Enum

• 숫자 열거형 / 문자 열거형
• 값들에 미리 이름을 정의하고 사용
• 문자열이나 숫자에 미리 의미를 지정해두고 그룹화할 수 있는 속성
• Javascript의 object와 유사하지만, 선언 이후로는 내용 추가 또는 삭제 ❌
• enum의 value로는 문자열 혹은 숫자만 허용
• 값을 넣지 않고 선언하면, 숫자형 enum → 가장 위의 요소부터 0으로 할당되어 1씩 늘어남

enum Auth {
  admin = 0,
  user = 1,
  guest = 2,
}

• Auth.adimin / Auth.user / Auth.guest로 0, 1, 2 사용 가능

any

• 어떤 타입이든 상관 없이 오류 발생 ❌
• 빈 배열을 먼저 선언하거나 받아오는 데이터 타입이 확실하지 않을 때 사용
• 최대한 사용을 지양하는 것이 좋음

사용자 정의 타입

interface

• 여러 object의 타입을 정의하는 규칙
• object를 선언할 때, :object 대신 :interfact로 만든 타입 사용
  → 내부에 있는 key의 타입까지 지정 ⭕

interface Student {
  name: string;
  isPassed: boolean;
}

// student1이라는 object를 Student형으로 만듦
const student1: Student = {
  name: "yeon",
  isPassed: true,
};

type

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

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

// 문자열
type Score = "A+" | "A" | "B" | "C" | "D";
const score1: Score = "A";

// interface 상속
interface 야구부 extends Student {
  position: string;
  weight: number;
  height: number;
  [grade: number]: Score;
  readonly backNumber?: number;
}

• key-value 타입이 여러 개 올 수 있을 때, grade라는 이름이 key가 되는 것 ❌
  의미를 부여해주는 역할 ⭕
• 필수값이 아니라면 물음표 처리, 변경 불가능한 값은 readonly

함수에서의 type 선언

• 매개변수 타입 설정
• 함수의 return 타입에 따라 함수 전체 타입 설정 (return 타입을 보고 타입을 추론할 수 있으므로 생략 가능)
  • 이미 알고 있는 타입 외에도 never, void를 함수의 return 타입으로 설정 가능
• 선언된 매개변수의 개수와 함수를 호출할 때 전달되는 parameter의 개수가 동일해야 함
  cf) Javascript는 함수에서 매개변수를 선언하고, 호출할 때 parameter를 전달하지 않아도 오류 ❌

// 기본 형식
function squareArea(a: number, b: number): number {
  return a * b;
}

// 함수 표현식
const squareArea = (a: number, b: number): number => {
  return a * b;
};

// return 생략
const squareArea2 = (a: number, b: number): number => a * b;

// ?를 이용하여 c는 값을 전달하지 않아 undefined가 될 수도 있음을 정의
function print(a: number, b: number, c?: number) {
  console.log(a);
  console.log(b);
  console.log(c);
}

print(1, 2);

// interface 선언 시, 함수 타입 지정
interface Greet {
  name: string;
  hi(): string;
  bye(a: number): String;
}

const yeon: Greet = {
  name: "yeon",
  hi() {
    return "hi my name is " + this.name;
  },
  bye(a: number) {
    return `작별 인사를 ${a}번 했다.`;
  },
};

console.log(yeon.hi());
console.log(yeon.bye(3));

never

• never : 항상 함수 끝에 도달하지 않는 경우에 사용
• never ❌ : 특정 조건에서만 빠져나갈 수 있고, 어떤 조건에서는 무한루프

function goingOn(a: number): never {
  while (true) {
    console.log("go");
  }
}

Generic

• 함수를 호출할 때, 데이터 타입을 지정
• 타입을 함수의 parameter처럼 사용할 수 있음

// 함수 선언
function arrLength2<T>(arr: T[]): number {
  return arr.length;
}

// 함수 호출
console.log(arrLength2<string>(["a", "b"]));
console.log(arrLength2<number>([1, 2, 3, 4]));


function arrElement<T>(arr: T[], index: number): T | boolean {
  if (index > arr.length - 1) {
    return false;
  } else {
    return arr[index];
  }
}

console.log(arrElement<string>(["a"], 1));