Frontend/TS 7

TS - Interface

타입스크립트에서 객체의 type을 지정해주는 방법에는 2가지가 있다. 하나는 type 키워드를 통한 기본적인 방법이고, 나머지 하나는 Interface 키워드를 통한 방법이다. 1. type의 쓰임새 type 키워드는 여러가지 방법으로 다양하게 사용 가능하다. 객체 외의 다른 자료형의 타입도 지정 가능하다. 1-1. 기본적인 타입 지정 ( ailas ) type Dmg = number type Name = string type Player = { name: Name, dmg : Dmg, } const bob : Player = { name: 'bob', dmg: 10 } 1-2. 타입이 특정 값을 가지도록 제한 type Team = 'red' | 'green' | 'yellow' type Health =..

Frontend/TS 2022.07.19

TS - Class

1. constructor - 프로퍼티 초기화 자바스크립트에서 처럼 this.X = X 형태의 문법은 더이상 사용하지 않는다. 타입스크립트에서는 constructor에서 한 번에 선언할 수 있다. 접근 제한자도 붙여줄 수 있다. class Player { constructor( private firstName: string, protected lastName: string, public nickName: string ){} } 1-1. 프로퍼티 메뉴얼 초기화 클래스의 프로퍼티가 constructor에 의해 바로 초기화 되지 않도록 할 수 있다. type Words = { [key: string]: string; }; class Dict { private words: Words; constructor() ..

Frontend/TS 2022.07.18

TS - 제네릭(generic)

제네릭이란? 선언 시점이 아닌 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다. 는 제네릭을 선언할 때 관용적으로 사용되는 식별자이며, 타입 파라미터(Type parameter)라 한다. ( 'T' 외의 값을 사용해도 된다고 하는데 대부분 'T' 를 쓰는것 같다.) 함수에서의 제네릭 type SuperPrint = { (arr: T[]): void; }; const superPrint: SuperPrint = (arr) => { arr.forEach((item) => console.log(item)); }; superPrint([1, 2, 3]); // superPrint (arr: numbe..

Frontend/TS 2022.07.15

TS - Function Overloading

함수 오버로딩이란? 타입스크립트 에서는 여러 개의 Call signature를 갖는 함수를 하나의 이름으로 정의하는 것, 즉 여러 타입의 매개변수를 받지만 그에 의한 함수의 동작은 같아 하나의 함수 명으로 표현하고 싶을 때 사용할 수 있는 함수 정의 기술입니다. * 객체 지향 프로그래밍의 특징 중 다형성( polymorphism ) 의 구현입니다. call signature의 파라미터 수가 같을 때 type Add = { (a: number, b: number): number; (a: number, b: string): number; }; const add: Add = (a, b) => { if (typeof b === "string") return a; return a + b; }; console.lo..

Frontend/TS 2022.07.15

TS - Call Signatures

Call Signatures란? 함수 매개변수와 return값의 Type을 미리 정하는 문법입니다. 함수선언 안에서 타입을 명시한 코드 function hello(name: string): void { console.log(`hello ${name}`); } Call Signatures를 사용한 코드 type Hello = (name: string) => void; const hello: Hello = (name) => { console.log(`hello ${name}`) } hello('bob') //"hello bob" Call Signatures를 사용하면 함수의 구현과 타입선언을 분리하여 구현할 수 있습니다. 타입 체커는 hello 함수의 타입을 이미 알기 때문에 에러없이 실행됩니다.

Frontend/TS 2022.07.14

TS - 새로운 타입과 기본 문법

1. 타입 추론과 타입 표기 1-1. 타입 추론 타입스크립트의 타입 체커는 추론을 통해 타입을 정한다. let a = 'hello' let b = false let c = 1 let d = [1,2,3] 위 코드에서 각 변수의 타입은 타입 체커에 의해 추론되어 정해진다. a - string b - boolean c - number d - number[ ] 1-2. 타입 표기(Type Annotation) 개발자가 직접 타입을 명시할 수 있다. : type 을 사용한다. let a : string = 'hello' let b : boolean = false let c : number = 1 let d : number[] = [1,2,3] 가능하다면 타입 체커가 추론을 통해 타입을 지정하도록 하는게 좋다. ..

Frontend/TS 2022.07.14

TS - TypeScript란 ?

1. TypeScript란? 동적 타입 언어인 JavaScript의 단점을 보완하기 위해 JavaScript 기반으로 만들어진 정적 타입 언어이다! (자바스크립트의 슈퍼셋) 1-1. JavaScript의 단점 자바스크립트는 런타임에서 타입이 결정되는 동적 타입 언어이다. 개발자는 값의 종류, 즉 타입을 선언하지 않아도 되고 컴파일 과정이 없기 때문에 이런 부분이 장점이 되기도 한다. 하지만 이런 특징 때문에 개발자가 예상치 못한 에러가 발생하면 런타임에서야 오류를 발견할 수 있기 때문에 최악의 경우, 이미 프로그램이 멈춘 뒤일 것이다. 프로그램 사용자는 에러를 마주치고 이미 떠났다. 타입 안정성이 보장되지 않기 때문에 (프로그램에서 타입이 잘못 전달되어 발생되는 에러를 잡기 어려움) 프로젝트가 커질수록 ..

Frontend/TS 2022.07.14