노마드코더 타입스크립트 강의 내용을 정리한 글입니다.

강의 링크

변수

const a: any = 'a'; 

any는 모든 타입을 허용한다는 뜻이다.
any를 사용하면 굳이 타입스크립트를 쓰는 이유가 없어지므로 웬만하면 사용하지 않는다.
( 자바스크립트는 모든 변수/함수의 타입이 any인 타입스크립트이다. )

아래와 같이 변수의 타입을 지정해줄 수 있다.

const b:string = 'b'
const c:number = 1
const d = 's' // 초기값을 지정해줄 경우 타입 명시할 필요 X

// readonly - 읽기 전용 (값을 바꿀 수 X)
const foods: readonly string[] = ['삼겹살', '피자'];

// unknown - 값에 뭐가 들어올지 모를 때
// 이후에 값이 들어오더라도 사용할 때마다 타입을 검사해줘야 하므로 any보다 안전한 타입이다.
let num: unknown;
num = 2;

if (typeof num === 'number') {
  let a = num + 1;
}

Tip

타입스크립트에는 타입 추론 기능이 있으므로 초기값을 지정해줄 경우 굳이 타입을 명시해주지 않아도 된다.

함수

함수는 매개변수와 리턴값의 타입을 명시해준다.

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

function print(a: string): void {
  console.log(a);
}

function _error(): never { // 항상 오류를 출력하거나 무한루프 등으로 
  throw new Error(); // 리턴값을 절대로 내보내지 않을 함수에 never 사용
}

type

type은 타입스크립트에서 가장 많이 사용하는 문법으로 타입 정의의 역할을 한다.

type S = string;
const a: S = 'abc';

Union 타입으로 사용할 수도 있다.

type Food = 'pasta' | 'pizza' // pasta or pizza 
const food:Food = 'pasta' // 자동완성 기능을 제공해준다.

type array = number[]; // number로 이루어진 리스트
const b: array = [1, 2, 3];

interface

type 만으로 모든 타입을 정의할 수 있다.
그러나 interface는 딕셔너리와 클래스를 표현할 때 더욱 편하게 사용할 수 있다.
객체지향 프로그래밍처럼 상속의 기능도 지원한다.

interface Dict {
  [key: string]: number; // 키의 개수 제한 X
}

const dict: Dict = {
  a: 1,
  b: 2,
  c: 3,
};

interface Person {
  name: string;
  age: number;
  weight?:number; // 있어도 없어도 되는 키는 옆에 ?를 붙여준다.
}

const a: Person = {
  name: '김범서',
  age: 19,
};

interface Person {
  name: string;
  age: number;
  weight?: number;
}

interface Korean extends Person { // Person을 상속받음
  favoriteFood: '순대국' | '삼겹살';
}

const a: Korean = {
  name: '김범서',
  age: 19,
  favoriteFood: '삼겹살',
};

위의 Korean interface를 type으로 선언하면 다음과 같다.

type Korean = Person & {
  favoriteFood: '순대국' | '삼겹살';
};

interface가 더 직관적이다.

클래스

접근제어자

타입스크립트의 class 접근제어자

private - 자기 자신 클래스에서만 호출 가능
protected - 자기 자신, 자기를 상속하는 클래스에서 호출 가능
public - 클래스 밖에서도 호출 가능

초기화

타입스크립트에서는 클래스를 더 쉽게 초기화할 수 있다.

일반 자바스크립트

class Person {
  constructor(firstName, lastName, nickName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.nickName = nickName;
  }
}

타입스크립트

class Person { 
  constructor( // 매개변수 자리에 접근제어자와 타입을 적어주면 알아서 초기화 됨
    protected firstName: string,
    protected lastName: string,
    protected nickName: string
  ) {}
}

추상 클래스

타입스크립트에서도 추상 클래스를 선언할 수 있다.

abstract class Person {
    constructor(
        protected name:string,
        protected age:number
    ){}
    abstract sayHi(name:string):string
    abstract getName():string
}

class Korean extends Person{ // 추상 클래스 Person을 상속 받음
    sayHi(name:string){
        return `${name}야, 밥 먹었냐?`
    }
    getName(){
        return this.name
    }
}

위의 추상 클래스를 interface로 대체할 수도 있다.

interface Person{
    name:string;
    age:number;
    sayHi(name:string):string;
    getName():string;
}

class Korean implements Person{
    constructor(
        public name:string,
        public age:number
    ){}
    sayHi(name:string){
        return `${name}야, 밥 먹었냐?`
    }
    getName(){
        return this.name
    }
}