2019-06-12 TypeScript

자바스크립트는 동적타이핑언어를 지원한다. (정적타이핑언어가 아니다. -> c나c++은 정적타이핑)

값에 타입이있다.

var x = 'hello'
typeof x // String

 

정적타이핑  - 코드가 예측 가능하다. 에러가 컴파일타임에 뜬다. 

동적타이핑 - 에러가 런타임에 뜬다. (이부분은 정적타이핑이 더 안전한부분), 실수를 유발 할 수 있다. 간편하다. 

 

TypeScript

동적타이핑언어인 자바스크립트를 정적타이핑언어처럼 사용할 수 있게 한다.

프로토타입기반언어인 자바스크립트를 클래스기반언어처럼 사용할 수 있게 한다.(generic, abstract 등)

 

타입추론 : 

title = 'my-app';
title: string = 'my-app'; // 타입스크립트 형식이긴하지만, 타입추론에 의해 이미 string인걸 알고있

위 코드에서 보면 my-app이라는 string이라는 타입이 정해짐(타입추론에 의해)

이후에 title은 string타입으로 적용

 

**타입스크립트는 컴파일을 한다. 그래서 string이있는곳에 다른타입값을 주면 그때 에러를 잡는다(컴파일타임때)

// 윗 영역에서 아래 영역은 건드려도된다.
@Component({
  selector: 'app-root',
  template: `
    <input type="text">
    <div></div>
    
  `,
  styles: []
})

// 아래 영역에서 윗 영역을 건드리면 안된다.
export class AppComponent {
  title = 'my-app';
  num: number;
}

 

@Component({
  selector: 'app-root',
  template: `
    <input type="text" (keyup.enter)="chageVal(input)" #input>
    <div>{{value}}</div>
    
  `,
  styles: []
})
export class AppComponent {
  value = 'Angular';

  chageVal(elem: HTMLInputElement){
    this.value = elem.value;
    elem.value = '';
  }
}

 

대괄호 : 프로퍼티바인딩

소괄호 : 클래스바인딩

 

// todo angluar 실습

import { Component } from '@angular/core';

interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

@Component({
  selector: 'app-root',
  template: `
    <input type="text" placeholder="enter todo!"  (keyup.enter)="addTodo(input)" #input>
    <ul class="todos" *ngFor="let todo of todos">
      <li>
        <input type="checkbox" [checked]="todo.completed" (change)="toggleTodo(todo.id)">
        <span [class.completed]="todo.completed">{{todo.content}}</span>
        <button (click)="removetodo(todo.id)">X</button>
      </li>
    </ul>
    <pre>{{todos | json}}</pre>
    
  `,
  styles: [`
    .completed {
      text-decoration: line-through;
    }
  `]
})
export class AppComponent {
  todos: Todo[] = [
    { id: 1, content:'HTML', completed: true },
    { id: 2, content: 'CSS', completed: false },
    { id: 3, content: 'JS', completed: true }
  ];
  // todos: Array<Todo> = [] generic 방법

  addTodo(inputElem: HTMLInputElement) {
    console.log('addtodo', inputElem);
    this.todos =  [{id: this.generateid(), content: inputElem.value, completed:false} , ...this.todos]
    inputElem.value = '';
  }

  removetodo(id: number) {
    this.todos = this.todos.filter(todo => todo.id !== id);
  }
  
  toggleTodo(id: number) {
    this.todos = this.todos.map(todo => todo.id === id ? {...todo, completed: !todo.completed}:todo);
  }

  generateid() {
    return this.todos.length ? Math.max(...this.todos.map(todo => todo.id)) + 1 : 1;
  }

}

 

 

타입스크립트는 자바스크립트의 SuperSet이다. (saas와 유사함)

 

타입스크립트가 추론할 수 있으면, 굳이 명시하지 않아도 된다.

 

정적 타이핑의 장점은 코드 가독성, 예측성, 안정성의 향상이라고 볼 수 있는데 이는 대규모 프로젝트에 매우 적합하다.

 

 

 

접근 제한자 안써주면 constructor내에서만 유효한 지역변수로 쓰인다.

class Foo {
  /*
  접근 제한자가 선언된 생성자 파라미터 x는 클래스 프로퍼티로 선언되고 지동으로 초기화된다.
  public이 선언되었으므로 x는 클래스 외부에서도 참조가 가능하다.
  */
  constructor(public x: string) { }
}

 

 readonly 키워드

값을 할당할 수 없고 오직 읽기만 가능한 상태 이를 이용해 상수의 선언에 사용

 

class Foo {
  private readonly MAX_LEN: number = 5;   // 밖에서도 못보고 상수로써 사용
  private readonly MSG: string;           // 재할당 불
  

 

static 키워드

static 키워드를 클래스 프로퍼티에도 사용할 수 있다.

class Foo {
  constructor(prop) {
    this.prop = prop;
  }

  static staticMethod() {
    /*
    정적 메소드는 this를 사용할 수 없다.
    정적 메소드 내부에서 this는 클래스의 인스턴스가 아닌 클래스 자신을 가리킨다.
    */
    return 'staticMethod';
  }

  prototypeMethod() {
    return this.prop;
  }
}

아래처럼 클래스의 프로퍼티로 사용할 수 있다.

class Foo {
  // 생성된 인스턴스의 갯수
  static instanceCounter = 0;
  constructor() {
    // 생성자가 호출될 때마다 카운터를 1씩 증가시킨다.
    Foo.instanceCounter++;
  }
}

 

추상클래스

규모가 큰 개발에서 주로 사용된다.

상속을 받게되면 abstract클래스안의 메소드들을 만들어라 라고 강제하는것

반드시 상속을 받아서 클래스를 정의한 후 사용해야한다. (=> 생성자가 불가능하다.)

 

 

인터페이스

타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다

 

인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다

interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

// 변수 todo의 타입으로 Todo 인터페이스를 선언하였다.
let todo: Todo;

// 변수 todo는 Todo 인터페이스를 준수하여야 한다.
todo = { id: 1, content: 'typescript', completed: false };

 

클래스와 인터페이스

클래스 선언문의 implements 뒤에 인터페이스를 선언하면 해당 클래스는 지정된 인터페이스를 반드시 구현하여야 한다. 

 

// 인터페이스의 정의
interface ITodo {
  id: number;
  content: string;
  completed: boolean;
}

// Todo 클래스는 ITodo 인터페이스를 구현하여야 한다.
class Todo implements ITodo {
  constructor (
    public id: number,
    public content: string,
    public completed: boolean
  ) { }
}

const todo = new Todo(1, 'Typescript', false);

 

선택적 프로퍼티

interface UserInfo {
  username: string;
  password: string;
  age?    : number;  // ?가 붙으면 있어도 그만 없어도 그만.
  address?: string;
}