De-v-log

HTML 삽입 미리보기할 수 없는 소스 유틸리티 타입 유틸리티 타입이란 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 타입을 말한다. 이번 포스팅에서 살펴볼 유틸리티 타입은 아래와 같다. 1. 맵드 타입 기반의 유틸리티 타입 (1) Partial 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 바뀌는 타입이다. 따라서 기존 객체 타입에 정의된 프로퍼티들 중 일부분만 사용할 수 있도록 도와준다. 아래와 같이 블로그 플랫폼의 게시글 객체 Post가 선언되어 있다고 하자. interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string; } 만약 게시..

HTML 삽입 미리보기할 수 없는 소스 타입 조작하기 타입 조작이란, 여러 타입들을 상황에 따라 다른 타입으로 변환하는 기능을 말한다. 타입 조작 예시 제네릭 인덱스드 엑세스 타입 keyof 연산자 mapped 타입 템플릿 리터럴 타입 조건부 타입 1. 인덱스드 엑세스 타입 객체, 배열, 튜플 등 복잡하고 큰 타입에서 특정 프로퍼티 혹은 요소의 타입만 추출하는 타입을 말한다. (1) 객체 프로퍼티 타입 추출하기 아래는 Post 객체에서 author 프로퍼티 타입을 추출하는 과정이다. interface Post { title: string; content: string; author: { id: number; name: string; }; } // 인덱스드 엑세스 타입 function printAuthor..

HTML 삽입 미리보기할 수 없는 소스 제네릭 제네릭이란 함수, 인터페이스, 타입별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어주는 기능이다. 1. 제네릭 함수 두루두루 모든 타입의 값을 다 적용할 수 있는 범용적인 함수라고 이해하면 된다. function func(value: T) { return value; } let num2 = func(10); let bool2 = func(true); let str2 = func("String"); 타입을 지정하기 위해 타입변수 T를 로 정의하고 이에 따른 반환값과 매개변수의 타입을 가변적으로 지정해준다. 참고로 제네릭 함수를 호출할 때 아래와 같이 타입변수에 할당할 타입을 직접 명시하는 것도 가능하다. let arr = func([1, 2, 3]); ..

