gggimmin 개발 블로그 gggimmin 개발 블로그

🛠️ TypeScript 설치 및 pakage.json 초기화 방법 1. 빈 프로젝트 생성 2. package.json 초기화 : npm init -y 3. typescript 설치 : npm i -D typescript 🛠️ tsconfig.json 설정 디렉토리에 tsconfig.json 파일이 있으면 해당 디렉토리가 TypeScript 프로젝트의 루트임을 나타낸다. tsconfig.json 파일은 프로젝트를 컴파일하는데 필요한 루트 파일과 컴파일러 옵션을 지정한다. 참고 : https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#handbook-content Documentation - What is a tsconfig.json Learn ..

✅ Classes 추상(abstract)클래스 추상 클래스는 오직 다른 클래스가 상속 받을 수 있는 클래스이다. 하지만 직접 새로운 인스턴스를 만들 수는 없다. // classes abstract class User{ constructor( private firstname:string, private lastname:string, public nickname:string ){ abstract getNickname():void } } class Player extends User{ // 추상 메서드는 추상 클래스를 상속받는 클래스들이 반드시 구현(implement)해야하는 메서드이다. getNickname(){ console.log(this.nickname) } } ❗ 접근 가능한 위치 구분 선언한 클래스..

✅ Polymorphism (다형성) type SuperPrint = { (arr: number[]): void, (arr: string[]): void, (arr: boolean[]): void, (arr: (number|string|boolean)[]): void } const superPrint: SuperPrint = (arr) => { arr.forEach(e => console.log(e)); } superPrint([1, 2, 3]) superPrint(["a", "b", "c"]) superPrint([true, false, true]) superPrint([1, "b", true]) => 위와 같이 다양한 경우를 커버하는 함수를 작성할 때, 모든 조합의 Call Signature를 con..

✅ Call Signatures //Call Signature type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b Call(=Functions)Signature 란 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것. * React 에서 함수로 props를 보낼 때, 어떻게 작동할지 미리 설계 가능. * Type Alias 와 같은거 아닌가? Alias 는 type Name = string의 형태, call signature는 함수의 인자, 리턴 타입의 형태이다. ✅ Overloading //overloading => 매개변수의 데이터 타입이 다른 경우 예외 처리 type Add = { (a: nu..

✅ readonly 속성 // readonly 속성 사용 type Person = { readonly name : string age? : number } const personMaker = (name : string): Person => ({name}) const jude = personMaker("jude") jude.name = "erling" // error : readonly 속성의 name 값을 변경 불가 // readonly 속성 사용 const numbers : readonly number[] = [1, 2, 3, 4] numbers.push(5) //error : readonly 속성의 numbers 에 새로운 number 추가 불가능 readonly 속성이 있으면 최초 선언 이후 수정이..

TypeScript 는 JavaScript 에 추가적으로 구문을 더해서 에디터와 단단한 통합을 지원한다. 런타임 에러가 아닌 에디터에서 초기 오류를 잡기가 가능하다. TypeScript 코드는 JavaScript 가 실행되는 모든 곳에서 작성한 TypeScript 의 코드가 JavaScript 로 변환된다. ( 컴파일 시 TypeScript 코드 → JavaScript 코드 로 변환 ) 또한, TypeScript 는 JavaScript 를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공한다. ✅ 명시적 정의 (변수 선언 시 타입 정의) const a : boolean = "x" // error : boolean 타입에 string 타입 할당 불가 알림 위는..

왜 사람들은 자바스크립트에서 타입스크립트로 넘어와 타입스크립트를 많이 사용하는 것일까? 그 이유는 바로 타입 안정성 때문이다. 타입 안정성으로 인해 코드에 버그가 엄청 많이 줄어들게 된다. 자바스크립트는 매우 유연한 언어이다. 그래서 최대한 에러를 안내고 개발자를 이해하려한다. // console [1, 2, 3, 4] + false // '1,2,3,4false' 예를 들자면 위의 사례를 볼 수 있다. 배열과 불리언 타입의 false를 더했더니, 배열이 완전히 사라져버리고 불리언 타입의 false는 스트링이 되어버렸다. 전혀 허용할 수 없는 코드이지만, 자바스크립트는 유연한(?) 계산을 보여준다. 이것이 자바스크립트의 문제점이다. 다른 문제점을 하나 더 보자면, function divide(a, b) ..

이제 타입 스크립트를 배우게 되어 타입 스크립트 사용을 위한 패키지를 설치해야 하는데 나는 CRA (create-react-app) 방식이 아닌, vite를 사용한 react+ts 방법을 사용했다. vite의 자세한 설치 방법과 장점은 아래 글에서 확인할 수 있다. https://gggimmin-development-technology.tistory.com/39 [ React ] 빠른 Frontend 개발을 위한 툴, Vite ! Vite는 프론트엔드 개발을 위한 하나의 툴이다. Vite는 6가지의 장점을 내세우는데, 1. 즉각적인 서버 시작 : 네이티브 ESM을 이용한 번들링 없는 온디맨드 파일 제공. 2. 번개처럼 빠른 HMR : 앱 크기 gggimmin-development-technology.ti..