Web_Study/TypeScript (17) 썸네일형 리스트형 TypeScript_Project6:BlockChain_Final ▶ BlockChain_Class ▶ BlockChain 생성 ▶ 실행결과 TypeScript_Project5:Blocks ▶ BlockChain? 여러개의 블록이 사슬처럼 묶인 것 블록 안에 데이터 존재하며 이 블록은 다른 블록으로 묶여있는 개념 블록간의 연결고리는 Hash ▶ Proactive start를 실행하면 build/index.js 실행함을 의미 이와 같이 script 실행 시, 매우 비효율적! ts-node : 빌드없이 타입스크립트를 실행시키는 엔진 빌드없이 빠르게 새로고침하고싶을때 사용 개발환경에서만 사용 nodemon : 자동으로 커맨드를 재실행해주는 엔진 서버 코드 변경 시, 자동으로 서버 재시작 ▶ Block 생성 Block의 모양을 interface로 생성 hash를 이용하여 데이터를 보호 -> 블록정보가 수정되지 않음을 의미 height : 블록의 위치를 의미 data : 블록이 보호할 데이터 blo.. TypeScript_Project4:Type Definition ▶ 자바스크립트에서 타입스크립트로 이전하는 경우 발생할 수 있는 Case 프로젝트 안에 자바스크립트와 타입스크립트 파일이 같이 있는 경우 tsconfig.json 파일에서 alloJs : true 속성 추가 타입스크립트 안에 자바스크립트를 허용한다는 의믜 타입스크립트가 js파일안에 들어와서 함수를 다 불러올 수 있게됨 해당 방식으로 자바스크립트 파일과 타입스크립트 파일을 섞어서 프로젝트를 진행해도 OK 옛날코드는 자바스크립트로 새로운 코드는 타입스크립트로 작성하면됨 파일스크립트 파일이 자바스크립트 파일을 확인하게도 하고 싶고 완전히 타입스크립트로 이전하고 싶지않은 경우 EX) 수천줄의 코드가 있는데, 당장 코드를 변경하고, 삭제하기를 원하지 않을 것 코드가 엄청 많을때는 그냥 자바스크립트로 납두는것이 나.. TypeScript_Project3:Type Definition ▶ type definition : 타입스크릅트에게 몇몇 자바스크립트 코드의 타입을 설명해주기 위해 사용 ▶ lib: lib는 합쳐진 라이브러리 정의 파일(declaration file)을 특정해주는 역할을 함.: 타입스크립트는 몇몇 자바스크립트 코드와 api의 타입을 설명할 수 있도록 해줌 ▶ 우리는 타입스크립트와 다양한 것들의 타입에 대해 소통해야함 문제점 : 대부분의 경우 우리는 외부 패키지나 프레임워크 라이브러리를 사용하게되는데, 그것들은 타입스크립트가 아닌 자바스크립트로 만들어졌음 자바스크립트로 만들어진 라이브러리를 타입스크립트 프로젝트에 사용하기 위해선 타입의 정의를 함으로써 타입스크립트에게 알려줘야함 이때 사용되는 것이 declartaion file ▶ Example myPackage.js생.. TypeScript_Project2:Lib Configuration ▶lib 속성 : lib는 합쳐진 라이브러리의 정의 파일(declaration file)을 특정해주는 역할을 함 목표로 하는 실행환경을 나타냄 자바스크립트의 어떤 버전이 그 환경에서 사용되는지 lib에 DOM 명시했을 경우 index.ts로 가게되면 타입스크립트는 document가 뭔지 알고 있음(자동완성) 타입스크립트는 document가 가지고 있는 모든 이벤트와 메소드를 보여줌 타입스크립트가 브라우저의 API와 타입을 알고 있기에 자동완성 DOM을 지우면 타입스크립트는 사용자가 브라우저를 위한 코드를 작성한다는 것을 모름! 상단의 자동완성기능 제공X TypeScript_Project1:Target ▶ npm init -y : 새로운 nodejs Project 생성 ▶ npm i -D typescript : typescript 설치 ▶ src folder생성, tsconfig.json생성 src\index.ts 생성 tsconfig.json은 고정된 이름 : VSC가 typescript를 작업한다는 것을 알게해주며 아주 훌룡한 자동완성기능 제공 ▶ tsconfig.json 작성 outDir : index.ts를 컴파일하여 생성한 자바스크립트의 위치 표기 (해당 script에선 build라는 폴더안에 생성) target : 생성할 자바스크립트의 버전 선택 ▶ npm run build : index.ts를 기반으로 컴파일하여 Javascript생성 index.js 타입스크립트가 이 코드를 컴파일해서 낮.. TypeScript_10:Summary ▶ Summary_Generic & Interface & Polymorphism ※ Generic : Generic은 type을 concrete가 아닌 placeholder type으로 받아줌 같은 코드를 다른 타입에 대해서 쓸 수 있도록 해줌 ▶ Example API //이미 선언된 자바스크립트의 웹스토리지 API를 위한 interface //나만의 interface를 가지기 위해 SStorage로 이름 명명! //Storage는 존재하는 자바스크립트의 웹스토리지 API interface SStorage{ [key:string]: T } class LocalStorage{ private storage:SStorage = {} //API디자인 구현을 보여주기 위함 set(key:string, value:.. TypeScript_9:Interfaces_2 ※ Abstract Class/Method_ Recap 상속받는 Class에게 어떻게 구현해야할지는 명시하지 않지만 무엇을 구현해야 할지를 명시 표준화된 Property와 Method를 갖도록 하는 청사진을 위해 사용되어짐 abstract class User { constructor( protected firstName:string, protected lastName: string ){} abstract sayHi(name:string):string abstract fullName():string } class Player extends User{ fullName(){ // protected는 상속받은 클래스가 property에 접근할 수 있도록 허용 return '$(this.fisrstName} ${.. 이전 1 2 3 다음