HTML 삽입 미리보기할 수 없는 소스 1. 자바스크립트의 클래스 소개 타입스크립트의 클래스를 살펴보기에 앞서, 자바스크립트의 클래스부터 살펴보자. 클래스는 동일한 모양의 객체들을 간단하게 생성하도록 도와주는 문법이다. 자바나 파이썬의 클래스와 동일한 개념으로 쓰인다. 참고로, 클래스의 이름은 기본적으로 파스칼 표기법(앞글자 대문자)을 따르는 것이 관습이다. 기본적인 클래스 선언 방법은 아래와 같다. class Student { // 필드 name; grade; age; // 생성자 constructor(name, grade, age) { this.name = name; this.grade = grade; this.age = age; } // 메서드 정의 study() { console.log("stud..

HTML 삽입 미리보기할 수 없는 소스 인터페이스 1. 인터페이스 기본 타입에 이름을 지어주는 또 다른 문법을 말한다. 상호간에 약속된 규칙을 만들어주는 문법으로 객체의 구조를 정의하는 데 특화된 문법이다. 객체를 다루는 상속, 합침 등의 특수한 기능을 제공하기 때문에 편하고 효율적으로 객체를 정의하게 해준다. 기본적인 선언 방식은 다음과 같다. interface IPerson { name:string; age:number; } 선택적 프로퍼티나 읽기 전용 프로퍼티도 만들 수 있다. interface IPerson { readonly name: string; // 읽기 전용 프로퍼티 age?: number; // 선택적 프로퍼티 } const person: IPerson = { name: "홍길동", }..

HTML 삽입 미리보기할 수 없는 소스 함수와 타입 1. 함수 타입 타입스크립트에서 함수를 이야기 하려면, 어떤 타입의 매개변수를 받고, 어떤 타입의 값을 반환하는 지를 이야기 해야 한다. 따라서 함수의 타입은 매개변수와 반환값의 타입으로 결정된다. 이때 반환값은 리턴문을 기준으로 자동추론 해주기도 한다. function func(a: number, b: number): number { return a + b; } 화살표 함수 타입 정의하기 const add = (a: number, b: number): number => a + b; 매개변수 기본값 설정하기 매개변수의 타입을 정의하지 않아도 함수 매개변수에 기본값이 설정되어 있다면 타입을 잘 추론해준다. 이럴 때는 타입 정의를 생략해도 된다. 이때 몇 ..

HTML 삽입 미리보기할 수 없는 소스 1. 타입과 집합 타입스크립트의 타입은 동일한 속성과 특징을 갖는 여러 값들을 모아둔 집합을 의미한다. 타입 사이의 관계 부모(수퍼) - 자식(서브) 관계 어떤 타입 A가 다른 타입 B의 부분집합이라면, 이때 A를 자식타입, B를 부모타입이라고 한다. EX. number literal type은 number type의 부분집합이므로 number literal type은 자식타입, number type은 부모타입 이 관계를 계층처럼 표시하면 다음과 같다. 다음은 타입스크립트에서 제공하는 전체적인 타입 계층도이다. 타입 호환성 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것을 말한다. 예시 number 타입을 number literal 타입으로 취급 불가능 n..

HTML 삽입 미리보기할 수 없는 소스 타입스크립트의 기본 타입 기본 타입이란 타입스크립트가 자체적으로 제공하는 타입을 말한다. 지금부터 자바스크립트의 타입에 대해 자세하게 살펴보자. 1. 타입 정의하는 방법 type annotation(타입 주석) 변수명 오른쪽에 :을 붙여서 변수의 타입을 명시하는 방법이다. // ex : number 타입의 변수 num1 let num1: number = 123; 2. 타입 종류 💨 원시타입(number, string, boolean, null, undefined)과 리터럴 타입 원시 타입(Primitive Type)은 동시에 한개의 값만 저장할 수 있는 타입을 말한다.일반적인 자바스크립트 원시 타입과 동일하다. 타입스크립트는 여기서 변수명 뒤에 타입만 명시(타입 주..

HTML 삽입 미리보기할 수 없는 소스 타입스크립트 컴파일러 옵션 설정하기 얼마나 엄격하게 타입 오류를 검사할지? 자바스크립트 코드의 버전은 어떻게 할지? 원하는대로 타입스크립트의 컴파일러 설정을 바꿔보자! ※ 컴파일러 옵션은 노드js 패키지 단위로 설정 가능하다. 즉, 프로젝트마다 설정할 수 있다는 것! 타입스크립트 파일 컴파일 방법 tsc 경로/파일명.ts 해당 파일을 컴파일 하여 자바스크립트 파일을 생성 이후 node 명령어로 생성된 자바스크립트 파일 한 번 더 실행해야 함. ts-node 경로/파일명.ts 자바스크립트 파일을 생성하지 않고 타입스크립트 파일을 바로 컴파일 하여 실행 바로 사용하면 에러가 발생할 수 있음 => 아래 컴파일러 옵션 ts-node 참고하여 컴파일러 설정값 추가 컴파일러 ..

HTML 삽입 미리보기할 수 없는 소스 1. 타입스크립트 소개 타입스크립트는 자바스크립트의 확장판 자바스크립트의 기본적인 모든 문법을 포함함 자바스크립트를 더 안전하게 사용할 수있도록 타입 관련 기능들을 추가한 언어 2. 자바스크립트의 단점과 타입스크립트 (1) 자바스크립트의 한계 자바스크립트의 한계를 알아보기 이전에 한 가지, 타입시스템에 대해서 알고 가자. 타입시스템 언어의 타입 관련된 문법 체계 값들을 어떤 기준으로 묶어 타입을 규정할 것인지, 코드 타입을 언제 검사할 것인지, 어떻게 타입을 검사할 것인지 등의 규칙을 모아둔 체계 모든 프로그래밍 언어는 타입 시스템을 가지고 있음 정적 타입시스템 코드 실행 이전 모든 변수의 타입을 고정적으로 결정 엄격하고 고정적인 시스템 모든 변수에 일일이 타입을 ..