프로그래밍 언어

Utility Type (유틸리티 타입) 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다. 유틸리티 타입을 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분이 타입 변환할 수 있지만, 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다. Partial 파셜(Partial) 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다. interface Address { email: string; address: string; } type MayHaveEmail = Partial; const me: MayHaveEmail = {}; // 가능 const you: MayHaveEmail = { email: 'test@abc.com' }; ..
Generics (제네릭) 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들때 자주 활용된다. 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다. 제네릭의 한 줄 정의 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. function getText(text) { return text; } text라는 파라미터에 값을 넘겨받아 text를 반환한다. 문자열, 숫자, boolean 등 어떤 값이 들어가더라도 그대로 반환한다. 제네릭 문법이 적용된 형태는 아래와 같다. function getText(text: T): T { return text; } 함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다. getText('hi'..
readonly 클래스 속성에 readonly 키워드를 사용하면 아래와 같이 접근만 가능하다. class Developer { readonly name: string; constructor(theName: string) { this.name = theName; } } let john = new Developer("John"); john.name = "John"; // error! name is readonly. 이처럼 readonly를 사용하면 constructor() 함수에 초기 값 설정 로직을 넣어줘야 하므로 다음과 같이 인자에 readonly 키워드를 추가해서 코드를 줄일 수 있습니다. class Developer { readonly name: string; constructor(readonly n..
Union Type 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다 function logText(text: string | number) { // ... } 위 코드에서 text에는 문자열이나 숫자 타입 모두 올 수 있다. | 연산자를 이용하여 타입을 여러개 연결하는 방식을 유니온 타입 정의 방식이라고 한다. Union Type의 장점 // any를 사용하는 경우 function getAge(age: any) { age.toFixe(); // 에러 발생, age의 타입이 any로 추론되기 때문에 숫자 관련된 API를 작성할 때 코드가 자동 완성되지 않는다. return age; } // 유니온 타입을 사용하는 경우 function ge..
타입스크립트(Typescript)의 인터페이스 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미하며, 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 인터페이스 // 인터페이스를 적용하기 전 const student = { name: '김철수', age: 12 }; function logAge(obj: { age: number }) { console.log(obj.age); // 12 } logAge(student); // 12 위 logAge() 함수에서 받는 인자의 형태는 age를 속성으로 갖는 객체이다. 인자를 받을 때 타입 뿐만 아니라..
타입스크립트(Typescript)에서의 함수 웹 어플리케이션을 구현할 때 자주 사용되는 함수는 타임스크립트로 크게 3가지 타입을 정의할 수 있다. 함수의 파라미터(매개변수) 타입 함수의 반환 타입 함수의 구조타입 함수의 기본적인 타입선언 기본 자바스크립트 함수 코드 function sum(a, b) { return a + b; } 타입스크립트 함수 코드 // 위 자바스크립트 함수에 타입을 부여한다. function sum(a: number, b: number): number{ return a + b; } 기존 자바스크립트 함수의 선언 방식에서 배개변수와 함수의 반환 값에 타입을 추가해주면 된다. ✅ 함수에 return이 없거나, return이 있더라도 반환하는 값이 없으면 함수의 반환타입을 void로 지..
타입스크립트(Typescript)의 기본타입 타입스크립트는 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있다. 타입스크립트의 기본 타입에는 크게 12가지가 있다. String Number Boolean null Object Array Tuple undefined Enum any void never 사용법은 변수나 함수 옆에 :타입이름 를 선언해서 사용하면 되고, : 를 사용하여 코드에 타입을 정의하는 방식을 타입 표기 (Type Annotation)라고 한다. String // 자바스크립트 변수의 타입이 문자열인 경우 const str: string = 'hello'; Number // 자바스크립트 변수의 타입이 숫자인 경우 const num: number = 123; Boolean // 자..
타입스크립트란 타입스크립트 는 자바스크립트의 단점을 보완하기 위해 자바스크립트에 타입을 부여해 만들어진 정적타입언어 (static type langaue) 이다. 자바스크립트의 확정 언어이기 때문에 기존 자바스크립트의 기능을 모두 사용할 수 있고, 브라우저에서 실행하기 위해 컴파일이라는 변환과정을 거쳐야 한다. 타입스크립트를 사용하는 이유 에러의 사전 방지 코드 가이드 및 자동완성 (개발 생산성 향상) 에러의 사전 방지 타입스크립트는 에러를 사전에 방지 할 수 있다. // javascript function sumJs(a,b) { return a + b; } sum(10, 20); // 20 sum('10', '20'); // 1020 // typescript function sumTs(a: number..
구조분해할당 구조분해할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 배열[] or 객체{} 안에 값을 편하게 꺼내 쓸 수 있는 문법이다. 배열 구조 분해 기본 변수 할당 const obj = ['one', 'two', 'three']; const [red, yellow, green] = obj; console.log(red); // 'one' console.log(yellow); // 'two' console.log(green); // 'three' 선언에서 분리한 할당 변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있다. const a, b; [a, b] = [1, 2]; console.log(a); // 1 console.lo..
연산자 연산자란 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만드는 기호를 말하며, 연산의 대상을 피연산자 라고 한다. 1. 산술연산자 산술연산자는 피연산자를 덧셈, 뺄셈, 곱셈, 나눗셈 계산을 해 값을 만든다. 산술 연산이 불가능한 경우에는 NaN을 반환한다. 종류 설명 + 두 값을 더한 결과값을 출력 - 두 값을 뺀 결과값을 출력 × 두 값을 곱한 결과값을 출력 / 두 값을 나눈 후, 몫을 출력 % 두 값을 나눈 후, 나머지를 출력 2. 대입연산자 대입연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 산술연산자와 결합해 대입하기도 한다. ⚠️ 흔히 알고 있는 " = " 를 수학에서의 같다는 뜻으로 생각하면 안 된다. 종류 설명 = 왼쪽..