엘리스 24일차 목요일 온라인강의 TypeScript

치즈말랑이·2022년 5월 5일
엘리스
0

엘리스

목록 보기
25/47
post-thumbnail

01

개요

타입스크립트
자바스크립트의 상위 집합
자바스크립트의 한계를 해결

타입스크립트를 쓰는 이유

  • 동적 타입을 정적으로 선언할 수 있다.
  • 타입 유추를 통한 타입 제어가 가능하다.
  • 컴파일 시점에 오류를 포착할 수 있다.
  • JavaScript에서 찾을 수 없는 추가 코드 기능을 제공한다.

동적 타입을 정적으로

let a;

a = 1;
a = 'b';
let a : number;

a = 1;
a = 'b'; // type error

타입 유추를 통한 타입 제어

const sum = (a,b) => {
	return a+b
}

sum(1, "2") // 12
const sum = (a: number, b: number) => {
	return a + b;
}

sum(1, 2); // 3

기본 Type

  • TypeScript는 JavaScript 코드에 변수나 함수 등 Type을 정의할 수 있다.
  • Type을 나타내기 위해서 타입 표기(Type Annotation)를 사용한다.
  • Type 세가지
    1) 기본 자료형
    2) 참조 자료형
    3) 추가 제공 자료형

기본 자료형

object와 reference 형태가 아닌 실제 값을 저장하는 자료형
primitive type 내장 함수를 사용 가능한 것은 자바스크립트 처리 방식 덕분

  • 종류
    • string
    • boolean
    • number
    • null
    • undefined
    • symbol (ES6 추가)

참조 자료형

객체, 배열, 함수 등과 같은 Object 형식의 타입
메모리에 값을 주소로 저장하고, 출력 시 메모리 주소와 일치하는 값을 출력

  • 종류
    • object
    • array
    • function

    추가 제공 자료형

    TypeScript에서 개발자의 편의를 위해 추가로 제공하는 타입
  • 종류
    • tuple
    • enum
    • any
    • void
    • never

Utility Types

TypeScript는 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다.
유틸리티 타입은 전역으로 사용 가능하다.

함수 사용

함수를 정의할때 사용되는 변수를 매개변수라고 한다.
함수를 호출할때 사용되는 값을 인수라고 한다.

function add(x, y) {
	return x+y;
}

add(2, 5);

x, y는 인자 값 = 매개변수 = parameter
2, 5는 인수 = argument

https://amagrammer91.tistory.com/9

일급 객체

  • 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
  • 조건:
    • 다른 함수에 매개 변수로 제공할 수 있다.
    • 함수에서 반환 가능
    • 변수에 할당 가능
  • js와 ts의 함수는 일급 객체이다.

함수 선언 방법 5가지

// 1. 함수 선언식
function world(name) {
	return `hello${name}`;
}
// 2. 함수 표현식
let world2 = function (name) {
	return `hello${name}`;
}
// 3. 화살표 함수 표현식
let world3 = (name) => {
	return `hello${name}`;
}
// 4. 단축형 화살표 함수 표현식
let world4 = (name) => `hello${name}`;

// 5. 함수 생성자, 권장 x
let world5 = new Function("name", 'return "hello" + name');

TypeScript를 이용해 함수 사용하기

  • TypeScript 함수 작성 시 반환 타입을 추론 하는걸 권장
  • 함수의 매개 변수와 인수의 타입이 호환 가능하게 작성
  • 인수의 타입을 잘못 전달하면 에러 발생

타입 추론

  • TypeScript 컴파일러는 방정식의 한쪽에만 타입이 있더라도 타입을 추론할 수 있다.
  • 이러한 타입 추론 형태를 "contextual typing"이라고 한다.
  • 이를 통해 프로그램에서 타입을 유지하기 위한 노력을 줄일 수 있다.
let f12 = function(x: number, y: number): number {
	return x+y;
}

let f12: (baseValue: number, increment:number) => number = function(x,y) {
	return x+y;
}

기본 매개변수 (Parameter)

  • 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야 한다.

선택적 매개변수 (Optional Paramter)

  • js에서는 모든 매개변수가 선택적으로, 인수가 없다면 undefined가 된다.
  • ts에서 변수명 뒤에 ? 붙이면 선택적으로 가능
function buildName(firstName: string, lastName?: string) {
	if (lastName) return firstName + "" + lastName;
  	else return firstName;
}

기본-초기화 매개변수 (Default Parameter)

  • ts에서는 값을 제공하지 않거나, undefined일때 매개변수의 값 할당 가능
function buildName(firstName: string, lastName= "smith") {
	return firstName + "" + lastName;
}

나머지 매개변수 (Rest Parameters)

function buildName(firstName: string, ...restOfName: string[]) {
	return firstName + "" + restOfName.join('');
}

02 Class

OOP

