FrontEnd/TypeScript 8

Omit, Pick

Omittype 에서 특정 항목을 제거 할 때 사용. 예를들어 type1 이 속성을 10개를 가지고 있고, type2 에서는 그중 몇개를 제거한 7개의 속성이 중복된다고 했을때 손쉽게 사용 가능.export type TypeTest1 ={ val1 : string, val2 : int, ....}//val2 를 제외하고 속성 생성export type TypeTest2 = Omit{ }  이렇게 커스텀 type 생성시 에도 사용할 수도 있지만, interface 에서도 사용할 수 있다. export type TypeTest1 ={ val1 : string, val2 : int, ....}interface TestInterface extends Omit{} Pick모든항목을 지우고 특정..

FrontEnd/TypeScript 2024.10.18

커스텀 type 만들기

정해진 type 외에 커스텀한 형태로 만들 수 있다. interface, class 와 비슷하게 구성 할 수 있다. export type testtype = { numval : number, ......}/////// 사용처에서import {testtype} from .......const val1 : testtype = { numval : 10, ....}상속interface 나 class 는 extends 를 통해 상속을 할 수 있고, type 같은 경우는 & 기호를 사용한다. export type TypeTest1 ={ val1 : string, ....}export type TypeTest2 = TypeTest1 &{ additional : string, ....}

FrontEnd/TypeScript 2024.10.18

nodemon 설치 (typescript 자동 빌드) 및 기타 모듈

nodemontsc 설치 후 빌드할 때 마다 tsc 명령어를 통해 빌드할 필요 없이 자동으로 감지하여 빌드하도록 해주는 도구로 필수격이다.설치 후 서버 실행시 npm start 대신 nodemon 명령어를 사용해야 하나, 이는 package.json 파일을 수정하여 npm start 나 build 를 그대로 사용하게 할 수 있다.concurrencynode 서버와 클라이언트를 동시에 실행 할 수 있도록 하는 모듈로, 백앤드를 구현한게 아니라면 굳이 설치할 필요가 없을듯 하다. ts-node 콘솔에 node 파일명.js 명령어를 입력하면 자바스크립트를 실행하는데, 이를 ts 파일도 가능토록 해주는 프로그램이다.필수는 아닌것 같다. nodemon 설치npm install nodemon - gpackage.j..

FrontEnd/TypeScript 2024.10.18

유틸리티 타입

기본적으로 선언한 인터페이스나 클래스의 변수를 생성할 때, 기본 설정 규칙(예 : required) 을 무시(?) 할 수 있는 것인데, 이걸 사용할 일이 있을지 모르겠지만... 일단 내용정리를 해둔다. 개인적으론 설정한 기본 규칙에 맞춰 변수 생성을 해야 한다고 생각한다.  //예interface test { var1:number, var2:string}//오류 발생 var2가 없음let varTest : test = { var1 : 0}//Partial 때문에 생성 가능let varTest1 : Partial = { var1 : 0} Partial반드시 선언해야 하는 변수를 ? 로 만들어서 선언하지 않아도 되도록 변경한다.Required반대로, ? 로 되어 있어 배정하지 않아도 되는 변수를 반드시..

FrontEnd/TypeScript 2024.10.17

type 종류

선언법변수명 : 타입명 = 초기값;초기값에 null 혹은 undefined 를 사용 할 수 있음readonly 변수명 : 타입명 = 초기값; 은 읽기전용 (단, 배열은 좀 다르다)booleannumber (정, 실수 모두)string배열타입명[] = []Array = []읽기전용 배열readonly 타입[] = []readonlyArray = []다중타입 배열(타입명1|타입명2)[] = []Array(타입명1|타입명2>[] = []Tuple변수명 : [type, type....]정해진 타입, 타입의 개수에 맞게만 데이터를 입력할 수 있음읽기전용변수명 : readonly[type,.....]interfaceinterface 확장시 inerface 명칭 extends { } 이용예interface 명칭{ n..

FrontEnd/TypeScript 2024.10.17

typescript 컴파일러 설치 (VSCode)

기본적으로 vscode 에는 typescript를 지원하나 컴파일러는 설치해야 한다.  전역 설치명령어 : npm install -g typescriptconfig 파일 생성컴파일 설정을 모아둔 파일명령어 : tsc inittsconfig.json 파일이 생성됨 (프로젝트 폴더에서 실행할 것)컴파일 (javascript로 컴파일)명령어 : tsc 파일위치및이름예 : tsc ./src/test.tsWatch ts 파일을 수정 후 매번 빌드 하는것은 번거로운 일이므로 이를 자동으로 watch 하여 변환해줌. 명령어 : tsc 파일위치및이름 -w 이 일반적이나 tsc -w 처럼 프로젝트 전체를 대상으로 할 수 있음tsconfig.json 가 있다면 콘솔에 tsc 만 입력하면 해당 프로젝트 내 모든 타입스크립트..

FrontEnd/TypeScript 2024.10.17