[새싹(SeSAC) 프론트엔드] day43 221214

 

📍TypeScript 

: 타입이 있는 자바스크립트

- 타입을 명시하여 혹시 일어날 수 있는 문제점을 예방

function makePerson (name, age) {}
makePerson("철수", "20") // 숫자가 문자 형태로 들어가서 연산이 제대로 되지 않음

function makePerson(name : string, age : number) {}
makePerson("철수", "20") //error!! 

 

◼️ 특징

▪️ 변수 값에 데이터 타입 지정이 가능 

- 예측 가능한 코드 작성 가능

- 디버깅 편리 

▪️ 객체지향 프로그래밍 가능 

- ES6부터 사용가능한 클래스 기능을 제공 (TS가 ES6 다음에 나왔으므로) 

 

▪️ 확장자가 .ts 

➡️ 자바스크립트(.js)로 컴파일을 해줘야 함

 

$ npm install -g typescript

//버전 확인
$ tsc --verion

 

*mac에서 npm install -g typescript 실행시 에러가 난다면 

https://blog.sonim1.com/125

[TIP] MAC에서 node install 시 권한 오류 발생 할때

➡️ 전역으로 설치해서 나는 오류여서 sudo로 설치하면 됨

 

** React + TypeScript 프로젝트 생성 

$ npx create-react-app type-app --template typescript

 

 

 

 

App.tsx 이지만 정상적으로 잘 실행됨

 

📍타입스크립트 기본 타입

Type	Javascript	Typescript
숫자	Number	number (소문자)
문자열	String	string(소문자)
boolean	Boolean	boolean(소문자)
객체	Object	object (소문자)

 

 

📍타입 주석 (type annotation)

: 초기화/선언 할 때 타입을 지정해 주는 것. 

let 변수이름: 타입;

let 변수이름: 타입 = 초기값;

const 변수이름: 타입 = 초기값;

let a: number = 1;
let b: string = "hello";
let c: boolean = true;
let d: object = {};

 

function App() {
  let a: number = 1;
  let b: string = "hello";
  let c: boolean = true;
  let d: object = {};

  a = "number";
  b = 1;
  c = 2;
  d = "";

  return <div></div>;
}

 

* 예시

  let a: number = 1;

  a = 4;
  console.log(a);

 

 

 

 

📍타입 추론 (type inference)

: 변수 선언문에 타입 주석을 명시하지 않은 경우 

- 대입 연산자(=)의 오른쪽 값을 분석해 왼쪽 변수의 타입을 결정

- 이후 각 변수에는 해당 타입의 값만 저장 가능 

 

  let a = 1;

  a = "number"

 

 

 

📍any 타입

: 값의 타입과 무관하게 어떤 종류의 값도 저장할 수 있음 

let a: any = 0

a = "hello"
a = true
a = {}

 

 

  let test: any = 1;
  console.log("선언 : ", test);

  test = "number";
  console.log("문자로 변경 : ", test);
  test = 10;
  console.log("숫자로 변경 : ", test);

➡️ : any 를 쓰면 굳~~이 타입스크립트를 사용할 의미가 하나도 없으므로 지양 

 

 

📍union 타입 

: 하나의 변수에 여러 개의 타입을 지정할 수 있음 

 

  let text: string | number;

  text = "10";
  console.log(text);

  text = 20;
  console.log(text);

 

 

 

📍타입 별칭(Tpye Aliases)

: 기존에 존재하는 복잡한 타입을 저장하여 새로운 타입으로 생성하는 기능 

여러 개의 "타입"을 묶어놓은 집합체를 만들어서 여기저기 가져다 쓰는 개념 

type 새로운 타입 = 기존타입

 

  type personType = {
    name: string;
    age: number;
  };

  let people1: personType;
  people1 = { name: "철수", age: "20" };

 

➡️ age가 숫자로 타입이 지정되어 있는데 문자를 넣어줘서 에러가 남 

 

** 타입스크립트는 오직 ❗️타입❗️을 지정해준다는 기능에만 초점을 맞춰서 생각할 것! 

 

 

 

📍타입 가드(Type Guard) - typeof 

 : union 타입을 사용할 경우, 자바스크립트의 typeof 연산자를 이용하여 코드 검증을 수행하는 것을 의미

 

  type priceType = string | number;
  let totalPrice: number;
  let itemPrice: priceType = "1000";

  totalPrice = itemPrice;

