타입스크립트 11

타입스크립트(TypeScript) - 인터페이스(interface) & 클래스(class) 공부내용 정리

타입스크립트의 클래스 기능들은 대부분은 C#에서 빌려왔다. 프로퍼티 초기자, 다형성, 인터페이스, 한정자 등등을 지원한다. 반명세 자바스크립트에는 없지만 타입스크립트의 고유 기능으로 접근자, 인터페이스, 제네릭이 있고, 컴파일 떄만 존재하고 자바스크립트로 컴파일 할때는 아무 코드도 생성하지 않는다. 01. 접근 한정자(public, protected, private) 타입스크립트는 클래스의 프로퍼티와 메서드에 세 가지 접근 한정자를 제공한다. - public: 어디에서나 접근할 수 있다. - protected: 해당 클래스와 서브클래스의 인스턴스에만 접근할 수 있다. - private: 해당 클래스의 인스턴스에만 접근할 수 있다. type Category = 'Outer' | 'Top' | 'Bottom..

타입스크립트(TypeScript) - 함수 배운내용 정리2

1. 함수 function plus(x: number, y: number): number { return x + y; }; 타입스크립트는 타입을 명시한다. 위의 함수를 보면 숫자 두개를 인수로 받아서 더한 후 숫자를 반환한다. 이때 반환하는 타입은 자동으로 추론을 하고, 매개변수는 특별한 상황을 제외하고는 추론하지 않는다. 그래서 다음과 같이 작성해도 된다. function plus(x: number, y: number) { return x + y; }; 위의 코드와 다른점은 plus라는 함수의 결과 값으로 반환하는 타입을 지정해 주지 않은 차이이다. plus라는 함수를 호출해서 매개변수를 입력해보면 다음과 같은 결과가 나온다. plus(5, 7); // 12 plus(2); // error 2개의 인수..

타입스크립트(TypeScript) 배운 내용 정리

