[TypeScript] 타입스크립트 기초 다지기 feat. 캡틴판교

 

* 본 포스팅의 내용은 캡틴판교님의 강의  "인프런 타입스크립트 입문 - 기초부터 실전까지"를 수강하며 정리한 내용입니다.

 

Definition

• 자바스크립트에 타입을 부여한 언어, 자바스크립트의 확장된 언어
• 브라우저에서 실행하려면 컴파일이 필요함

Why

• 에러의 사전 방지
  • 타입을 지정함으로써 의도치 않은 코드의 동작을 예방
• 개발 생산성 향상
  • 코드 가이드 및 자동완성

Fundamentals

Basic type

• Boolean
• Number
• String
• Object
  • {key: type, key: type}{name: string, age: number}
• Array
  • : number[]
  • : Array<number>
• Tuple
  • 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식
  • 배열의 각 인덱스에 타입을 정의함
  • : [string, number]
• Enum
  • 특정 값(상수)들의 집합
• Any
• Void
  • 변수 중 undefined, null 에만 할당
  • 함수 중 반환 값을 설정할 수 없는 타입 인 경우
• Null
• Undefined
• Never
  • 함수의 끝에 절대 도달하지 않는다는 의미

Function

• 타입스크립트에서의 함수
  • 함수의 파라미터 타입
  • 함수의 반환 타입
  • 함수의 구조 타입
• 함수 기본 타입 선언
  • 매개변수와 반환값에 타입 추가function sum(a: number, b: number): number { return a + b;}
• 함수의 인자
  • 타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주
  • 옵셔널 파라미터?: number

Interface

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

• 상호간에 정의한 약속/ 규칙
• 범주
  • 객체의 스펙(속성과 속성의 타입)
  • 함수의 파라미터
  • 함수의 스펙(파라미터, 반환 타입 등)
  • 배열과 객체를 접근하는 방식
  • 클래스
• 변수에 활용
• var seho: User = { age: 33, name: "세호", };
• 함수에 활용
• function getUser(user: User) { console.log(user); } const capt = { name: "캡틴", age: 100, }; getUser(capt);
• 함수의 스펙(구조)에 활용
• interface sumFunction { (a: number, b: number): number; } var sum: sumFunction; sum = function (a: number, b: number): number { return a + b; };
• 인덱싱
• interface StringArray { [index: number]: string; } var arr = ["a", "b", "c"]; arr[0]; //'a' arr[0] = 10;
• 딕셔너리 패턴사전에서 apple을 찾고 싶을 때 a라는 인덱스에 먼저 접근하듯
• interface StringRegexDictionary { [key: string]: RegExp; } var obj: StringRegexDictionary = { // sth: /abc/, cssFile: /\\.css$/, jsFile: /\\.js$/, }; // obj['cssFile']='a' Object.keys(obj).forEach(function (value) {});
• 객체의 속성을 어떻게 접근할 것인지 정의하는 방식
• 인터페이스 확장
• interface Person { name: string; age: number; } interface Developer extends Person { language: string; } var gia: Developer = { language: "js", age: 35, name: "gia", };

Type

Type Aliases

정의한 타입에 대해 이름을 부여함

// string 타입을 사용할 때
const name: string = 'capt';

// 타입 별칭을 사용할 때
type MyName = string;
const name: MyName = 'capt';

// 인터페이스 레벨
type Developer = {
  name: string;
  skill: string;
}

// 제네릭 사용
type User<T> = {
  name: T
}

• 타입 별칭은 확장이 불가능/ 인터페이스는 확장 가능
• → interface 선언 사용 추천

Union Type & Intersection Type

파라미터나 변수에 한가지 이상의 타입을 쓰고 싶을 때 연산자를 사용하는 것

// Union Type
var msg: string | number | boolean;

// Intersection Type
var msg: string & number & boolean;

• Union : 공통되는 부분만 만족하는 타입
• intersection : 여러 타입을 모두 만족하는 하나의 타입

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: string;
}
function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작
  someone.age; // X 타입 오류
  someone.skill; // X 타입 오류
}
introduce({name:'디벨로퍼',skill:'웹개발'}) //정상
introduce({name:'캡틴',age:100}) //정상

function introduce(someone: Person & Developer) {
  someone.name; // O 정상 동작
  someone.age; // O 정상 동작
  someone.skill; // O 정상 동작
}
introduce({name:'디벨로퍼',skill:'웹개발'}) // x, 타입오류
introduce({name:'디벨로퍼',skill:'웹개발',age:100}) // o 정상동작

Enum

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

• 숫자형
• // 초기 값을 지정하지 않을 때 enum Direction { Up, // 0 Down, // 1 Left, // 2 Right // 3 } // 초기 값 지정 시, 초기 값부터 차례로 1씩 증가 enum Direction { Up = 1, // 1 Down, // 2 Left, // 3 Right // 4 }
• 문자형: 전부 특정 문자 또는 다른 이넘 값으로 초기화해야 함
• enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", }

Class

JS는 프로토타입 기반 언어

프로토타입을 이용한 상속

https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

• built-in js API/ js native API
• 객체/배열 생성 시 자동으로 생성됨. 생성한 요소의 상위 개념(Object, Array …)

Generics

재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징

타입을 마치 함수의 파라미터처럼 사용하는 것

• 제네릭 타입 변수
  • text에 .length가 있다는 단서가 없음 → any를 지정한 것과 같은 동작

  // solution
  function logText<T>(text: T[]): T[] {
    console.log(text.length); // 제네릭 타입이 배열이기 때문에 `length`를 허용합니다.
    return text;
  }
  // or
  function logText<T>(text: Array<T>): Array<T> {
    console.log(text.length);
    return text;
  }
  

• function getText<T>(text: T): T { console.log(text.length); // Error: T doesn't have .length return text; }

Type Inference

타입스크립트가 코드를 해석해 나가는 동작

• Best Common Type알고리즘으로 다른 타입들과 가장 잘 호환되는 타입을 선정
• let arr = [0, 1, null];
• 모든 값을 유니언으로 묶어 나감

Type Assertion

시스템적으로 추론되는 것보다 개발자가 스스로 타입을 단언

//   let div = document.querySelector("div");
//   if (div) {
//     div.innerText;
//   }

let div = document.querySelector("div") as HTMLDivElement;
div.innerText;

Type Guard

• 타입 단언을 이용할 때 문제점

interface Developer {
  name: string;
  skill: string;
}
interface Person {
  name: string;
  age: number;
}

function introduce(): Developer | Person {
  return { name: "Tony", age: 33, skill: "Iron Making" };
}
let tony = introduce();
//   console.log(tony.skill) // 공통된 프로퍼티만 접근 가능
console.log(tony.name);

if ((tony as Developer).skill) {
  let skill = (tony as Developer).skill;
  console.log(skill);
} else if ((tony as Person).age) {
  let age = (tony as Person).age;
  console.log(age);
}

• 타입 가드 정의 및 사용

function isDeveloper(target: Developer | Person): target is Developer {
  return (target as Developer).skill !== undefined;
}
if (isDeveloper(tony)) {
  console.log(tony.skill);
} else {
  console.log(tony.age);
}