히바리 쿄야 와 함께 하는 Developer Cafe
[1일차] DO IT 타입스크립트 프로그래밍/p14~p176/타입스크립트 생성, 관리, 객체와 클래스,함수와 메서드, promise와 async,await 본문
[1일차] DO IT 타입스크립트 프로그래밍/p14~p176/타입스크립트 생성, 관리, 객체와 클래스,함수와 메서드, promise와 async,await
TWICE&GFRIEND 2021. 3. 26. 20:35타입스크립트 세팅
scoop 설치
윈도우 파워쉘 관리자 모드 에서 명령어 입력
Set-ExecutionPolicy RemoteSigned -scope CurrentUser -> 명령어 실행후 a 입력
$env:SCOOP='C:\Scoop'
iex (new-object net.webclient).downloading('https://get.scoop.sh')
scoop install aria2
scoop install git
vscode 설치
scoop bucket add extras
scoop install vscode
nodeJs 설치
scoop install nodejs-lts
node -v
구글 크롬 브라우저 설치
scoop install googlechrome
chrome
vscode 터미널 창에 입력
타입스크립트 컴파일러 설치
npm i -g typescript
tsc --version
touch 프로그램 설치
scoop install touch
ts-node 설치
npm i -g ts-node
npm i 옵션
--save : 프로젝트를 실행할때 필요한 패키지로 설치 패키지 정보가 package.json 파일의 'dependencies' 항목에 등록
단축명령 : -S
--save-dev : 프로젝트를 개발할 때만 필요한 패키지로 설치 패키지 정보가 package.json 파일의 'devDependencies'
항목에 등록
단축명령 : -D
npm i -D typescript ts-node -> package.json 에 등록
npm i -D @types/node
npm i
config.json 파일 만들기
tsc --init
tsconfig.json 파일 수정 내용
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es5",
"moduleResolution": "node",
"outDir": "dist",
"baseUrl": ".",
"sourceMap": true,
"downlevelIteration": true,
"noImplicitAny": false,
"paths": { "*": ["node_modules/*"] }
},
"include": ["src/**/*"]
}
src 디렉토리 소스 파일 만들기
mkdir -p src/utils -> src/utils 디렉토리 생성
touch src/index.ts src/utils/makePerson.ts
package.json 수정 -> 초록색 내용이 추가된 내용
{
"name": "exam02",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "ts-node src",
"build": "tsc && node dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^14.14.36",
"ts-node": "^9.1.1",
"typescript": "^4.2.3"
},
"dependencies": {
"chance": "^1.1.7",
"ramda": "^0.27.1"
}
}
src 디렉토리 에 있는 index.ts 파일을 컴파일 하고 실행 명령
npm run dev
npm run build
외부 패키지를 사용할 때 import 문
npm i -S chance ramda
npm i -D @types/chance @types/ramda
{
"name": "exam02",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "ts-node src",
"build": "tsc && node dist"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^14.14.36",
"ts-node": "^9.1.1",
"typescript": "^4.2.3"
},
"dependencies": {
"chance": "^1.1.7",
"ramda": "^0.27.1"
}
}
객체와 클래스
class 클래스 이름 {
[private | protected | public] 속성이름[?]: 속성타입[...]
}
class Person1 {
name: string
age?: number
}
let jack1 : Person1 = new Person1();
jack1.name = 'Jack';
jack1.age = 32
console.log(jack1)
[Running] ts-node "d:\TypeScriptProgramming_source\exam03\Person1.ts"
Person1 { name: 'Jack', age: 32 }
인터페이스 구현
class 클래스 이름 implements 인터페이스 이름 {
}
interface IPerson4 {
name: string
age?: number
}
class Person4 implements IPerson4 {
constructor(public name: string, public age?: number){
}
}
let jack4: IPerson4 = new Person4('Jack', 32);
console.log(jack4)
[Running] ts-node "d:\TypeScriptProgramming_source\exam03\Person4.ts"
Person4 { name: 'Jack', age: 32 }
추상 클래스
abstract class 클래스 이름 {
abstract 속성이름: 속성타입
abstract 메서드 이름() {}
}
abstract class AbstractPerson5 {
abstract name: string
constructor(public age?: number) {
}
}
class Person5 extends AbstractPerson5 {
constructor(public name: string, age?: number){
super(age)
}
}
let jack5 : Person5 = new Person5('Jack', 32)
console.log(jack5)
[Running] ts-node "d:\TypeScriptProgramming_source\exam03\Person5.ts"
Person5 { age: 32, name: 'Jack' }
클래스의 상속
class 자식클래스 extends 부모 클래스 {
}
static 속성
class 클래스 이름 {
static 정적 속성 이름: 속성 타입
}
'TypeScript' 카테고리의 다른 글
[4일차] DO IT 타입 스크립트 프로그래밍/p294~p338/ 모나드 (0) | 2021.04.12 |
---|---|
[3일차] DO IT 타입 스크립트 프로그래밍/ p260 ~ p292/ 제네릭 (0) | 2021.04.12 |
[2일차] DO IT 타입스크립트 프로그래밍/p178 ~ p 258/ 함수형 프로그래밍, 람다 (0) | 2021.04.08 |