지수의 프로그래밍 공부

start를 실행하면 build 폴더 안의 index.js 파일을 실행하도록 코드 추가 // package.json ... "scripts": { "build": "tsc", "start": "node build/index.js" }, ... 워크 플로우 실행 // VS Code 터미널에서 명령어 실행 // 프로젝트 빌드한 다음 실행 npm run build && npm run start - 빌드 → build/index.js 파일 생성 - node build/index.js로 실행 → 효율적이지 않음 → ts-node 설치 ts-node - Node.js용 TypeScript 실행 엔진 및 REPL - 빌드 없이 TypeScript 실행 가능, 개발환경에서만 사용 - JIT는 TypeScript를 Ja..

** TypeScript 프로젝트 생성 - 필요 : node.js, Visual Studio Code 1. 원하는 위치에 프로젝트를 생성할 폴더 만들기 2. Visual Studio Code에서 만든 폴더 열기 3. Visual Studio Code 터미널에 아래 명령어 입력 npm init -y - 위 명령어를 실행하면 package.json 파일이 생성됨 파일을 열어서 아래 코드 지우기 + "main": "index.js" → 지우기 + "test": "echo \"Error: no test specified\" && exit 1”→ 지우기 npm install -D typescript - TypeScript를 설치 - "-D" : TS가 devDependencies에 설치됨 4. src 폴더 생성,..

Polymorphism - 다른 모양의 코드를 가질 수 있게 해주는 것 - 다형성을 이룰 수 있는 방법 → 제네릭 사용 Jeneric - 같은 코드를 다른 타입에 대해서 쓸 수 있도록 해줌 → - 코드를 보기 쉽게 해줌 interface SStorage { [key:string] : T } class LocalStorage { private Storage: SStorage = { } } - 제네릭을 클래스로 보냄 → 클래스는 제네릭을 인터페이스로 보냄 → 인터페이스는 제네릭 사용 - TypeScript는 제네릭을 바탕으로 call signature를 만들어줌 - 코드 사용 예시 interface SStorage { [key:string] : T } class LocalStorage { private St..

Interface - Object의 모양을 특정해주기 위해 사용 - 클래스가 아니지만 클래스의 모양을 특정할 수 있게 해주는 간단한 방법 - 고유한 사용처가 있고 클래스의 모양을 알려준다는 점에서 유용 - 프로퍼티들 축적 가능 // TypeScript가 알아서 합쳐줌 // interface에선 사용 가능하지만, type에서는 사용 불가능 interface User { name: string } interface User { lastName: string } interface User { health: number } const jisu: User { name : "jisu", lastName : "lee", health : 10 } - TypeScript에서 Object의 모양을 특정하는 방법 2가지 1..

Class - 객체를 만들기 위한 템플릿 - 데이터를 처리하기 위한 코드로 데이터를 캡슐화 함 생성자 (Constructors) : 클래스의 객체 인스턴스를 만들고 초기화 하기위한 메서드 → 파라미터들을 써주기만 하면 TypeScript가 알아서 생성자 메서드를 만들어 줌 class Player { constructor ( private firstName:string, private lastName:string, public nickName:string ) {} } const jisu = new Player("jisu", "lee", "dlwltn98"); jisu.firstName // 오류발생 jisu.nickName // 정상 + 추가로 메서드에서도 접근 제어자 사용 가능 abstract class..

Call Signatures - 함수 위에 마우스를 올렸을때 보이는 것 - 함수를 어떻게 호출해야하는 것인지 알려줌 함수가 어떻게 구현되는지를 알려주는게 아닌 arguments(인자)의 타입이랑 함수의 반환 타입을 알려줌 // 함수의 call signature 타입을 만드는 방법 type Add = (a:number, b:number) => number; // 위와 같음, 이렇게도 표현 가능 type Add = { (a: number, b: number) : number } // type을 명시해주지 않아도 오류가 나지 않음 const add:Add = (a, b) => a + b Overloading JavaScript의 함수는 다양한 argument의 개수와 타입에 의해 호출 될 수 있음 그래서 Ty..

TypeScript는 2가지의 접근 방식을 결합했음 1. 데이터와 변수의 타입을 명시적으로 정의 ( C, JAVA 처럼 ) let b : boolean = true 2. JavaScript 처럼 변수만 생성 // 이런 경우에는 TypeScript가 타입을 추론해줌 let a = "hello" TypeScript 의 타입들 1. 원시 타입 ( string, number, boolean ... ) 2. 배열 3. 객체 타입 - 원시 타입을 제외하고 가장 많이 마주치는 타입 - 객체 타입을 정의 하기 위해서는 객체의 프로퍼티들과 각 프로퍼티의 타입들을 나열하면 됨 ** 객체 : 프로퍼티를 가지는 JavaScript 값 // 매개 변수의 타입 = 객체 function printCoord(pt: { x: numb..

안정성(타입의 안정성) 때문에 많은 사람들이 JavaScript를 두고 TypeScript로 넘어간다고 함 타입의 안정성 ⇒ TypeScript의 가장 큰 장점 버그 ↓ 런타임 에러 ↓ 생산성 향상 등 다양한 이점이 있음 JavaScript 매우 유연한 언어 타입을 가지고 이상한 코드가 실행 가능 [1,2,3,4] + false *******************result******************* '1, 2, 3, 4false' → 배열이 사라지고 boolean type과 함께 String 으로 변해버림 function divide(a, b) { return a / b } *******************result******************* divide (2, 3) 0.6666666..