장점:

  • 프로그램을 유연하고 변경이 용이하게 만든다.

  • 개발, 보수 간편

  • 직관적인 코드 분석 가능
    강한 응집력과 약한 결합력 지향

  • 클래스의 요소 : 멤버, 필드, 생성자, 메소드

  • 인스턴스: new 연산자에 의해서 생성된 객체

Class 생성하기

  • new를 사용하여 Person 클래스의 인스턴스를 생성한다.
  • Person class의 멤버는 name, constructor, say()가 있다.
  • 클래스 안에서 this를 앞에 붙이면 클래스의 멤버를 의미한다.
class Person {
	name: string;
  	constructor(name: string) {
    	this.name = name;
    }
  	
  	say() {
    	return "Hello, My name is " + this.name;
    }
}

let Person = new Person("june");

접근 제어자, 상속

  • 속성 또는 메소드로의 접근을 제한하기 위해 사용한다.
  • TypeScript에는 3종류의 접근 제어자가 존재한다.
  • public > protected > private
  • Java와는 다르게 package개념이 없어 default 접근 제어자는 존재하지 않는다.

public

  • 프로그램 내에서 선언된 멤버들이 자유롭게 접근할 수 있다.
  • TypseScript에서 멤버는 기본적으로 public으로 선언된다.
  • 명시적으로 멤버를 public으로 표시할 수도 있다.
class Animal {
	public name: string
  	constructor(name:string) {
    	this.name = name;
    }
}
new Animal("cat").name;

private

  • 멤버가 포함된 클래스 외부에서의 접근을 막는다.
class Animal {
	private name: string
  	constructor(name:string) {
    	this.name = name;
    }
}
new Animal("cat").name; // 에러

상속

class Animal {
  move(distanceInMeters:number) {
        console.log('Animalmoved${distanceInMeters}m.');
	}
}

class Dog extends Animal {
  makeSound(){
    console.log("멍멍!");
  }
}

class Cat extends Animal {
  makeSound(){
    console.log("야옹!");
  }
}
const dog = new Dog();
dog.move(10);
dog.makeSound();
const cat=newCog();
cat.move(5);
cat.makeSound();
  • OOP는 상속을 이욯아여 존재하는 클래스를 호학장해 새로운 클래스를 생성할 수 있다.
  • extends 키워드로 Animal이라는 기초 클래스에서 Dog 클래스가 파생되었다.
  • 파생된 클래스는 하위 클래스(subclass), 기초 클래스는 상위클래스(superclass)라고 부른다.
  • Dog, Cat은 Animal의 기능 (move 메소드)을 확장하기 때문에, move()와 makeSound()를 가진 인스턴스를 생성한다.

protected

  • 멤버가 포함된 클래스와 그 하위 클래스 외부에서의 접근을 막는다.

Getters & Setters / readonly / static

  • getters & setters
    비공개로 설정하려는 속성은 private으로 설정하고, 속성값을 읽고 수정하는 getter / setter 함수를 사용한다.
  • readonly
    읽기만 가능한 속성 선언
  • static
    전역 멤버를 선언할 때 사용한다.
    전역멤버: 객체마다 할당되지 않고 클래스의 모든 객체가 공유하는 멤버
class Person {
	private _name: string
  	
	get name() {
    	return this._name;
    }
  
  	set name(name: string) {
    	if (name.length > 10) {
        	throw new Error ("name too long")
        }
      	this._name = name;
    }
}
  • readonly
    속성을 읽기 전용으로 설정해 변경할 수 없게 만든다.
    선언될 때나 생정자에서 값을 설정하면 이후 수정할 수 없다.
    -> 선언할때 초기화 해도 생정자에서 새로 초기화 가능

추상클래스

  • 다른 클래스들이 파생될 수 있는 기초 클래스
  • 직접 인스턴스화 할 수 없다.
  • abstract키워드는 추상클래스나 추상 메소드를 정의하는데 사용된다.
  • 추상 메소드는 클래스에는 구현되어있지 않고 파생된 클래스에서 구현해야 한다.
abstract class Animal {
	protected name: string
  
  	constructor(name: string) {
    	this.name = name;
    }
  
  	abstract makeSound(): void
  
  	move(): void {
    	console.log("move!!");
    }
}

class Dog extends Animal {
	constructor(name: string) {
    	super(name); // 파생된 클래스의 생성자는 반드시 super()를 호출
    }
  
  	makeSound(): void { // 반드시 파생된 클래스에서 구현 필수
    	console.log(this.name + "멍멍");
    }
}

const animal = new Animal("animal"); // 에러

const dog = new Dog("진돗개");
dog.makeSound(); // 진돗개 멍멍

추상클래스를 활용한 디자인 패턴
전체적인 알고리즘은 상위 클래스에서 구현하고 다른 부분은 하위 클래스에서 구현한다.

profile
치즈말랑이
공부일기
이전 포스트

엘리스 23일차 수요일 실시간강의 TypeScript

다음 포스트

엘리스 25일차 금요일 온라인강의 Generic

0개의 댓글