타입이 맞지 않아서 오류가 남 

 

 

  type priceType = string | number;
  let totalPrice: number;
  let itemPrice: priceType = "1000";

  // totalPrice = itemPrice;
  if (typeof itemPrice === "string") {
    totalPrice = 0;
    console.log("itemPrice가 문자열일 때 : ", totalPrice);
  } else {
    totalPrice = itemPrice;
    console.log("itemPrice가 문자열이 아닐 때 : ", totalPrice);
  }

 

 **union으로 타입은 string 아니면 number이기 때문에 else 는 무조건 number만 가능 

  type priceType = string | number;
  let totalPrice: number;
  let itemPrice: priceType = true;

  // totalPrice = itemPrice;
  if (typeof itemPrice === "string") {
    totalPrice = 0;
    console.log("itemPrice가 문자열일 때 : ", totalPrice);
  } else {
    totalPrice = itemPrice;
    console.log("itemPrice가 문자열이 아닐 때 : ", totalPrice);
  }

if-else에서 string이나 number가 아닌 다른 타입이 올 수 없는 것은

itemPrice에 값을 할당할 때 타입을 priceType을 이용해서 지정해주기 때문.

타입 별칭을 사용해서 지정해놨기 때문에 string이나 number가 아닌 값은 처음부터 넣어줄 수 가 없음 

 

 

📍열거형(Enum)

: 서로 연관된 아이템들을 함께 묶어서 표현하는 자료형 

ex. 요일, 성별, 계절 

 

enum SeasonType {
    Male, 
    Female
}

 

 

  enum genderType {
    Male,
    Female,
  }

  let person: {
    name: string;
    age: number;
    gender: genderType;
  };

  person = {
    name: "철수",
    age: 20,
    gender: "여자",
  };

gender에는 genderType만 올 수 있으므로 gender에 문자 "여자"를 넣을 수 없음 

 

 

  enum genderType {
    Male,
    Female,
    Dob
  }

  let person: {
    name: string;
    age: number;
    gender: genderType;
  };

  person = {
    name: "철수",
    age: 20,
    gender: genderType.Dob,
  };

genderType.@@의 값이 배열형태로 되어있고 해당 값의 index가 출력됨 

 

  let person: {
    name: string;
    age: number;
    gender: "MAle" | "Female";
  };

  person = {
    name: "철수",
    age: 20,
    gender: "Female",
  };

 

 

function 함수이름 (매개변수1: 타입1, 매개변수2: 타입2): 반환값_타입 {
     // 실행문
}

 

 

**매개변수와 반환값 타입이 맞지 않으면 에러가 남 

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

  let result = add(1, 2);
  console.log(result);

 

 

 

** 배열값을 넣을 수도 있음 

  function add(a: string, b: string): string[] {
    return [a, b];
  }

  let result = add("hello", "john");
  console.log(result);

 

 

 

** void 

: 아무것도 반환하지 않는 함수의 반환 값으로만 사용되는 타입 

  function add(a:string, b:string ) : void{
    console.log(a, b);
  }

  add ("철수", "영희");

 

 

📍선택적 매개변수

 

fucntion add(a: string, b? : string) : void {
	console.log(a, b);
}

add("Hello");

 

 

* 매개변수가 여러 개 이고, 일부 매개변수만 선택적 매개변수인 경우

➡️ 선택적 매개변수는 반드시 필수 매개변수 '뒤'에 위치해야 함 

  function add(a?: string, b: string): void {
    console.log(a, b);
  }

  add("Hello");

 

 

** 매개변수가 2개 이상일 때 

  function test(a: string, b: number, c?: string, d: string) {
    console.log(a, b, c, d);
  }

  test("철수", "영희", "민아")

 

 

➡️ 선택적 매개변수는 모든 필수매개변수 뒤에 놔야함 

 

  function setUser(
    id: string,
    name: string,
    age?: number,
    address?: string
  ): void {
    console.log(
      `ID : ${id} | Name : ${name} | Age : ${age} | Address : ${address}`
    );
  }

  setUser("admin", "철수");
  setUser("admin", "철수", 20);
  setUser("admin", "철수", 20, "seoul");

 

 

📍 기본 매개변수

매개변수가 선택적 값일 때 undefined가 싫다면, 기본값을 지정해 줄 수 있음 

- 선택적 매개변수의 '?' 를 지우고 ' = value ' 를 넣어주면 됨 

  function setUser(
    id: string,
    name: string,
    age: number=10,
    address: string="서울"
  ): void {
    console.log(
      `ID : ${id} | Name : ${name} | Age : ${age} | Address : ${address}`
    );
  }

  setUser("admin", "철수");
  setUser("admin", "철수", 20);
  setUser("admin", "철수", 30, "seoul");

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅(수)