나빈스 코딩

유틸리티 타입이란?TypeScript에는 자주 쓰이는 타입 변환을 빠르게 할 수 있도록 미리 만들어진 타입 도우미들이 있다.이걸 유틸리티 타입(Utility Types)이라고 부르고, 타입을 재활용·수정할 때 코드량을 줄여준다.// tsconfig.ts{ "compilerOptions": { "lib": ["ESNext"] }} 이렇게 설정하면 최신 빌트인 유틸리티 타입을 쓸 수 있다.주요 유틸리티 타입1) Pick객체 타입에서 원하는 프로퍼티만 뽑아 새 타입 만들기.type Porsche = Pick;2) Omit객체 타입에서 원하지 않는 프로퍼티만 빼고 새 타입 만들기.type Student = Omit; 2) Partial객체 타입의 모든 프로퍼티를 선택적(optional)으로 변경.RES..

구조적 타이핑은 "생김새"로 타입 호환을 할 수 있는 타입스크립트의 능력이다.타입 호환이란 서로 다른 두 타입이 있을 때 특정 타입이 다른 타입에 포함되는지를 의미한다.이 능력은 일반 타입들 + 함수에 쓸 수 있다. // case 1:let a: string = 'hi';let b: number = 3;b = a; // error// case 2:interface A { name: string;}class B { name: string; age: number;}let i: A;i = new B(); // OK. 만약 B에 없는 프로퍼티가 A에 있으면 대입할 때 할당 값이 없으므로 에러.

타입 추론타입스크립트는 타입을 선언하지 않아도 변수의 타입을 추론하는 능력을 가지고 있다.그래서 타입스크립트가 예측할 것 같은 불필요한 타입선언들은 지워줘도 된다.타입 단언타입 단언은 "타입스크립트. 너보다 내가 더 잘 아니까 신경 안써도돼."라고 하는 것과 같다.var nabeen = {} as Person;// 그냥 {} 선언하면 일반 객체로 추론함.// as Person을 추가하면 Person 객체로 추론함. 타입 에러 방지 가능. 가급적이면 타입 단언보다 타입 추론에 의존하는게 좋다.타입 가드타입 가드는 타입을 걸러냄으로써 타입스크립트가 추론하게끔 한다.if문과 같이 쓴다.종류로는 typeof (그 타입인지), instanceof (그 클래스의 인스턴스인지), in (그 객체 안의 key인지), ..

제네릭이란 받아오는 내용물의 타입에 따라서 자유자재로 쓸 수 있는 기능을 말한다. (일반화 기능)알아서 타입 T를 지정하기 때문에, 중복되는 코드를 줄일 수 있다. 제네릭 함수의 예시는 다음과 같다.function getFirst(arr: T[]):T { return arr[0];}const numbers: number[] = [5,4,3,2,1];const firstNumber = getFirst(numbers); extends와 keyof 를 이용해서 타입을 제약해도 된다.

타입스크립트에서는 "배열"을 for-of문을 통해 간단히 반복할 수 있다.const numbers:number[] = [1,3,2,6]for(const num of numbers) { console.log(num);}

enum은 카테고리처럼 공통분모가 있는 여러 상수들을 한 곳에 모아놓고 쓰고 싶을 때 쓴다.const enum Drink { Coffee = 1.03; Smoothie = 2.06; Ade = 1.1;}const newDrink: Drink = Drink.Coffee;console.log(newDrink); // 1.03for (let i=0; i위 코드는 이넘 값들에 가격을 넣을 것이다.만약 =을 쓰지 않을 경우, 0, 1, 2, 3 이 순서대로 대입된다. 참고로, 이넘 선언할 때 const를 쓰면 트랜스파일 후 코드양이 확연히 줄어든다.

둘 다 객체의 타입을 지정할 수 있다.개발자의 선호에 따라 원하는 걸 사용한다. 다만, 타입에서는 number | string 과 같이 유연하게 타입을 다룰 수 있고, 후술할 제네릭과 유틸리티 타입을 쓸 수도 있다.또한, 타입은 프로퍼티들의 타입을 미리보기 할 수 있다. 인터페이스는 전에 배운 extends 를 사용할 수 있어서 상속할 수 있고, 선언 병합을 사용할 수 있기 때문에 확장에 유연하다.프론트엔드와 백엔드의 프로퍼티 타입 지정을 할 때는 자주 바뀌기 때문에 인터페이스를 쓰면 유용하다.

인터페이스는 객체의 세부 타입을 정해주는 예약어이다.interface Person { name: string; age: number;} 인터페이스는 자바스크립트의 클래스 상속처럼 "상속"을 할 수 있다.주의할 점은 부모가 정한 타입은 바꾸지 못한다는 점이다.interface Hero { name: string; skill: string;}interface IronMan extends Hero { HP: number; // skill: number; (이렇게 쓰면 안돼요!)} 인터페이스는 "인덱스 시그니처"라는 것도 있다.지금까지는 프로퍼티 이름: 타입; 이런 식으로 프로퍼티를 지정했다면,인덱스 시그니처는 인덱스의 타입에 따라 지정해주는 방식이다.인덱스 타입이란, 예를 들어 배열은 a[3], b..

타입스크립트에는 총 10가지 타입이 있다.-- 필수 타입 --1. string2. boolean3. number-- 널 타입 --4. null (개발자가 일부러 비울 때 씀)5. undefined (정의되지 않았을 때 씀)-- 객체 타입 --6. object7. Array8. tuple (길이와 각각의 타입이 정해진 Array)9. function-- 그외 --10. any (모든타입 다가능) 선언 방식은 아래와 같다.const 문자열: string = '안녕';const 불리언: boolean = true;const 숫자: number = 3;const 비어있음: null = null;const 정의되지않음: undefined;const 객체: object = { name: '나빈', age: 22 }..

브라우저는 타입스크립트를 해석할 수 없다.그래서 타입스크립트를 브라우저가 이해하는 자바스크립트로 바꾸는 트랜스파일 과정이 필요하다. 컴파일을 하려면 우선npm init을 입력하여 npm 설정파일(ex. package.json)을 만들고,npm i typescript명령어를 입력해서 타입스크립트를 설치해야한다.그리고node ./node_modules/typescript/bin/tsc "실행하고자하는 파일 이름"을 명령하면 컴파일 된다.여기서 tsc는 타입스크립트 컴파일러이다.