TIL[9일차].타입스크립트 시작

남예지·2022년 11월 10일

TIL

목록 보기

5/47

다른언어를 해보고 자바스크립트를 해보면 쉽다라는 느낌을 받을 수 있습니다.
다른언어는 변수 설정 시 타입을 정해서 넣는데 자바스크립트는 let에서 타입을 다 넣을 수 있습니다. 그래서 처음에는 편하지만 큰 프로젝트 시 에러가 많이 나는 문제가 발생하였습니다. 그래서 타입스크립트가 나왔는데요. 변수에 숫자 또는 문자만 들어갈 수 있게 정해주는 것입니다. 변수 뒤에 타입을 붙여주는 것입니다. 요즘에는 타입스크립트를 많이 사용합니다. 그래서 이번시간에는 타입스크립트를 공부해보겠습니다.

수정하기에 들어가면 내용이 다시 다 비워져있는데 입력했던 초기값이 보여지면 좋겠습니다. 초기값 보여주기 업데이트와 변경된 값만 전송하기 두개를 수정하기에 추가해보겠습니다.

변경된 값만 전송하면 좋은 점은 트레픽을 아낄 수 있다.

초기값 보여지기

defaultValue={props.data?.fetchBoard.contents}

writepresenter에 값이 들어가는 인풋태그 안에 넣어줍니다. 이를 위해서는 패치보드로 data를 router해야합니다.

변경된 값만 전송하기

const onClickEdit = async () => {
    const myVariables = { number: Number(router.query.number) };
    if (writer != "") myVariables.writer = writer;
    if (title != "") myVariables.title = title;
    if (contents != "") myVariables.contents = contents;
    try {
      const result = await updateBoard({
        variables: myVariables,
      });
      console.log(result);
      router.push(`/09-01-boards/${result.data.updateBoard.number}`);
    } catch (error) {
      alert(error.message);
    }
  };

수정하기 onClick시 빈칸에 데이터가 있으면 넣어주고 없다면 그냥 빈칸으로 넣기

타입스크립트

자바스크립트의 타입을 강제하는 언어

기존 : let aaa = "안녕하세요"
타입스크립트 : let aaa:string = "안녕하세요"

보다 안전한 코드를 작성할 수 있습니다.

타입스크립트가 꼭 있어야 함.

사용법입니다.
객체는 Interface를 적어주고 이대로 하지 않으면 에러가 납니다.

타입스크립트 설치

프로젝트에 설치하고싶다면

yarn add typescript --dev

원하는 파일에 들어가 터미널창에 입력해줍니다.

버전을 기존 17버전으로 맞춰주어야 합니다.
그리고 node.modules, yarn.lock 파일을 삭제하고 yarn install을 터미널에 입력해서 재설치하고 yarn dev를 터미널 창에 입력하고 tsconfig.json에 내용이 자동으로 들어갑니다.

타입스크립트는 vscode가 검사 후 실행할 때에는 자바스크립트로 바뀌어서 브라우저에서 실행됩니다.
브라우저는 타입스크립트를 실행하지 못하기 때문입니다.

확장자 ts와 tsx의 차이

리액트 전용 HTML은 JSX라고 불렀다.
사실 JSX가 포함되면 파일 뒤에 .jsx라고 붙여야했다.
지금은 js만 써도 확인이 가능하기때문에 js라고 썼다.

하지만 타입스크립트는 아직 구분을 해주어야한다.
그래서 html이 포함되면 tsx라고 붙여준다.

JSX 를 return 하는 컴포넌트 : tsx

자바스크립트만사용하는 컴포넌트 : ts

타입스트립트는 타입추론도 가능합니다.
타입을 적어주지 않으면 알아서 처음들어간 데이터로 추론을 합니다.
타입 추론과 타입 명시
일반적으로 타입 추론을 하지만
타입을 명시해야될 때가 있다.

// 타입명시가 필요한 상황
let ccc = 1000

타입스크립트가 에러를 현저히 줄여준다.

타입스크립트 실습

// 타입추론
let aaa: string ="안녕하세요"

// 타입명시
let bbb: string ="안녕하세요"

// 타입명시가 필요한 상황
let ccc: number | string = 1000
ccc = "1000원"

// 숫자타입

let ddd: number = 10
ddd = "철수"  // 에러

// 불린타입

let eee: boolean = true
eee = false
eee =  "false" // 실제로는 true로 작동한다.

// 배열타입

let fff: number[] = [1, 2, 3, 4, 5, "녕하세요"]  //에러
let ggg: string[] = ["철수", "영희", "훈이", 10]  //에러
let hhh: (string | number)[] = ["철수", "영희", "훈이", 10]

// 객체타입

const profile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교"
}
profile.name = "훈이"  // 타입추론으로 원래 값 변경만 가능
profile.age = "8살"  // 에러 // 되게 하려면 타입명시를 해야한다. 
// 추가도 이런식으로 안됨 
profile.hobby = "수영하기" // 에러
interface IProfile {
    name: string
    age: number | string
    school: string
    hobby?: string   //있어도 되고 없어도 되는 항목은 ? 를 붙여준다.
}
const profile2: IProfile = {
    name: "철수",
    age: 8,
    school: "다람쥐초등학교"
}
profile2.name = "훈이"  // 타입추론으로 원래 값 변경만 가능
profile2.age = "8살"  // 에러 // 되게 하려면 타입명시를 해야한다. 
// 추가도 이런식으로 안됨 
profile2.hobby = "수영하기" // 에러

// 함수타입 => 어디서 몇번이든 호출 가능하므로, 타입추론 할 수 없음(반드시, 타입명시 필요)

    function add(num1: number, num2: number, unit: string): string{
        // return num1+ num2 + unit
        return 5000  // 에러
    }
    const result = add(1000, 2000, "원") // 결과의 리턴 타입도 예측 가능
    add(1000, "원", true) // 에러

//화살표 함수

	function add2 = (num1: number, num2: number, unit: string): string => {
        return num1+ num2 + unit
    }
    const result = add2(1000, 2000, "원")

// any 타입

let qqq: any = "철수" // 자바스크립트와 동일!

객체안에 객체

interface MySchool {
school1:string
school2: string
}
interface IProfile {
name: string
age: number | string
school: MySchool
hobby?: string
}
const profile2: IProfile = {
name: "철수",
age: 8,
schooㅣ:{
school1:"다람쥐초등학교"
school2: "공룡초등학교"
}
}