TypeScript 기본 개념 정리

SERI·2022년 6월 6일
0

TypeScript

: 자바스크립트에 타입을 부여한 언어


🅰️ VARIABLE / DECLARATION / TYPE

  • 변수

    • primitives
      • number
      • string
      • boolean
      • null
      • undefined
      • tuple
        • push 사용 가능(단점)

  • TYPE

    • 클래스 이름은 타입으로도 사용 가능
    • 타입스크립트의 타입이란
      • 타입 별칭
      • 인터페이스
      • 클래스
        • 타입스크립트에서 클래스를 선언할 때 멤버변수는 미리 선언 해야 함
      • 이넘
      • 타입을 가리키는 import 구문
  1. 유니온 타입
    : 타입을 정의할 때 한 개 이상의 타입 사용 가능
let course: string | number = 'react';
let userName: string | string[];

주의 : 함수의 파라미터 타입으로 유니온 타입들로 정의했을 때 두 유니온 타입에 공통적으로 들어있는 속성만 접근 가능

  1. any
    • 기본 타입
    • 변수에 저장할 값의 타입에 대해 알려줄 것이 없다고 명시
    • 사용하지 않는 게 좋음 타입스크립트의 사용 목적 X

  2. 타입 추론
    • 변수의 타입을 할당한 값에 맞게 추정함. 다른 타입의 값을 넣으면 오류.
let course = 'react';
course = 123; // 오류. string type.
  1. Type Alias (타입 별칭)
    • JS (X)
    • 관리 수월
    • 코드 간결화
    • 반복해서 타입 정의하는 것을 방지
type Person = {
	name: string;
    age: number;
};

let person: Person;
let person: Person[];
  1. 객체 타입(구조) 정의
    • 알려준 타입의 객체만 해당 변수에 저장할 수 있다고 알려줌
let person: {
	name: string;
    age: number;
}; // 이런 식으로 정의

// 그러나 이와 같이 작성하는 방법이 더 좋다
const person = {
	name: 'Mike',
    age: 30
};

person = {
	name: 'Max',
    age: 32
};

let people: {
	name: string;
    age: number;
}[]; // 객체 배열
  1. 인터섹션 타입 (Intersection Type)
type A = B & C; // B + C = A
  1. 유틸리티 타입
    : 이미 정의해 놓은 타입을 변환할 때 유용 (더 간결)

7-1 partial
: 특정 타입의 부분 집합을 만족하는 타입을 정의

type MayHaveEmail = partial<Address>;

7-2 pick
: 특정 타입에서 몇 개의 속성을 선택해 타입 정의

const human: Pick<Hero, 'name'>

7-3 omit
: 지정된 속성만 제거한 타입을 정의

const chingtao: Omit<AddressBook, 'address'|'company'>
  • 선언

    • 배열 선언

      • let arr: number[] = [1,2,3];
      • 제네릭 사용
        let arr: Array<number> = [1,2,3];
    • 변수형 선언

      • let name: string;

⌨️ 타입을 가진 함수

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

function add(a: number, b: number): number
// function의 타입은 반환 값의 타입에서 추론됨
  • 함수 반환 타입 지정
    • 지정하지 않는 게 좋음
function add(a: number, b: number): number {
	return a + b;
}
  • void
    • return(반환값)이 없을 때
    • 항상 함수와 결합해 사용됨

✨ GENERICS

인자로 타입을 받는 함수

미리 알 수 없는 타입이 들어올 땐 제네릭을 쓴다. 미리 알 수 없는 타입이 들어온다고 any를 쓰게 되면 타입 추론이 발생하지 않으니 주의해야 한다.

  • 특정 타입을 사용해 함수를 실행하고 나면 해당 타입으로 고정되어 동작
  • 함수 이름과 매개변수 목록 사이에 <T> 삽입
  • 함수와 매개변수 목록에서 사용 가능
  • 동적으로 타입을 지정
  • 매개변수와 반환값의 타입이 같아야 한다는 것을 인지
  • 타입 안정성, 유연성
  • 함수 이름 뒤에 <T>를 적고, 함수의 인자와 반환값에 T를 적으면 타입스크립트가 타입을 추론함
function inserAtBeginning<T>(array: T[], value: T) {
// array와 value의 값은 같은 타입이라는 걸 알려줌
	const newArray = [value, ...array];
    return newArray;
 }
 
let arr: Array<number> = [1,2,3];

🤝 INTERFACE

: 상호 간에 정의한 약속 혹은 규칙을 의미
함수, 객체의 구조. 객체를 설명하는 데 사용.
구체적인 값 할당 X

interface Person {
  name: string;
  age: number; // 세미콜론으로 분리
}

let user1: Person;

user1 = {
  name: 'Max', // 쉼표로 분리
  age: 30,
}
  • 인터페이스의 약속
    • 객체의 스펙(속성과 속성의 타입)
    • 함수의 파라미터
    • 함수의 스펙(파라미터, 반환 타입 등)
    • 배열과 객체를 접근하는 방식
    • 클래스
let person = { name: 'capt', age: 28 };

function logAge(obj: { age: number }) {
	console.log(obj.age); //28
}
logAge(person); // 28
  
- 인자를 받을 때 객체의 속성까지 정의 가능

