모른다고 말할 수 있는 용기

interface와 type을 무지성으로 사용하다 둘의 차이가 궁금해졌다. 사용 interface와 type의 기본적인 사용법은 다음과 같다. interface IPost { title: string; content: string; author: number; createdAt: string; } type TPost = { title: string; content: string; author: number; createdAt: string; } const postInterface: IPost = { title: "게시글 제목", content: "게시글 본문", author: 1, createdAt: new Date().toISOString(), }; const postType: TPost = { tit..

any any는 어떠한 타입도 할당받을 수 있는 타입이다. 컴파일 과정에서 타입 검사가 되지 않으며 any를 사용하는 타입스크립트는 소위 애니스크립트라고도 불린다. 사용자로부터 받은 데이터 또는 외부 라이브러리 사용 시 응답 값이 동적일 경우 종종 사용한다. 타입스크립트는 데이터의 자료형을 명시해 타입 안정성을 보장받기 위해 사용 하는데 any를 사용한다면 자바스크립트와 다를 게 없으므로 최대한 지양해야 한다. 넘버 타입의 사용 가능한 toFixed 메서드를 문자열 타입에 사용하려고 하니 에러가 출력된다. 이처럼 변수에 올바른 자료형을 명시한다면 코드 작성 단계에서 에러를 발견할 수 있다. any 타입을 할당하게 되면 컴파일러는 language라는 변수가 모든 자료형이 될 수 있다고 추론한다. 이런 경우..

TypeScript 사용 이유 타입스크립트를 사용하면 왜 두 번 다시 자바스크립트로 돌아갈 수 없는지에 대해 포스팅한다. 백이나 프론트나 자바스크립트 관련 채용 공고를 조금만 보아도 자바스크립트를 메인으로 사용하는 회사는 거의 없다. 올해 초 개발 공부 시작 당시 타입스크립트가 우대사항인 기업들이 있었는데 요즘은 우대가 아닌 필수다. 특징 1.정적 타입의 컴파일 언어 인터프리터 언어인 자바스크립트와 다르게 타입스크립트는 컴파일 언어이다. 컴파일이란 타입스크립트 코드를 자바스크립트 코드로 변환되는 과정을 의미한다. 자바스크립트는 런타임 단계 즉 노드나 브라우저를 통해 코드를 실행을 해봐야 에러가 있는지 없는지 알 수 있다. 반면 타입스크립트는 컴파일 단계 즉 코드 작성 단계에서 에러를 감지할 수 있다. 2..

TypeScript const assertion 상수를 쉽게 관리하고 가독성을 높이기 위해 제공하는 타입스크립트 기능이다. 타입 추론의 범위를 좁히거나 서로 연관된 상수들을 하나의 네임스페이스로 관리해야 할 경우 유용하게 사용 가능하다. 그동안 무지성으로 as 키워드를 붙여 사용하곤 했었는데 이번 기회에 확실히 이해하게 되었다! 리터럴 타입 리터럴 타입이란 변하지 않는 데이터를 의미한다. 타입스크립트는 원시 타입(string, number 등) 외에 특정 값을 타입으로 지정할 수 있다. 변수 let을 선언 후 문자열을 할당하면 타입스크립트는 string이라는 문자열로 타입을 추론한다. 리터럴을 이용해 타입 지정 후 지정한 타입의 다른 값을 입력할 경우 컴파일 에러가 발생한다. 원인은 let은 재할당이 가..

TypeScript 유틸리티 타입 전역으로 사용 가능한 공통 타입 변환을 하기 위한 편의 기능의 집합이다. 중복 코드와 반복적인 행동을 피할 수 있게 해준다. partial - T의 모든 속성을 선택적 타입으로 구성한다. - User 인터페이스 속성 중 일부만 사용할 수 있다. Readonly - 인터페이스 생성 시 속성 앞 "readonly" 키워드를 한 번에 붙여주는 기능이다. Pick - T의 속성을 선택해 K의 새로운 타입으로 구성한다. Record - T의 프로퍼티 집합 K로 타입을 구성한다. 원하는 타입의 속성을 다른 타입에 매핑 시킬 수 있다. Omit - T의 모든 속성을 선택 후 K의 속성을 제거한 나머지 타입을 구성한다. ReturnType - T 함수의 반환 타입으로 구성된 타입을 만..

TypeScript 타입 가드 컴파일러가 타입을 예측할 수 있도록 타입을 좁혀나가는 방법 is 키워드를 사용한다. is 함수명은 컨벤션이다. typeof - typeof 메서드를 사용해 분기 처리를 하면 타입스크립트는 해당 데이터의 타입을 좁혀진 범위로 이해한다. - 조건문 안에서 매개변수 str 타입이 문자열(string)이므로 문자열 메서드를 사용할 수 있다. - 조건문 안에서 매개변수 arr 타입이 배열(object)이므로 배열 메서드를 사용할 수 있다. 리터럴 타입 가드 - === / !== 연산자를 사용하여 타입을 구분할 수 있다. - 유니온 타입을 사용하여 타입을 구분할 수 있다. type Checker = "실버" | "골드" | "플래티넘"; const checker = (choice: C..

TypeScript 제네릭 단일 타입이 아닌 다양한 타입에서 작동하는 재사용이 가능한 컴포넌트를 만들 수 있는 방법이다. 제네릭 타입을 함수의 파라미터로 사용하는 걸 의미 함수 호출 시 타입을 정의할 수 있다. 선언은 여유롭게 짝만 맞춰놓고 실제 사용 시 확실하게 타입을 정의한다. 함수의 파라미터와 리턴값의 타입 정보를 알 수 있다. 는 Convention이다. 선언 제네릭 사용은 함수 타입 인수를 포함한 모든 인수를 전달하는 방법과 타입 인수 추론을 사용하는 방법 2가지가 있다. // 인수에 타입을 붙인다. function print(word: T): T { return word; } const result = print("제네릭"); 제네릭 배열 - 배열의 원소 중 어떠한 타입도 올 수 있다. fun..

TypeScript 인터페이스 재사용이 가능한 구조(같은 모양)의 타입들의 이름을 작명할 수 있다. 속성과 값의 타입을 지정할 수 있다. 값을 지정할 수 있지만 보통 넒은 범위의 타입을 지정한다. 클래스와 마찬가지로 인터페이스도 상속이 가능하다. 동일한 이름의 인터페이스를 여러 개 생성할 수 있다. 선언 interface Post { postId: number; title: string; content: string; writer: string; } const write: Post = { postId: 1, title: "1번 게시물 타이틀", CONTENT: "2번 게시물 내용", writer: "관리자", }; 읽기 전용(readonly) - 처음 객체 생성 시에 할당하여 그 이후로는 속성값을 바꿀 ..

TypeScript 함수 자바스크립트와 마찬가지로 기명과 익명 함수를 만들 수 있다. 타입스크립트의 함수는 모든 매개변수가 필요하다고 가정한다. 함수 호출 시 컴파일러는 각 매개변수에 대해 사용자가 값을 제공했는지 검사한다. 컴파일러는 매개변수들이 함수로 전달될 유일한 매개변수라고 가정한다. 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야한다. 함수 타입 - 매개변수의 타입과 반환 타입이 있다. function testing(x: number, y: number): number { return x + y; } const result = testing(94, 1103); function testing(): void { return console.log("here") } testing()..

TypeScript 자바스크립트 변수 / 매개변수 / 리턴 값에 타입을 부여한 확장된 언어이다. - 타입스크립트 >= 자바스크립트 타스는 자스의 Superset이다. - 에러의 사전 방지와 IDE의 자동 완성 기능을 적극 활용하여 생산성이 높아진다. - 자바스크립트와는 다르게 브라우저에서 실행하기 위해 컴파일 과정을 거쳐야 한다. 기본 타입 string - 문자일 경우 사용한다. const city: string = "Seoul"; number - 수일 경우 사용한다. const age: number = 29; boolean - true / false const flag: boolean = false; null - null일 경우 사용한다. const n: null = null; undefined - u..