타입스크립트 소개

• 타입스크립트 = 자바스크립트에 타입 syntax가 추가된 것
• 자바스크립트가 실행되는 모든 곳에서 실행가능
• @ts-check -> @param 으로 타입을 점차 설정 가능
• 사용 이유: 자바스크립트는 동적 타입 언어라 런타임에 변수의 타입이 결정됨, 타입스크립트는 정적 타입 언어라 컴파일 타임에 변수의 타입이 결정됨 (타입 에러 미리 발견가능) + 타입스크립트는 es6을 es5나 es3으로 변환해 크로스브라우징 문제를 해결가능 (babel이 필요없음) + 가독성을 높여줌, 유지보수가 중요한 프로젝트에 적합함 (작은 프로젝트는 오버 엔지니어링)

타입스크립트 기본 타입

• string, number, boolean
  • 기본 타입 소문자임
• object
  • 보통 interface를 사용
  • key type 형태로 object property의 타입 지정
• Array, Tuple, enum
  • Array (e.g. number[])
  • Tuple은 길이와 타입이 고정된 배열 (e.g. [string, number, number]
  • enum은 이름이 있는 상수들이 열거되어 있는 집합 (e.g. enum EnumType {A,B,C})
• any, void, never
  • any 타입은 비추천 (noImplicityAny: true를 사용하는 것이 좋음)
  • void = 어떤 타입도 존재 할 수 없음, 보통 함수에서 리턴값이 없을때 사용
  • never = 어떤 값도 가질 수 없는 타입, 보통 함수의 리턴값에 사용 (에러나 무한루프 = 종료가 될 수 없는 상황)
• null, undefined
  • strictNullChecks 옵션을 사용해 null과 undefined 변수 참조시 에러 발생하게 하는 것이 좋음
• Symbol
  • 변경 불가능한 유일한 값
  • 보통 객체의 key로 자주 사용됨
• unknown
  • 어떤 값이든 들어올 수 있으니 검사해서 사용하라는 타입
  • 타입을 특정하기 전에는 에러를 발생시킴 (any와 다름)

타입스크립트에서 함수 선언하기

• type alias로 tuple 타입을 interface 사용한 것처럼 사용 가능
• 자동 타입 추론으로 인해 수동적으로 입력안해도 되는 부분이 있음 (값으로 타입이 추론됨)
• type으로 함수 타입을 작성 가능 (e.g. type FnType = (a: string) => number;), 보통 함수 자체를 인자로 넘길때 사용
• 선택적 매개변수 (job?: string), 기본 매개변수 job=“student”)
• 나머지 매개변수 (…rest은 항상 배열 형태로 작성 해야함), 배열에 다양한 타입의 값이 들어오면 …rest (number | string)[] 과 같은 형태로 적어주어야함

유니언 타입과 교차 타입

• 유니언 타입 (|)
• 교차 타업 (&) (두 타입을 합쳐서 새로운 타입을 만들어줌, 클래스가 상속받는 느낌) (type Person = {a:string} , type Student = Person & {school:string}
  • 기본 타입을 합치는 것은 안됨

Type Aliases

• 중복되거나 복잡한 타입들에 이름을 지어줘서 재사용하는 것
• type Person = {name:string, age:number}
• type aliase와 interface의 차이점
  • interface는 extends 말고 그냥 동일한 interface를 선언해서 확장할 수 있음 (선언적 확장), interface는 객체에만 사용가능

리터럴 타입

• as const
• readonly만 가능한 타입
• 백엔드와 값들을 정해놓고 사용할때 리터럴 타입으로 정해놓고 자주 사용함

클래스

• 자바스크립트로 작성 후 quick fix로 TypeScript 형식으로 수정 가능
• 클래스 상속
• public, protected, private 접근 제한자
  • public이 기본값
  • protected = 상속받는 하위 클래스에서까지만 접근가능, 외부에서는 사용 불가능
  • private = 본인 클래스에서만 접근 가능
• readonly 지정자
  • constructor 외부에서 값 할당이 불가능하게 하도록함
• getters/setters
  • private로 설정한 프로퍼티에 접근하거나 값을 변경할때 사용
• 전역 프로퍼티
  • static 키워드 사용, 인스턴스 생성하지 않고 클래스의 프로퍼티나 메소드에 접근 가능
• 추상 클래스
  • abstract class
  • 정의만 되어 있고 구현되어 있지 않음
  • 추상 클래스를 상속 받은 클래스 에서는 추상 클래스 메서드를 반드시 구현 해야됨
• 메서드 오버라이딩
  • 상위 클래스에 정의 된 메소드를 하위 클래스에서 다시 재정의 하는 것

제네릭

• 다양한 타입에서 작동하는 컴포넌트를 작성할때 사용
• input과 output의 타입이 같아야 될때와 같은 상황에 사용 (function foo (arg:T):T {}), const foo: arg:T => T = (args) => {})
• 제네릭 타입 변수
  • 함수의 매개 변수로 여러개의 제네릭 타입 변수 사용 가능
• 제네릭 클래스
  • class List
• 제네릭 인터페이스
  • interface Person
• 제네릭 제약조건
  • T extends interface 와 같이 제네릭 타입을 interface로 확장할 수 있음

끝

😊