나빈스 코딩

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

1. 전역 변수 시대옛날 JS는 모든 파일이 전역 스코프를 공유해서변수 이름 충돌·유지보수 문제 심각했다.2. 모듈 시스템 등장 - CommonJS: `module.exports`, `require()` (Node.js 기본) - RequireJS: `define()`, `require()` (브라우저 AMD 방식) → 파일별 독립 스코프로 문제 해결.3. ES6 모듈(표준)`import`, `export` 키워드 도입.성능 최적화 쉬움, 현재 표준 방식.// math.jsexport function add(a, b) { return a + b; }// app.jsimport { add } from './math.js';

배럴은 무엇을 담는 통이다.타입스크립트에도 배럴 개념이 있다. 예를들어,‘./hero’ 는 ‘./hero/index.ts' 를 가리킨다.따라서, 묶고 싶은 파일들이 있으면 hero같은 폴더를 만들고, 파일들을 넣어놓고 index.ts를 만들면 된다.// ./Hero/index.tsexport * from "./Button";export * from "./Input";export * from "./Modal";// 사용할 땐import { Button, Input, Modal } from "./components";

구조적 타이핑은 "생김새"로 타입 호환을 할 수 있는 타입스크립트의 능력이다.타입 호환이란 서로 다른 두 타입이 있을 때 특정 타입이 다른 타입에 포함되는지를 의미한다.이 능력은 일반 타입들 + 함수에 쓸 수 있다. // 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 를 이용해서 타입을 제약해도 된다.

function sayHi() { console.log('hi');}sayHi();위에가 함수 정의이고, 아래가 함수 호출이다.자바스크립트는 위에서부터 한줄씩 차례대로 실행하지만, 함수의 정의는 호출될 때만 실행한다.따라서 sayHi()가 먼저 실행되고, 그 다음에 함수 정의가 실행된다.

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

연산자 복습하다가 새로운 연산자를 배웠다!비트를 시프트 (왼쪽이나 오른쪽으로 옮기는) 하는 연산자이다!const bit:number = 4 비트와 연산자를 활용해서 하나의 수치값을 관리할 수 있다.예를 들어 게임 캐릭터의 상태를 표현할 때,0001 달리고 있음.0010 공격중임.0100 무적 상태임.이런 식으로 간단하게 관리할 수 있다.

클래스를 선언할 때, 기존 자바스크립트와 다른 점은 "프로퍼티의 타입을 미리 지정"해야한다는 점이다.class Book { name: string; // 여기가 다름! constructor(name: string) { this.name = name; } sum(a: number, b: number): number { return a + b; }} 변경되면 위험한 중요 프로퍼티들이 있다면 접근 제어자를 이용하자.클래스의 접근 제어자는 3가지 (public, private, protected)가 있다.public(기본)은 모두 rw(read, write) 가능, private은 클래스 내부에서만 rw 가능, portected는 상속된 클래스 내부에서만 rw 가능이다.주의해야..