공부/Typescript

[Typescript] Interface (인터페이스)

기본적인 사용법 interface Person { name: string; age: number; } const person: Person = { name: 'Mark', age: 35 }; function hello(p: Person): void { console.log(`안녕하세요 ${p.name}`); } optinal property 1 // 이렇게 하면 age는 있어도 되고 없어도 된다. interface Person { name: string; age?: number; } function hello(person: Person): void { console.log(`안녕하세요! ${person.name}입니다.`); } const p1: Person = { name: 'Mark', age: 35..

[Typescript] Type assertion, Type alias

Type assertion 형변환과는 다르다. '타입이 이것이다' 라고 컴파일러에게 알려주는 것을 의미한다. 문법적으로 두가지 방법이 있다. 변수 as 강제할 타입 (권장) 변수 let value: any = "this is a string"; let strLength: number = (value).length; let strLength: number = (value as string).length; /* 1. 주로 넓은 타입에서 좁은 타입으로 강제하는 경우가 많다. 2. jsx에서는 as를 쓴다. */ Type alias 별명. 인터페이스와 비슷하다. 주로 쓰는 경우 : Primitive, Union Type, Tuple. 여러번 쓸 때. 직접 작성해야 하는 타입을 다른 이름으로 지정할 수 있다. 만..

[Typescript] var, let, const

var ES5 변수의 유효범위 : 함수 스코프 호이스팅 (O) 재선언 가능 let, const ES6 변수의 유효범위 : 블록 스코프 호이스팅 (X) 재선언 불가 var말고 let, const를 쓸 것! 스코프 자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지를 정의한다. 스코프엔 두가지 종류가 있다. 전역 스코프와 지역 스코프로 나뉜다. 전역 스코프 전역 스코프는 변수가 함수 바깥이나 { } 바깥에서 선언되었다면, 전역 스코프에 정의 된다. 지역 스코프 지역 스코프는 코드에서 특정 부분에서만 사용이 가능한 변수다. 자바스크립트에는 크게 두가지의 지역 스코프가 존재한다. 함수 스코프와 블록 스코프다. 함수 스코프 만약 함수 내부에서 변수를 선언한다면, 그 변수는 선언한 함수 내부에서만 사용이 가능..

[Typescript] 자료형

Typescript에서 기본 제공하는 데이터 타입 사용자가 만든 타입은 결국 이 기본 자료형들로 쪼개진다. ◆ Javascript 기본 자료형 포함 (superset) Boolean Number String Null Undefined Symbol (ECAMScript 6에서 추가) Array : Object형 ◆ 추가 (프로그래밍을 도울 몇가지 타입이 더 제공된다.) Any Void Never Enum Tuple : Object형 let 변수명: 타입 = 값; Primitive Type 오브젝트와 에퍼런스 형태가 아닌 실제 값을 저장하는 자료형 Primitive 형의 내장함수를 사용 가능한 것은 자바스크립트 처리 방식 때문 자바스크립트는 기본적으로 레퍼런스 타입이다. 그 중 Primitive Type만 ..

[Typescript] 개발환경 구축 및 컴파일러 사용

VS CODE 사용 TypeScript 설치 명령어 npm i typescript npm i typescript -g // -global 컴파일 명령어 1. Typescript 컴파일러를 global로 설치 후, ◆ cli 명령어로 파일 컴파일 tsc [typescript 파일] ◆ 특정 프로젝트 폴더에서 Typescript컴파일러 설정에 맞춰 컴파일 tsc --init // tsconfig.json 파일 생성 { "compilerOptions": { "module": "commonjs",/* 어떤 모듈 방식으로 컴파일할지 설정 */ "target": "ES2015",/* 어떤 버전으로 컴파일할지 설정 */ "sourceMap": true,/* sourceMap 처리 여부 */ "outDir": "dis..