Typescript

타입스크립트 tsconfig 간단히 살펴보기

개요 CRA, next.js 등을 이용하면 보통 타입스크립트를 직접 세팅해볼 일이 없다. 그러나, 타입스크립트를 직접 세팅할 줄 알게 되면 많은 부분 커스터마이징도 가능할 뿐더러 타입스크립트 자체에 대한 이해도 증가한다. tsconfig.json 프로젝트 루트에 tsconfig.json 을 생성하는 것은 프로젝트 내부에서 타입스크립트를 사용할 것이라 선언하는 것이다. VSCODE 는 이를 기준으로 자동완성 등을 제공한다. tsconfig.json 내부에 존재하는 옵션들 include 어떤 경로의 파일들을 ts 에서 js 로 컴파일할지 지정하는데 사용된다. 단순히 파일 이름 자체를 지정하는 것이 아니라, 파일 이름 패턴을 주로 이용한다. 파일 이름 지정 패턴에는 glob 패턴이 주로 이용된다. { "inc..

타입스크립트 type 과 interface 특징 및 비교

개요 자바스크립트에서 객체의 형태를 지정하는데는 type 과 interface 가 사용될 수 있다. type 과 interface 는 매우 가볍고 자바스크립트로 컴파일되면 사라진다. type 알아보기 자바스크립트에서 기본으로 제공하는 primitive type 이외에 타입스크립트에서 사용할 사용자 정의 타입들을 직접 정의할 수 있다. primitive type 에 대한 alias 를 적용하는 것도 가능하다. 상수에 대한 타입을 정의하는 것도 가능하다. 객체 타입 정의하기 type User = { nickname: string; realname: string; age: number; }; const jake: User = { nickname: "jake", realname: "jinkyu", age: 20..

타입스크립트 클래스 간단 정리

개요 타입스크립트에서도 Class 문법을 사용할 수 있다. 접근 제어자 알아보기 접근 제어자란, 클래스의 설계를 위해 클래스의 필드나 메서드에 대한 접근을 제어하기 위해 사용되는 키워드이다. public public 으로 선언된 메서드나 필드는 어디에서든 접근이 가능하다. protected protected 로 선언된 메서드나 필드는 해당 클래스의 바디 혹은 해당 클래스를 상속받은 클래스의 바디에서만 접근이 가능하다. private private 으로 선언된 메서드나 필드는 해당 클래스의 바디에서만 접근이 가능하다. Private 과 Public field 선언하기 생성자를 이용해 선언할 수도 있고, 생성자에서는 말 그대로 초기화만 할 수도 있다. 생성자를 이용해서 선언하기 constructor 내부에 ..

타입스크립트의 다형성(Polymorphism)

다형성 (Polymorphism) 이란? poly: 여러 개(multiple) 라는 뜻을 가지고 있다. morp-: 구조(structure) 라는 뜻을 가지고 있다. 두개를 합치면 다양한 구조를 가지게 된다는 뜻이다. 다형성 적용 전 interface SuperPrint { (arr: number[]): void; (arr: boolean[]): void; (arr: string[]): void; (arr: number[] | boolean[]): void; } const superPrint: SuperPrint = (arr) => { arr.forEach((elem) => console.log(elem)); }; superPrint([1, 2, 3]); superPrint([true, false, fa..

타입스크립트 함수 호출 시그니처 설정하기

함수의 호출 방식이 하나일 때 함수의 호출 방식이 하나라는 것은 파라미터 타입, 리턴 타입이 1개의 종류로 고정되어 있다는 뜻이다. 함수 정의 시에 한번 입력하기 const add = (a: number, b: number): number => a + b; Type 을 이용해 정의하기 type AddType = (a: number, b: number) => number; const addType: AddType = (a, b) => a + b; Interface 를 이용해 정의하기 interface AddInterface { (a: number, b: number): number; } const addInterface: AddInterface = (a, b) => a + b; 오버로딩: 함수의 호출 방식..

타입스크립트 never 타입이란?

never 타입이란? 함수가 아무것도 리턴하지 않는다는 것을 보장한다. 예제 코드 function fail(msg: string): never { throw new Error(msg); }

타입스크립트 unknown 타입이란?

unknown 타입 any 와 비슷하다. 그러나 unknown 타입은 아직 어떤 타입인지 확정되지 않았기에 이를 이용한 어떠한 행위도 금지되어 있다. 에러 예제 let a: unknown; console.log(a + 100); // error Object is of type 'unknown'. 타입이 무엇인지 알 수 없으므로 아직 더할 수 없다. 에러 해결 let a: unknown; if (typeof a === "number") { console.log(a + 100); } 타입이 number 로 확정된 이후이기 때문에 더할 수 있다.

타입스크립트 튜플(Tuple) 이란?

Tuple 이란? 배열로서 각 인덱스마다 다른 타입의 값을 가지고 있는 배열을 뜻한다. 주로 파이썬과 자바스크립트에서 많이 사용하는 타입이다. 예제 const person: [string, number, boolean] = ["jake", 21, false]; // name, age, isMarried 배열의 길이가 정해져있거나, 배열의 순서가 정해져있을 때 유용하다. 해당하는 인덱스에 다른 타입을 넣으면 당연히 에러가 발생한다. API 의 스펙에서 반환 값이 오브젝트가 아닐 때 유용하다. readonly const person: readonly [string, number, boolean] = ["jake", 21, false]; 읽기 전용으로 만드는 것도 가능하다.

타입스크립트의 읽기 전용 프로퍼티 (readonly) 기능

Readonly 프로퍼티 만들기 interface Person { name: string; readonly birthYear: number; } const person: Person = { name: "Jake", birthYear: 2009, }; birthYear 는 수정될 일이 없는 값이기에 readonly 로 설정한다. readonly 프로퍼티를 수정하면 에러가 날 것이다. 객체나 배열에도 적용이 가능하다. 배열에 적용하면 push() 와 같은 메서드를 실행할 때 에러가 난다. 바닐라 자바스크립트에서는 Object.freeze() 를 이용하자. 제약이 많을수록 버그는 줄어들게 된다는 것을 명심하고 적극 활용하자.

타입스크립트 함수의 반환 타입 설정하기

일반 함수 function foo(): string { return "foo"; } 화살표 함수 const bar = (): string => { return "bar"; };

타입스크립트의 optional property 와 사소한 주의점

Optional Property 타입스크립트로 객체를 정의했을 때, 선택적으로 프로퍼티를 받을 수 있는 기능이다. 적용 전 interface Person { name: string; age: number; } const person: Person = { name: "Jake", }; 위와 같이 interface 를 작성하면, Person 타입에 대해 age 가 필수적으로 입력되어야 한다. 입력하지 않는다면, age 를 입력하지 않았다고 에러가 발생한다. 적용 후 interface Person { name: string; age?: number; // age?: number 로 변경 } const person: Person = { name: "Jake", }; 위와 같이 작성하면, age 는 더이상 필수적..

타입스크립트의 명시적, 묵시적 타입 시스템과 어떤 것을 사용해야 하는가?

기본 동작 원리 타입스크립트는 타입스크립트 코드를 자바스크립트 코드로 만들어 실행시킨다. 브라우저는 타입스크립트를 이해하지 못하기 때문에 자바스크립트로의 번역 과정이 필요하다. Node.js 는 타입스크립트를 이해하고 번역해줄 수 있다. 타입스크립트의 타입 시스템 타입스크립트는 두가지 방식을 사용한다. 명시적 타입 묵시적 타입 (타입 추론) let explicitType: string = "abc"; // 명시적 타입 let implicitType = "abc"; // 묵시적 타입 묵시적 타입의 경우 implicitType 이라는 변수 내부에 당연히 문자열이 들어올 것이라 예측한다. let implicitType = "abc"; // 묵시적 타입 implicitType = 1234; 위 경우, 자바스크립..