TypeScript를 빠르게 배우기 위해 노마드 코더님의 강좌를 공부한다!

https://academy.nomadcoders.co/courses/ [타입블록체인] 👨🏻‍💻


1. Base Setting ✍🏻

가장 먼저 할 일은 yarn init. 다 기본으로 설정해도 괜찮다.

이후 tscongfig.json파일을 생성하고, 작성한다.

이후 변환에 사용할 옵션들이다. index.ts를 js파일로 변환한다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2015",
    "sourceMap": true
  },
  "include": ["index.ts"],
  "exclude": ["node_modules"]
}

이후 package.json에 다음을 추가한다.

"scripts": {
    "start": "node index.js",
    "prestart": "tsc"
}

yarn start를 입력하면 tsc로 ts파일이 js파일로 변환되고,

node index.js를 통해 index.js가 실행된다.

간단하게 index.ts를 작성하고 yarn start를 해서 테스트해보자!

index.jsindex.js.map이 생성되고, 내용이 수정되어 있을 것이다.

2. optional ?

세상에, swift의 옵셔널처럼 ts에도 옵셔널이 존재한다...!

바로 코드를 보도록 하자.

// index.ts
const myname = "sohee",
age = 26,
gender = "female";

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

sayHi(myname, age)

export {};
// hello sohee, you are 26, you are a undefined

ts에서는 함수의 매개변수의 개수만큼 인자를 넣지 않으면 에러가 발생한다.

하지만, 꼭 넣지 않아도 되는 매개변수는 optional(?)로 생략할 수 있다.

이게 swift에서는 아주 강력한 기능이었는데, ts에서도 비슷할 것 같다.

3. tsc-watch 👀

계속 파일을 변경할 때마다 yarn start를 해주는 것이 비효율적이다.

터미널에 yarn add tsc-watch --dev로 tsc-watch를 설치한다.

이후 바로 yarn add typescript를 해준다.

tsc-watch가 global패키지를 읽지 못하는 듯하다. 그래서 새로 설치한다.

그리고 각 json파일을 수정하는데 이번엔 파일내용을 다 적겠다. (에러방지)

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2015",
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
// package.json
  // ... 개인 정보 생략
  "scripts": {
    "start": "tsc-watch --onSuccess \" node dist/index.js\" "
  },
  "devDependencies": {
    "tsc-watch": "^2.2.1"
  },
  "dependencies": {
    "typescript": "^3.5.2"
  }
}

그리고 dist와 src폴더를 만들고, src폴더에 index.ts를 옮긴다.

이제 yarn start를 하고 내용을 수정하면 바로 변경된다.

image.png

4. interface 🔗

함수의 매개변수에 객체를 바로 대입할 수도 있다.

물론 js에서는 당연히 되고, ts에서도 할 수 있게 만들어보자.

먼저 interface로 원하는 타입을 정의한 객체를 선언한다.

이를 person객체에 타입으로 지정하고, 함수의 매개변수에 넣는다.

이제 person객체에 접근하여 변수를 가져오므로, 구조할당을 이용한다.

// index.ts
interface Human {
  name: string,
  age: number,
  gender: string
}

const person = {
  name: "dahyun",
  age: 22,
  gender: "female"
}

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

console.log(sayHi(person));

export {};

아마 여기까지가 기본적인 이론일 것 같다.🍀