끄적끄적 메모장

타입스크립트로 처음으로 프로젝트를 시작할때 tsconfig.json파일을 생성하여 기본 세팅을 해줘야 한다. tsconfig.json파일에 들어가는 요소들에 대해서 알아보자 { "include": ["src"], "compilerOptions": { "outDir": "build", "target": "ES6", "lib": ["ES6", "DOM"], "esModuleInterop": true, "strict": true, "allowJs": true, "skipLibCheck": true } } ● include : [ src ] 타입스크립트가 src의 모든 파일을 확인한다는 것을 의미한다. ● outDir 자바스크립트 파일이 생성될 디렉터리를 지정해 준다. ● target 어떤 버전의 자바스크립트로..

타임스크립트에서는 Interface가 있다. 아래의 예시 언어를 봐보자 type Player = { name: string; team: Team; health: Health; }; interface Player { name: string; team: Team; health: Health; } 위 코드처럼 type Player 와 interface Player 는 둘 다 타입스크립트에게 오브젝트의 모양에 대해서 설명하고 있습니다. 단, interface는 오브젝트의 모양을 설명할 때만 사용할 수 있습니다. 또한 Interface와 type은 상속할때 쓰는 방식이 다릅니다. 먼저 type은 상속할때 아래와 같은 문법을 활용하며 type User = { name: string; }; type Player = ..

TypeScript에서 접근 제한자가 있습니다. 접근제한자란? 말 그대로 접근을 제한하기 위해 사용됩니다. 클래스 및 인터페이스 등에 대한 접근을 통제하는 역할을 합니다. 접근 제한자는 Public, Private, Protected와 같이 세 가지 종류가 있습니다. 접근제한자 public protected private 클래스 내부 O O O 자식 클래스 내부 O O X 클래그 인스턴스 O X X 먼저 Private를 활용한 예시를 보자 class MyClass { private privateVariable: number = 10; private privateMethod(): void { console.log('This is a private method.'); } } 위 코드와 같이 private키워..

다음으로 좀더 간단하게 표현할 수 있는 TypePlaceholder에 대해서 알아보자. 코드로 가기전 Concrete 타입과 Generic 타입에 대해서 알아보도록 하자, Concrete 타입이란? 1) number, boolean, string, void, unknown 같은 많이 사용하였던 타입들을 말합니다. Generic 타입이란? 1) Generic 이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 2) 정적 type언어는 클래스나 함수를 정의할 때 type을 선언해야 합니다. 3) Generic은 코드를 작성할 때가 아니라 코드를 수행될 때 (런타임) 타입을 명시합니다. 4) 코드를 작성할 때 식별자를 써서 아직 정해지지 않은 타입을 표시합니다. (일반적으로 T, U, V ...를..

함수에 대해서 알아보도록 하자. function add(a: number, b: number):number { return a + b; } 위 코드와 같이 add의 함수가 있습니다. 이 함수를 좀 더 간단하게 줄일 수 있습니다. ※ return 값의 타입인 number 은 생략이 가능합니다. const add = (a: number, b: number) => a + b; 위 코드와 같이 함수(=>)를 활용하여 좀 더 간단하게 함수를 줄일 수 있습니다. 만약 number 같이 중복되는 함수들이 많아진다면 number를 굳이 쓰지 않고 생략하는 방법은 없을까요? type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 위 코..

기본 문법 알아보기 에 이어서 계속 문법에 대해서 알아보자. const numbers: readonly number[] = [1, 2, 3, 4]; numbers.push(1); // readonly 때문에 오류가 뜬다. 위 코드와 같이 readonly 를 사용하게되면 number[ ]의 값을 읽을수만 있으면 수정을 하게 될경우 오류가 뜨게 됩니다. let a: unknown; let b = a + 1 // Error가 납니다. if (typeof a === "number") { let b = a + 1; } 위 코드에서 a에 unknown을 주었습니다. 첫줄이 의미하는 건 a가 어떤 작업을 하려면 a 변수의 타입을 먼저 확인해야 하는 뜻입니다. 예를 들어 2번째 코드인 let b = a+1에서 Erro..

기존 HTML 코드를 TypeScript를 활용하여 구현해보자. 먼저 터미널창에서 tsc -w 를 입력하여 ts파일을 js파일로 자동 변환하게 만들주자. 두번째로 tsconfig.json 파일에서 { "compilerOptions": { "target": "es5", "module": "commonjs", "strictNullChecks": true } } 위 코드처럼 세팅을 해줍니다. 여기에서 "strictNullChecks": true 는 가끔 null 타입이 들어오는데 그걸 엄격하게 체크해 달라는 의미입니다. index.js 안녕하세요 링크 버튼 index.js(변환된 ts파일)으로 연결을 해둡니다. index.ts let 제목 = document.querySelector("#title"); if ..

이제 기본 문법에 대해서 알아보자 먼저 간단한 변수 타입지정으로는 let Name: string = 'Lee'; Name = '123'; 위와 같이 이 Name 변수에는 string(문자) type만 들어올 수 있습니다. string 말고도 number, boolean, neull, undefined, bigint, [], {} 등 type으로 들어갈 수 있다. let Name: string[] = {'Lee', 'Kim'}; let Name: { name : string } = {name, 'Kim'}; let Name: { name? : string } = { }; // ?는 name이라는 속성이 들어올 수도 있고 안들어올 수도 있다. (일종의 옵셥) 위 코드의 첫번째 줄은 Name 변수에는 stri..