[TS] 객체 타입
TIL
객체 (Object)객체 타입을 정의하는 방법Object로 정의let user: object = { id: 1, name: 'woodstock',};타입스크립트의 object 타입은 단순히 값이 객체임을 표현하는 것 외에는 아무런 정보도 제공하지 않는다.따라서 다음과 같이 프로퍼티에 접근하려고 하면 오류가 발생한다.이와 같은 문제를 해결하려면 객체 리터럴 타입을 이용해야 한다. 객체 리터럴 타입중괄호를 열고 객체가 가지는 프로퍼티를 직접 나열해 만드는 타입이다.💭 리터럴 타입이란?let user: { id: number; name: string;} = { id: 1, namd: 'woodstock',};타입스크립트는 C나 Java와 달리 구조적 타입 시스템(S..
[TS] 배열과 튜플
TIL
배열 (Arrays)배열은 자바스크립트의 배열과 크게 다르지 않다.배열 타입 정의 방법let numArr: number[] = [1,2,3];let strArr: string[] = ["hello", "im", "고견"];Array 형태로도 정의할 수 있다. (제네릭 방식)let boolArr: Array = [true, false, true]; 다양한 타입 요소를 갖는 배열 타입 정의|를 이용하면 여러 타입 중 하나를 만족하는 타입을 정의할 수 있는데, 이러한 문법을 유니온(Union) 타입이라고 한다.let multiArr: (number | string)[] = [1, "hello"]; 다차원 배열 타입 정의다음과 같이 []를 연달아 작성해 다차원 배열 타입도 정의할 수 있다.let doubleAr..
[TS] 원시타입과 리터럴 타입
TIL
기본 타입 (Basic Types)타입스크립트에서의 기본 타입이란, 타입스크립트가 자체적으로 제공하는 내장 타입을 말한다.기본 타입들은 서로 부모 자식 관계를 이루며 계층을 형성한다.기본 타입은 크게 원시 타입과 리터럴 타입으로 나눌 수 있다.원시 타입 (Primitive Type)여러 타입들 중 가장 기본이 되는 타입이다.배열이나 객체 같이 동시에 여러개의 값들을 저장할 수 있는 비원시 타입과 달리, 원시 타입은 숫자면 숫자, 문자열이면 문자열 이렇게 딱 하나의 값만 저장할 수 있다.number 타입자바스크립트에서 숫자를 의미하는 모든 값을 포함하는 타입이다.단순 정수 뿐만 아니라 소수, 음수, Infinity, NaN 등의 특수한 숫자들도 포함한다.let num1: number = 123;let nu..
타입스크립트 컴파일러 옵션 설정
TIL
타입스크립트의 컴파일러 옵션은 tsconfig.json을 통해 설정할 수 있다.자동 생성하기tsc를 이용하면 기본 옵션이 설정된 컴파일러 옵션 파일을 자동 생성할 수 있다.tsc --init 직접 설정하기include 옵션tsc에게 컴파일 할 타입스크립트 파일의 범위와 위치를 알려주는 옵션{ "include": ["src"]} target 옵션컴파일 결과로 생성되는 자바스크립트 코드의 버전을 설정하는 옵션{ "compilerOptions: { "target": "ES5" }} ES5로 변환ESNext로 변환 module 옵션자바스크립트 코드의 모듈 시스템을 설정하는 옵션{ "compilerOptions: { "module": "CommonJS" }} C..
타입스크립트 실행 환경 설정
TIL
환경 설정Node.js 패키지 초기화npm init @types/node 설치npm i @types/node @types/node 라이브러리는 Node.js가 제공하는 기본 기능(내장 함수, 클래스 등)에 대한 타입 정보를 가지고 있다. 만약 이 라이브러리를 설치하지 않으면 Node.js가 제공하는 console 등의 기본 기능(내장 함수 등)들의 타입이 선언되지 않아서 타입스크립트의 컴파일 과정에서 타입 검사가 실패하여 오류가 발생할 수 있다. 타입스크립트 컴파일러 설치npm i -g typescript 설치 여부는 타입스크립트 컴파일러의 버전을 출력하는 명령어를 통해 확인할 수 있다. 타입스크립트 실행타입스크립트 파일 생성 tsc로 컴파일터미널에 명령어를 입력해 타입스크립트 코드를 컴파일 한다.ts..
타입스크립트의 동작 원리
Frontend
프로그래밍 언어의 동작 방식컴파일사람이 작성한 프로그래밍 언어를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정을 컴파일이라고 한다. 자바스크립트 컴파일 과정자바스크립트는 다음과 같은 단계를 거쳐 컴파일 된다.1. AST(추상 문법 트리) 변환컴파일러는 자바스크립트 코드를 AST(Abstract Syntax Tree)로 변환한다.AST는 코드 실행과 관계없는 요소들(공백, 주석, 탭 등)을 제거하고, 코드를 트리 형태의 자료구조로 쪼개서 저장한 형태이다.2. 바이트 코드 변환그 다음, AST를 컴퓨터가 실행할 수 있는 바이트 코드로 변환한다. 타입스크립트의 동작 과정타입스크립트는 자바스크립트에 타입 검사 단계가 추가된 형태이다.타입스크립트 코드를 AST로 변환AST를 분석하여 타입 검사 수행타입 오류가 ..
Early Return Pattern
TIL
Early Return Pattern이란?특정 조건을 만족할 경우 바로 return하여 코드의 구조를 단순하게 만들어 주는 패턴이다.조건에 맞는 코드를 실행하면 이후에 작성된 조건들은 무시된다. function func(num) { if (num > 0) { if (num >= 5) { console.log('num의 값이 5보다 크거나 같음'); } else { console.log('num의 값이 0보다 크고 10보다 작음') } } else if (num === 0) { console.log('num의 값이 0임'); } else { console.log('num의 값이 0보다 작음'); }}func(10); // num의 값이 5보다 크거나 같음..