interfafce personAge {
	age: number;
    
function logAge(obj: personAge) {
	console.log(obj.age);
}
let person = { name: 'capt', age: 28 };
logAge(person);

- 인터페이스를 적용한 모습

: logAge()의 인자는 personAge라는 타입을 가져야 한다고 명시

: 인터페이스를 인자로 받아 사용할 때 속성, 인자의 갯수를 일치시키지 않아도 됨.
정의된 속성, 타입의 조건만 만족시키면 됨.

  • 옵션 속성
    • 인터페이스에 정의되어 있는 속성을 모두 사용하지 않아도 O
interface 인터페이스_이름 {
	속성? : 타입;
}
     // 속성 끝에 ?를 붙임
  • 장점

    • 속성을 선택적으로 적용
    • 인터페이스에 정의되지 않은 속성에 대해 인지시킴
    • 인터페이스를 이용해 객체를 선언하면 엄밀하게 검사함
  • 읽기 전용 속성

    • 값 변경 불가능

      interfave CraftBeer {
      readonly brand: string;
      }

    • 읽기 전용 배열

      • ReadonlyArray<T>
let arr: ReadonlyArray<number> = [1,2,3];
  • 속성 추가
1. 
let myBeer = { brandon: 'What' }';
brewBeer(myBeer as CraftBeer);

2. 
interface CraftBeer {
	brand?: string;
    [propName: string]: any;
  • 확장
interface A extends B  // B = interface
  • type vs interface
    인터페이스는 확장이 가능. 타입 별칭은 확장이 불가능. interface를 더 사용하자!
  • 함수
interface AddFn {
  (a: number, b: number): number;
}

📑ENUM

: 특정 값들의 집합을 의미하는 자료형

  • 숫자형 이넘
enum Direction {
	A = 1,
    B,
    C}

=> A -> 1, B -> 2, C -> 3
(초기값부터 1씩 증가. 초기값을 주지 않으면 0부터~)
주의! 선언 시 이넘 값에 다른 타입의 값을 주면 첫 번째 값에 초기화 해야 함

리버스 매핑
키로 값을 얻을 수 있고 값으로 키를 얻을 수 있음

  • 문자형 이넘
    • 이넘 값 전부 특정 문자나 다른 이넘 값으로 초기화 해야 함
    • auto incrementing (X)
enum Avengers { Capt, IronMan, Thor }
// 0, 1, 2 / Avengers.Capt, Avengers.IronMan, Avengers.Thor
let hero: Avergers = Avengers[0];
  • 복합 이넘
    • 다양한 타입으로 이루어진 이넘
    • 사용 X

React - typescript

  • 리액트와 타입스크립트로 함수형 컴포넌트를 만들기 위해선 React.FC 타입을 함수형 컴포넌트의 상수 옆에 사용
const Todos: React.FC<{items: string[]}> = (props) => {
~
}

// <>사이에는 필요한 형태의 props 정의 

📑ETC

<element>

  • useRef의 타입으로는 <HTMLinputElement>를 적어줌

d.ts

  • 타입스크립트 코드의 타입 추론을 돕는 파일

tsc

  • JS -> TS

! / ?

  • null을 다룰 때 반드시 null이 아니다라고 표시하려면 ! 사용

JS와의 차이

  • JS는 정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되지만 TS는정의된 매개변수 값만 받을 수 있음
  • 타입스크립트 타입은 컴파일 중에 확인되고, 자바스크립트 타입은 런타임 중에 확인됨

&

  • 합치기

접근 제한자(Acess modifier)

  • public (기본값)
    • 자식 클래스 내부에서 사용해도 사용할 수 O / 클래스 인스턴스 접근 가능
  • private, #
    • 자식 클래스 내부에서 사용할 수 X
  • protected
    • 자식 클래스에서 접근 가능

static

  • static으로 선언한 정적 멤버 변수와 메서드는 this가 아닌 클래스명으로 접근

추상 class / abstract

  • 추상 클래스는 new를 이용해 객체를 만들 수 X. 상속을 통해서 사용 가능
const car = new Car("red") // (X)
class Bmw extends Car // (O)

keyof

interface User{
	id: number;
    name: string;
}

type UserKey = keyof User;

const uk: userkey = "age";

partial<T>

  • 프로퍼티를 모두 옵션으로 바꿔줌
  • 타입을 Partial로 지정하면 ? 모든 변수에 써준 것과 같은 효과

Required<T>

  • 모든 프로퍼티를 필수로

tsc 파일이름.ts

  • 타입스크립트 파일을 컴파일하고 <script>에 입력된 .js 파일을 생성

클래스의 이름은 첫문자가 대문자

super

  • 다른 클래스로부터 상속받는 클래스에 고유 생성자를 추가할 때마다 상속하는 클래스에 super을 추가. 이는 함수처럼 사용됨.
  • 기본 클래스의 생성자 호출

getter

  • 값을 가지고 올 때 함수나 메소드를 실행하는 속성

클래스 VS 인터페이스

  • 인터페이스는 여러 개의 인터페이스로부터 구현할 수 있음. 클래스는 한 클래스로부터만 상속할 수 있다.
class Person implements interface, AnotherInterface{
	// code..
}

타입 단언
타입스크립트를 쓸 때 타입 단언(as, !)지양해야 한다. 잘못 사용하게 되면 자바스크립트로 실행되어 런타임 에러까지 발생하기 때문에 타입스크립트를 쓴 의미가 없어진다.

profile
절망의 계곡을 탈출하자

0개의 댓글