01. 타입스크립트 연습

타입스크립트 사용하는 이유

• JS는 weakly typed 언어이기 떄문

• IDE를 더욱 더 적극적으로 활용
  

• 실수 방지

---

01. 타입스크립트 연습

tsconfig.json

{
  "compilerOptions": {
    "target": "es5", // : 어떤 환경에서? 
    "module": "commonjs", // : 어떤 모듈 시스템? 
    "strict": true, // : 모든 타입 체킹 옵션 
    "esModuleInterop": true 
  }
}

practice.ts

let mightBeUndefined: string | undefined = undefined; // string 일수도 있고 undefined 일수도 있음
let nullableNumber: number | null = null; // number 일수도 있고 null 일수도 있음

let color: 'red' | 'orange' | 'yellow' = 'red'; // red, orange, yellow 중 하나임
color = 'yellow';
color = 'green'; // 에러 발생!

함수에서 타입 정의하기

function sum(x: number, y: number): number {
  return x + y;
}

sum(1, 2);


function sumArray(numbers: number[]): number {
  return numbers.reduce((acc, current) => acc + current, 0);
}

const total = sumArray([1, 2, 3, 4, 5])


function returnNothing(): void {
  console.log('I am just saying hello world');
}

interface

클래스 또는 객체를 위한 타입을 지정할 때 사용

// Shape 라는 interface 를 선언합니다.
interface Shape {
  getArea(): number; // Shape interface 에는 getArea 라는 함수가 꼭 있어야 하며 해당 함수의 반환값은 숫자입니다.
}

  // `implements` 키워드를 사용하여 해당 클래스가 Shape interface 의 조건을 충족하겠다는 것을 명시합니다.
class Circle implements Shape {
  constructor(public radius: number) {
    this.radius = radius;
  }

  // 너비를 가져오는 함수를 구현합니다.
  getArea() {
    return this.radius * this.radius * Math.PI;
  }
}

class Rectangle implements Shape {
  constructor(private width: number, private height: number) {
    this.width = width;
    this.height = height;
  }
  getArea() {
    return this.width * this.height;
  }
}

const circle = new Circle(5);
const rectangle = new Rectangle(10, 5);

console.log(circle.radius);
console.log(rectangle.width);

const shapes: Shape[] = [new Circle(5), new Rectangle(10, 5)];

shapes.forEach(shape => {
  console.log(shape.getArea());
});

---

Reference

https://react.vlpt.us/using-typescript/