TypeScript(타입스크립트) 셋팅, 함수,tsc-watch,interface,class 정리

set-up

https://developer-trier.tistory.com/378?category=946925 

타입스크립트 셋팅(set-up)

---

function

src/study.ts

const sayHi = (name: string, age: number, gender: string): string => {
    return `Hello ${name}, you are ${age}, you are a ${gender}!`;
  };
  
  console.log(sayHi("song", 99, "male"));
  
  export {}; <-- 반드시 있어야함

타입스크립트는 실행하면 컴파일되어서 js 페이지에 보여준다.

함수를 만들때 인자의 갯수,  타입, 함수 출력 타입을 정할 수 있다.

void는 리턴값이 없을때

---

TSC-watch 

nodemon 처럼 실시간으로 변화된 값을 보여줌

js. 값도 실시간으로 변화

yarn add tsc-watch --dev

 

디렉토리

dist, src 추가

package.json

tsconfig.json

에러가 날때

https://developer-trier.tistory.com/377?category=946925 

tsc watch 쓸때 Cannot find module 'typescript/bin/tsc'

---

interface

interface Human {
    name: string;
    age: number;
    gender: string;
  }
  
  const person = {
    name: "song",
    age: 99,
    gender: "male"
  };
  
  const sayHi = (person: Human): string => {
    return `Hello ${person.name}, you are ${person.age}, you are a ${
      person.gender
    }!`;
  };
  
  console.log(sayHi(person));
  //   console.log(sayHi("Nicolas", 24, "male"));
  
  export {};

interface에서 형식을 주고, person 객체를 만들어 인자값을 줘도  함수가 작동( js에서는 안되고 ts만 가능한 것)

interface는 설명서 같은 것이다.

---

class

js는 interface를 못 쓰기 때문에 쓰고 싶으면 클래스로 만들어야 한다.

class Human {
    public name: string;
    private age: number;
    public gender: string;
    constructor(name: string, age: number, gender: string) {
      this.name = name;
      this.age = age;
      this.gender = gender;
    }
  }
  
  const song = new Human("song", 99, "male");
  
  const sayHi = (person: Human): string => {
    return `Hello ${person.name}, you are ${person.age}, you are a ${
      person.gender
    }!`;
  };
  
  console.log(sayHi(song));

클래스로도 인터페이스처럼 만들 수 있다.

ts에는 인터페이스가 안전하지만, react,node.js, express 등은 클래스로 만들어야 한다.

private

private하면 클래스 내에서만 작동된다.

클래스 밖에서는 찾을 수 없다고 뜬다.

보호되길 바라거나 밖에 노출되기 싫으면 클래스 내에서 선언하도록 private하면 된다.