1. 컴파일러 컴파일러란 고급언어로 쓰여진 프로그램을 어떤 특정한 컴퓨터에서 직접 실행가능한 형태의 프로그램으로 번역해주는 컴퓨터 프로그램을 말한다. 컴퓨터는 0과 1로 구성괸 기계어를 사용한다. 이 기계어는 저급언어이다. 프로그래머들이 개발을 할 때는 0과 1로 되어있는 기계어로 프로그래밍을 하기에는 ... (🤦🏻상상만 해도.. 으악) 어렵다. 그래서 사람들이 프로그램을 짜기 위해서 사람을 중심으로 한 고급언어가 나왔다. 고급언어중에 하나가 JavaScript이다. 프로그래머들이 작성한 텍스트를 컴파일러가 파싱해서 AST(Abstract Syntax tree)라는 추상 문법 트리를 자료구조로 변환한다. 이 때, 공백이나 주석의 결과들을 다 무시한다. 그리고 컴파일러는 AST를 하위수준의 바이트코드(by..

타입스크립트 - 타입 가드(Type Guard)

지난시간에 기록했던 것을 연장해서 기록해보자! function add10(val: string | number) { return val + 10; } 변수를 넣으면 10을 더해주는 함수가 있다고 가정해보자. 뭔가 이상한 점이 있다. 바로 변수가 string인 경우이다. 변수에 숫자가 아닌 문자열이 오면 에러가 발생한다. 그렇기 떄문이 타입가드가 쓰인다. 타입가드를 사용하지 않으면 에러가 발생하는데, 타입가드를 사용함으로써 이러한 에러를 줄일 수 있다. 01. typeof typeof를 사용해서 원시타입을 검사한다. typeof를 사용하면 타입을 문자열로 반환해서, 이걸 가지고 검사를 한다. function add50(x: string | number){ console.log(x + 50); } add50..

타입스크립트 - 덕 타이핑(duck typing)

자바스크립트는 동적언어이다. 런타임에 타입이 결정되는 언어이다. 소스가 빌드괼 때 자료형을 결정하는 것이 아니라 실행시 결정이 된다. 그리고 자바스크립트는 따로 타입 지정이 없기 때문에 덕 타이핑 기반이다. 덕 타이핑은 객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는 방식이다. 만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그새를 오리라고 부를 것이다. 타입스크립트는 인터프리터로 실행되는 것도 아니고, 컴파일로 되는것도 아니다. 자바스크립트로 컴파일되며, 실행역시 타입스크립트가 아닌 자바스크립트로 이루어진다. 그렇기 때문에 자바스크립트의 덕 타이핑처럼 타입스크립트도 매개 변수 값이 요구사항을 만족한다면 타입이 무엇인지 신경쓰지 ..

타입스크립트 (TypeScript) - 제네릭(Generics)

01. 제네릭(Generic) 제네릭이란 데이터의 타입을 일반화 하는것을 말한다. 자료형을 딱 정하지 않고 여러타입을 사용할 수 있게해준다. 의미가 바로 와닿지 않지만, 내용을 기록해보자면 이렇다. 타입스크립트는 정적언어(컴파일 시 변수의 타입이 결정)이다. 그렇기 때문에 함수나 클래스를 정의하는 시점에 변수, 반환값, 속성에 대해서 타입을 선언해야한다. 만약 지금 당장에 타입을 바로 선언하기가 힘든 경우가 있다. 이 때 제네릭을 사용하면 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 해준다. 한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다. 제네릭을 쓸 때, T를 관용적으로 많이 사용한다. 코드를 기록해보자. // 변수로 받은 값을 ..

타입스크립트 (TypeScript) - Type Alias(타입 앨리어스), Enum(이넘), Union Type(유니온 타입)

01. Type Alias (타입 앨리어스) 타입 앨리어스, 타입 별칭이라고 하는데 인터페이스와 비슷하다. 인터페이스도 속성을 정해주고 타입으로 사용하듯, 타입 앨리어스도 인터페이스와 동일하게 타입으로 사용할 수 있다. 타입 별칭의 경우에는 새로운 타입값을 생성하는 것이 아니라, 정의한 타입에 대해서 참고할 수 있는 이름을 붙이는 것과 같다. type Num: number; const point: Num = 990; type Message: string; const talk: Message = "Hello Stranger!"; // 객체 타입 선언 type Game { genre: string; company: string; rating?: number; }; const diablo: Game = { g..

타입스크립트 (TypeScript) - 인터페이스

01. 타입스크립트 인터페이스 타입스크립트를 쓰면서 인터페이스를 처음봤을 때, 음... 뭘까? 생각이 많이 들었다. 쓰다보면 드는 생각은 인터페이스는 여러개의 타입을 가지고 있는 것을 정의하는 것 같다. 문자열이면 string, 숫자면 number 이렇게 주듯이 내가 필요한 타입을 만드는 것이다. 인터페이스는 프로퍼티와 메소드를 가질 수 있다. 이점은 Class와 유사한데, 직접 인스턴스를 생성할 수는 없고 추상 메서드 이다. 02. 인터페이스 사용 // 인터페이스 사용 interface SquidGame { order: number; name: string; isFinished: boolean; }; let first: SquidGame; first = { order: 1, name: "Red Ligh..

타입스크립트 (TypeScript) - 타입, 타입선언

01. 타입스크립트란? 타입스크립트는 MS에서 개발한 오픈소스 프로그래밍 언어이다. 자바스크립트의 단점을 보완하기 위해 만들어졌다. 자바스크립트는 동적타입 언어(dynamic type language: 컴파일 시 자료형을 정하는것이 아니라, 런타임시 결정된다. 타입없이 변수만 선언해서 값을 지정할 수 있다)이기 때문에 런타임 속도는 빠르지만, 타입 안정성이 보장되지 않는다.(격공...) 반대로 타입스크립트는 정적 타입 언어(static type language: 컴파일 시 변수의 타입이 결정되는 언어, 변수에 들어갈 값을 형태에 따라 직접 타입을 명시)이기 때문에 컴파일 시 시간이 걸려도 안정성을 보장한다. 타입스크립트는 자바스크립트의 상위집합이고, 자바스크립트에서 타입을 적용한 언어이다. * 컴파일 :..

TIL : 타입스크립트(TypeScript)_feat. 노마드코더, 인프런

타 입 스 크 립 트 등 장! 0. INTRO 타입스크립트를 사용하게 된 계기는 바로 4주 프로젝트를 진행하기 위해서다. 이번에 백엔드에서 타입스크립트를 새로운 스택으로 추가해서 사용하기로 했다. 팀원과는 각자 개인적으로 공부할 시간이 주어졌다. 그래서 나는 노마드코더를 프로젝트 시작전에 들었고, 인프런강좌를 프로젝트 끝나고 수강했다. 1. 첫 만남 타입스크립트를 처음 쓸 때는 조금 불편 했다. 하나하나 타입을 지정해야 했기 때문이다. let isGood: boolean = true; let money: number = 10,000; let city: string = 'New York'; let numList1: number[] = [1, 2, 3]; let numList2: Array = [4, 5, ..

리코딩 : TIL 2021.02.14