본문 바로가기
728x90

JavaScript/TypeScript7

[TypeScript] 타입스크립트 자주 쓰는 문법 정리 1. 배열 // default let list: number[] = [1,2,3]; // or let list: Array = [1,2,3]; // interface array interface EnumServiceItem { id: number; label: string; key: any } interface EnumServiceItemList extends Array{} // using var result: EnumServiceItem[] = [ { id: 0, label: 'CId', key: 'contentId' }, { id: 1, label: 'Modified By', key: 'modifiedBy' }, ]; 2. 인터페이스 상속이 가능하다. interface PeopleInterface {.. 2023. 3. 30.
[TypeScript] 콜백 함수(callback function) 콜백 함수 일등 함수(first-class function)는 프로그래밍 언어가 제공하는 기능이다. 일등 함수 기능을 제공하는 언어에서 함수는 '함수 표현식'이라는 일종의 값이다. 따라서 변수에 담을 수 있다. 이 말은 함수 표현식을 매개변수로 받을 수 있다는 것을 의미한다. 매개변수 형태로 동작하는 함수를 콜백 함수(callback function)라고 한다. 아래 코드에서 함수 f는 callback이라는 매개변수가 있는데, 함수 몸통에서 함수로서 호출한다. const f = (callback: () => void): void => callback() 아래 코드는 좀 더 현실적인 콜백 함수 사용 예이다. init 함수는 중간에 매개변수로 받은 callback에 담긴 함수 표현식을 실행한다. (init... 2023. 2. 23.
[TypeScript] 변수 선언문( 타입 주석, 타입 추론, any ) 1. 타입 주석(타입 명시) 변수 선언시 변수 값의 타입을 명시함으로써 변수 값의 데이터타입을 지정한다. 타입스크립트는 자바스크립트 변수 선언문을 확장하여 아래의 형태로 타입을 명시할 수 있다. 이것을 타입 주석(type annotation)이라고 한다. let 변수 이름: 타입 [=초깃값] const 변수 이름: 타입 = 초깃값 타입 주석으로 변수를 선언한 예를 알아 보자 let n: number = 1 let b: boolean = true//혹은 false let s: string = 'hello' let o: object = {} 타입스크립트는 자바스크립트와 다르게 let으로 선언한 변숫값은 타입 주석으로 명시한 타입에 해당하는 값으로만 바꿀 수 있다. 선언한 타입과 다른 타입의 값으로 변숫값을 .. 2023. 2. 22.
[TypeScript] 타입스크립트로 카운터 만들기 예제 *Setup 명령 프롬프트 실행 1. 템플릿 먼저 설치하기 npm install cra-template-typescript -g 2. 새로운 프로젝트 생성하기 npx create-react-app 등록할파일명 --template typescript ex> npx create-react-app ts-react --template typescript 입력하여 폴더 생성 3. tsconfig.json 파일 내용 수정하기 ( 터미널에 npx tsc --init 명령어를 입력하면 tsconfig.json 파일이 자동생성 됨) 더보기 tsconfig.json 파일은 타입스크립트가 컴파일 될 때 필요한 옵션을 지정한다. "target" : 컴파일 된 코드가 어떤 환경에서 실행될 지 정의한다. 예를 들어 화살표 함수를.. 2023. 2. 20.
[TypeScript] 제네릭(Generic)이란? 제네릭(Generic) ? 재사용 가능한 클래스, 함수를 만들기 위해 다양한 타입에서 사용 가능하도록 하는 것 제네릭이 적용된 대상 (클래스, 함수, 인터페이스)은 선언 시점이 아닌 생성 시점에 사용하는 타입을 결정 제네릭에 사용되는 파라미터는 타입 파라미터라 하며 관용적으로 T를 사용한다 코드를 작성할 때 식별자를 써서 아직 정해지지 않은 타입을 표시한다. 일반적으로 식별자는 T, U, V ...를 사용한다. 필드 이름의 첫 글자를 사용하기도 한다. function getSize(arr:T[]):number{ return arr.length; } const arr1 = [1,2,3]; getSize(arr1); // 3을리턴 //getSize(arr1); //위와 같음 const arr2 = ["a",.. 2023. 2. 17.
[TypeScript] call,apply,bind this가 바인딩 되는 객체를 변경하고 싶을 때 call(),apply(),bind()를 사용한다. 1) call() call 메소드는 모든 함수에 사용가능, this를 특정 값으로 지정할 때 쓴다 const green = { name: "green", age: 30 } const blue = { name: "blue", age: 30 } function showName(){ console.log(this.name); } showName(); //this는window //call 메소드는 모든 함수에 사용가능, this를 특정 값으로 지정할 때 쓴다 showName.call(green); //this는 green객체 showName.call(blue); //this는 blue객체 const bella =.. 2023. 2. 16.
TypeScript란? 타입스크립트란? TypeScript는 정적 타이핑을 추가하는 JavaScript의 구문 상위 집합 더보기 구문 상위 집합 : JavaScript와 동일한 기본 구문을 공유하지만 무언가를 추가한다는 의미 타입스크립트는 정적 타입개념을 추가한 문법을 제공한다. 에러체크, 자동완성 등 편의성 제공. 우리가 사용하는 브라우져들은 TypeScript를 해석하지 못해서 scss-->css로 변환하여 썼듯이 TypeScript --> JavaScript 컴파일되어 해석, 실행 가능하다. 확장자명은 .ts로 표기한다. 타입스크립트의 장점 1. 버그를 줄이고 유지보수하기 쉬우며 질 좋은 코드 작성에 용이함 2. 강력한 타입으로 대규모 개발에 용이함 3. 자바스크립트 라이브러리와의 편리한 사용 4. 개발 도구에서의 강력한.. 2023. 2. 15.
728x90

티스토리툴바