TS 01 TS(Typescript) 사용 이유, 타입 선언, 타입을 미리 선언(type)

TS를 사용하는 이유

 - JS같은 경우 에러를 미리 반환하지 않는다. 비어 있거나 완성이 되지 않을 때문 이상하다고 알려주고 실행을 해야 에러가 있다는 것을 알려준다.

   그래서 TS가 나왔다. TS는 타입이 다르거나 혹은 인자로 숫자를 주어야 할 때, 에러가 날 상황 등등을 미리 코드를 작성중인 게발자에게 알려주고 에러 상황을 막는 역할을 해주며 타입을 미리 선언하여 해당 타입만 받게 해준다.

 

---

TS 타입 선언하기

 - 변수명 뒤에 :(콜론) 후 타입을 입력하면 된다.

변수(상수) 변수명 : 타입 = 값;

 

boolean

let isLoggedIn: boolean = false;

 

number

let num: number = 10;

 

string

let str: string = "hi";
let greeting: string = `Hello, my name is ${myName}.`; // ES6 템플릿 대입문

 

object

const obj: object = {};

 

객체에 원하는 타입 및 선택적으로 값을 받고 싶을 때

 

const player : {
	name:string,
    age?:number
} = {
	name:"메롱"
    //age는 선택적으로 바뀌며 값은 number만 담을 수 있다.
}

 

array

let arr: number[] = [1, 2, 3];

// 제네릭 배열 타입
let arr: Array<number> = [1, 2, 3];

고정된 요소수 만큼의 타입을 미리 선언후 순서에 맞게 배열을 표현

let arr: [string, number] = ["hi", 10];
let tuple: [string, number];
tuple = ["hello", 10]; // OK
tuple = [10, "hello"]; // Error
tuple = ["hello", 10, "world", 100]; // Error
tuple.push(true); // Error

 

함수 

function 이름(파라미터: 타입) : 반환 타입 {
  return 코드
}

const 이름 = function(파라미터: 타입) : 반환 타입 {return 코드};

예)

function sum(a: number, b:number): number {
  return a + b;
}

const sum = function(a: number, b:number): number {return a + b};

화살표 함수로 타입 선언하기

type Add = (a: number, b: number) => number;

const add: Add = (a, b) => a + b;

 

등~~ 더 알고 싶다면 이 사이트 들어가 보는 것을 추천!!

 

---

타입을 미리 선언하고 불러오기

 - 위에 객체 또는 배열의 경우를 예로 들 수 있을 것 같다. 만약 playet의 객체 프러퍼티에 타임을 선언할 경우 사용자들 마다 선언이 되어야 하는데 그걸 수작업으로 하는 것은 불가능에 가깝다. 그래서 미리 묶고 불러오는 형태로 사용한다고 보면 될 것 같다.

 

type Player = {
  name:string,
  age?:number
}

const SeongWon : Player = {
  name:"성원",
  age:0
}