Day 09) 1. 이걸 쓰면 더 안전하다고? => typescript 2. 기존의 javascript 를 typescript 로 바꾸자!

송인호·2022년 5월 19일
0

dailyStudy

목록 보기
21/35

디폴트값 보여주기
수정하값 보여주기
defaultValue 초기값

수정할 때 입력을 안하면 빈칸으로 받을 때 방법.
1. mutation에서 제외하기
2. state 디폴트값에 props 넣기

1번을 쓰는 방법이 좋음
2번을 쓰게 되면 수정할 때 바꾸지 않아도 모두 들어가서 네트워크 비용이 더 많이 들어감

타입스크립트


string 값으로 지정해주면 변수aaa를 123으로 수정하려하면 안됨.

타입스크립트 예시

let aaa: String = "안녕하세요"
let bbb: number = 123
let ccc: boolean = true

interface IProfile {
	name: String;
    age: number;
 }
 
 let profile: Iprofile = { name: "철수", age: 13 }
 
 객체는 나만의 타입을 만들어야 한다.


관례는 객체타입 명에 profile을 만들려고 하면 Interface의 i와 profile을 가져와 IProfile과 같이 만든다.

타입스크립트 설치

tsconfig.json 파일 만들기

yarn dev -> yarn add --dev @types/react @types/node 설치 명령


3가지 설치가 완료되야 진행 가능

타입스크립트의 확장자명은 ts와 JSX를 사용하는 tsx를 구분해서 사용해줘야한다.
자바스크립트는 구분하지 않고 js로 통일해도 상관없다.

타입스크립트는 타입추론을 통해 변수값에 들어가는 초기값을 이용하여 타입을 추론한다.
명시를 항상 해주지 않해줘도 된다.

export default function TypescriptPage() {
  // 타입 추론 
  let aaa = "안녕하세요"
  aaa =3

  // 타입 명시
  let bbb: string = "반갑습니다"

  // 문자 타입
  let ccc: string
  ccc = "반가워요!!!
  ccc = 3

  // 숫자 타입
  let ddd: number = 10
  ddd = "철수"

  // 불린 타입
  let eee: boolean = true
  eee = false
  eee = "false" // js에서는 true로 작동함

  // 배열 타입
  let fff: number[]  = [1, 2, 3, 4, 5, "안녕하세요"]
  // let ggg: string[] = ["철수", "영희", "훈이", 10] 오류
  let ggg = ["철수", "영희", "훈이", 10] // 문자 또는 숫자가 들어 갈 수 있는 배열로 추론
  // 명시하지 않을시, (nimber | string)[] 타입으로 추론됨!

  // 객체 타입
  interface IProfile {
    name: string
    age: number | string
    school: string
  }
  const profile: IProfile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교"
  }
  profile.age = "8살" // 오류 타입이 추론될 당시에 number로 추촌됨

  // 함수 타입
  const add = (money1: number, money2: number, unit: string):  string => {
    return money1 + money2 + unit
  }

  const result = add(1000, 2000 , "원")


  return <div>타입스크립트 연습하기!!!</div>

}
profile
프론트엔드 개발자

0개의 댓글