Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

히바리 쿄야 와 함께 하는 Developer Cafe

[1일차] DO IT 타입스크립트 프로그래밍/p14~p176/타입스크립트 생성, 관리, 객체와 클래스,함수와 메서드, promise와 async,await 본문

TypeScript

[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 {

    namestring

    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 {

    namestring

    age?: number

}

 

class Person4 implements IPerson4 {

 

    constructor(public namestringpublic age?: number){

 

    }

 

}

 

let jack4IPerson4 = 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 정적 속성 이름: 속성 타입
}

 

 

Comments