BlockChain 만들기 - 2)typescript 기본, interface,

타입스크립트를 사용할때는 

어떤 데이터와 어떤 변수를 사용할지를 알려줘야 한다. 

 

 

index.ts를 다음과 같이 바꿔본다. 

const name = "Nicolas",
    age = 24,
    gender = "male";

const sayHi = (name, age, gender) =>{
    console.log(`hello ${name}, you are ${age}, you are a ${gender}`)
}

sayHi(name, age, gender);

export {};//타입스크립트의 방식(이걸 해야 선언이 가능하다)

 

 

다시 yarn start를 해주면 다음과 같이 콘솔창을 확인할 수 있다. 

 

 

지금 한 것은 normal javascript다. 

여기서 만약 sayHi(name, age)와 같은 식으로 하나의 파라미터를 제거하면, 

타입스크립트가 파라미터가 3개여야 한다고 컴파일에러를 발생시켜준다. (자바스크립트는 해주지 않는다)

이와 같이 컴파일 오류를 만들어 미리 오류를 방지할 수 있다. (실수방지가능)

 

파라미터에 ?를 붙여주면 optional한 선택임을 알려준다. 

const name = "Nicolas",
    age = 24,
    gender = "male";

const sayHi = (name, age, gender?) =>{
    console.log(`hello ${name}, you are ${age}, you are a ${gender}`)
}

sayHi(name, age, gender);
sayHi(name, age)

export {};//타입스크립트의 방식(이걸 해야 선언이 가능하다)

이러한 경우에는 오류가 발생하지 않는다. (gender는 선택사항이기 때문에)

 

다음과 같이 정의 되지 않은 부분은 undefined가 된다. 

 

 

이번엔 파라미터들이 어떠한 타입인지를 나타내도록 해보자. 

코드를 다음과 같이 수정한다. 

const sayHi = (name:string, age:number, gender:string) =>{
    console.log(`hello ${name}, you are ${age}, you are a ${gender}`)
}

sayHi("Nicolas", 24, "male");

export {};//타입스크립트의 방식(이걸 해야 선언이 가능하다)

마우스를 올려보면 타입이 설정된 것을 확인할 수 있다. 

 

추가로 tsLint를 설치해주면 node가 typescript를 가진 것처럼 볼 수 있다. 

 

여기서 void는 비어있음을 말한다. 

여기서 void는 어떤 타입을 function이 되돌려 보내주는 지를 보여주는 것이다.

 

 

const sayHi = (name:string, age:number, gender:string):void =>{

 

다음과 같이 되돌려주는 타입설정이 가능하다. 

 

const sayHi = (name:string, age:number, gender:string):string =>{
    return `hello ${name}, you are ${age}, you are a ${gender}`
}

다음과 같이 타입설정도 가능하다. 

 

 

yarn start를 매번하지 않기 위해서 tsc watch를 다운받아준다. 

yarn add tsc-watch --dev

 

src 폴더와 dist 폴더를 만든 후 

package.json을 다음과 같이 바꿔준다 .

{
  "name": "Blockchain",
  "version": "1.0.0",
  "description": "Learning Typescript by making a Blockchain with it",
  "main": "index.js",
  "repository": "https://github.com/yunhalee05/Typescript_Blockchain.git",
  "author": "yunhalee05 <yunhalee0506@naver.com>",
  "license": "MIT",
  "scripts": {
    "start": "tsc-watch --onSuccess \" node dist/index.js\""
  },
  "devDependencies": {
    "tsc-watch": "^4.2.9"
  }
}

tsconfig.json은 다음과 같이 바꾼다.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES2015",
        "sourceMap": true,
        "outDir":"dist"//자바스크립트로 변경된 파일들은 모두 dist폴더안으로 들어갈 것이다.
    },
    "include": [//src에 있는 파일들을 변경할 것이다. 
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

 

이제 컴파일 할 내용을 src안으로 모두 옮겨줄 것이다. 

index.ts도 안쪽으로 옮겨준다. 

 

.gitignore파일에 다음을 추가해준다.

#Yarn indtegrity file
.yarn-indtegrity

# doten environment variables file
.env
dist

index.js와 생성된 map을 삭제하고 다시 실행시킨다. (yarn start)

 

여기서 tsc-watch 오류가 발생해서 다음과 같이 댓글을 보고 해결했다. 

npm i -D @types/node typescript ts-node

 

여기서 리턴타입으로 object를 주고 싶다면, 

타입스크립트가 object를 이해하도록 하고 타입이 맞는지 확인하도록 해야한다. 

 

오브젝트를 넘겨주기 위해서 인터페이스를 생성해보자. 

interface Human {//인터페이스로 사람에 대한 타입을 정의해주면
    name:string;
    age:number;
    gender:string;
}

const person = {
    name:"Nicolas",
    age:22,
    gender:"male"
}
const sayHi = (person:Human) : string =>{//들어온 타입이 인터페이스에 맞는지 확인하고 
    return `hello ${person.name}, you are ${person.age}, you are a ${person.gender}!`;//다음과 같이 설정이 가능하다. 
}

console.log(sayHi(person));

export {};//타입스크립트의 방식(이걸 해야 선언이 가능하다) 

실행해보면 잘 작동하는 것을 확인할 수 있다. 

(여기서 인터페이스는 자바스크립트에서는 안된다)

 

 

인터페이스는 자바스크립트 파일로 컴파일이 되지 않는데, 

타입스크립트에서 작성한 인터페이스를 자바스크립트안에 넣고 싶다면, 

다음과 같은 방식으로 클래스로 만들 수 있다. 

(보안을 위해서는 타입스크립안에 넣어두는 것이 좋다. )

class Human {
    public name:string;
    public age:number;
    public gender:string;
    
    constructor(name:string, age:number, gender:string){
    	this.name = name;
        this.age = age;
        this.gender = gender;
    }
}

const lynn = new Human("Lynn", 22, "female");

 

여기서 설정을 private로 한다면 js는 여전히 무엇인지 모를 것이다. 

또  js로 바꿀 수 없기 때문에 함수에서 사용하려고 하면 컴파일 오류가 발생할 것이다. 

 

이건 타입스크립트가 정보를 보호하는데 유용한 기능을 가지고 있다는 것을 말한다.