본문 바로가기
728x90

프론트엔드/TypeScript10

[typescript / 타입스크립트] class 내 static 사용하기 [Typescript / 타입스크립트] Class 내 Static 사용하기 class 내 객체 생성시마다 함께 생성되는 멤버 변수를 static 화 하여 생성시마다 생기는 메모리 누수를 막아보자 type InCoffee = { shots : number; } ////멤버 변수만 사용한 경우 class Coffee { gram_per_shot :number = 10; beans :number = 0; constructor (beans:number) { this.beans = beans; } makeCoffee(shots:number):InCoffee { if(this.beans < shots * this.gram_per_shot){ console.error('원두 부족'); } return { shots .. 2021. 11. 16.
[TypeScript / 타입스크립트] unknown 과 any 의 차이점 [TypeScript / 타입스크립트] unknown 과 any의 차이 any와 unknown의 차이점을 분명히 알기 위해서는 any 타입에 대한 정의를 달리하자 any는 모든 타입을 뜻하는게 아니라 기존 타입스크립트의 타입에 대한 제한과 확정이라는 실드를 해제한다고 생각하자 다시말해 타입스크립트의 목적은 타입을 확정하거나 변수의 타입의 변경을 제한함으로써 디버깅을 명확히 하기 위함인데 any타입은 그런거 없이 실드를 해제하는 키워드이다 반면 unknown 이라는 키워드는 any와 같이 유연하게 여러가지 타입의 값을 변수에 대입할수 있지만, unknown 타입이 지정된 변수의 값과 다른 타입의 변수에 대입을 하려고할때 컴파일 에러가 발생한다. 아래 예제 코드를 참고하자 let str : unknown =.. 2021. 11. 3.
[TypeScript | 타입스크립트] 콜백 함수 타입 선언 CallBack Function Type 타입스크립트 함수에 인자로 전달되는 콜백 함수의 타입 선언 방법 🌈 기본 형태 function 함수이름 (콜백함수명 : (콜백함수 전달인자 : 타입) => 콜백함수 리턴 타입) { //함수 기능... } 기본형태에서 볼수 있듯 타입 스크립트에서 콜백 함수의 타입은 arrow function 의 외형과 유사하다 🌈 샘플 예제 const sampleFunction = (callback : (str:string) => void):void=>{ setTimeout(() => { callback('1초 지남!'); }, 1000); } const callbackSample = (msg)=>{ console.log(`메시지 : ${msg}`); } sampleFunction(callbackSample) 실행 결과 .. 2021. 10. 26.
[TypeScript] 타입스크립트 함수 Rest Parameter (가변 인자) [타입스크립트 / TypeScript] Function Rest Parameter 🔆 타입스크립트 Rest Parameter란 ? 함수의 파라미터 개수를 가변적으로 전달 받을수 있는 기능을 수행할수 있게 파라미터에 기능을 부여하는 것 🔆 기본 형태 function 함수이름(...파라미터이름 : 타입 []):반환타입 { //기능 수행.. } 🔆 샘플 예제 function PrintResult(...Numbers:number []):void { const result = Numbers.reduce((a,b)=>a+b); console.log(result); } PrintResult(1,2,3,4,5,6,7,8,9,10); 🔆 출력 결과 55 2021. 6. 24.
[TypeScript] 타입스크립트 함수 Optional Parameter [TypeScript / 타입스크립트] Optional Parameter 🍔 Optional Parameter란? 함수내에 인자를 전달 하지 않아도 주어진 함수의 기능을 수행하게 하기위해 인자에 따로 옵션을 부여하는 방식 🍔 기본 형태 //파라미터 이름 뒤에 ?를 붙이면 //인수가 전달되지 않더라도 함수의 기능을 수행한다 function 함수이름 (파라미터1:타입, 파라미터2?:타입) :반환타입 { //함수 기능... } 🍔 샘플 예제 function PrintInfo(name:string,age?:string):void { age = age ?? '' console.log(name,age); } PrintInfo('goodmemory'); 🍔 출력 결과 goodmemory 2021. 6. 24.
[TypeScript] readonly를 통해 일관성 있는 코드 작성하기 [타입스크립트 / TypeScript] readonly 를 통해 일관성 있는 코드 작성하기 ⭐️ readonly란 ? 함수에 전달되는 배열을 변경할수 없게하여 코드의 일관성을 유지할수 있는 키워드이다 ⭐️ 기본 형태 function 함수(파라미터1 : 파라미터 타입[]):반환타입 { //함수기능 } ⭐️ 샘플 예제 function sum(...arr:readonly number[]):number { return arr.reduce((a,b)=>a+b); } console.log(sum(1,2,3,4,5)); ⭐️ 출력 결과 15 2021. 6. 23.
[TypeScript] 여러타입 지정하기 [타입스크립트 / TypeScript] 여러타입 지정하기 타입스크립트로 소스를 작성할때 한개의 변수에 하나의 타입만 할당할수 없는 경우가 있다 예를 들면 변수가 숫자이거나 null 인 경우, 변수가 문자열이거나 undefined 인경우 위와같은 경우에는 | 를 통해서 여러 타입의 지정이 가능한데 사용 방법은 아래와 같다 🌈 기본 형태 //타입의 지정은 2개 이상도 가능하다 const 변수명 : 타입1|타입2; 🌈 사용 예제 //string 이거나 undefined let str : string | undefined = 'hello'; str=undefined; //number 이거나 null let num : number | null = 10; num = null; //string 이거나 number 이.. 2021. 6. 23.
[TypeScript] 기본 타입 정리 및 기본 문법 정리 (함수 포함) 타입스크립트 기본 타입 정리 및 기본 문법 정리 feat. 함수 타입스크립트는 자바스크립트 확장판 같은 개념이다 타입스크립트로 코드를 작성해도 결국에는 자바스크립트로 변환해서 자바스크립트 파일을 배포하거나 자바스크립트 파일을 사용해야 한다 ⭐️ 타입스크립트 원시 타입과 객체 타입 Primitive Type (원시 타입) : number, string, boolean, bigint, symbol, null, undefined Object (객체 타입): functio, array .. ⭐️ number Type //0.1, -1 소수점, 음수, 양수, 정수 등 가능 const num:number = 10; ⭐️ string Type const str:string = 'hello'; ⭐️ boolean Ty.. 2021. 6. 23.
[TypeScript] ts-node 를 통해 타입스크립트 실행하기 [타입스크립트 / TypeScript] ts-node 사용하기 🌈 ts-node란? 기존 자바스크립트를 웹이 아닌 콘솔에서 실행하기 위해서는 NodeJs 설치 후 node (자바스크립트).js 를 통하여 실행했었다. 타입스크립트 파일 또한 내부에 자바스크립트 문법으로만 작성을 한다면 node (타입스크립트).ts를 통하여 실행이 가능하다. 하지만 타입스크립트 문법으로 작성된 .ts 파일은 node를 통해 실행이 되지 않는데 이유는 node는 타입스크립트를 해석하지 못하기 때문이다. .ts 즉 타입스크립트 파일을 콘솔환경에서 node와 같이 실행하기 위해서는 아래와 같은 과정이 필요하다 🌈 ts-node Install 터미널에 아래 명령어 실행 npm install -g ts-node 🌈 TypeScrip.. 2021. 6. 23.
[TypeScript] 타입스크립트 자바스크립트로 변환하기 타입스크립트 (typescript) 파일을 자바스크립트 (javascript) 파일로 변환하기 typescript to javascript (.ts -> .js) 💡 타입스크립트 파일 (.ts)이 있는 폴더내 터미널에서 아래 키워드 입력 tsc 파일명.ts 💡 같은 폴더내 생성된 js 파일 확인 2021. 6. 23.
728x90

티스토리툴바