✍🏻 [Code Camp_TIL] 9일차: Typescript

code_J·2023년 4월 1일

TIL

목록 보기

14/41

타입스크립트

숫자와 문자를 구분해서 변수에 담아주는 다른 언어들에 반해 자바스크립트는 둘을 구분하지 않고 변수에 담아준다. 변수나 상수를 만들면 문자를 넣었다가, 나중에 숫자를 재할당해주는 등 자유로운 변환이 가능하다.

이런 점이 코드를 짤 때에는 편리했지만, 큰 서비스를 여러 명이 개발하는 경우에 서비스의 안정성이 떨어질 수 있다. 따라서 변수의 타입을 지정하고, 재할당이 안되도록 하기 위해 타입스크립트가 나오게 되었다!

타입스크립트 사용 방법

변수명 뒤에 타입을 지정하면 된다.

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

객체

객체의 경우에는 Interface를 사용해서 지정해준다. 일반적으로 객체의 타입을 지정할 때에는 interface의 I와 변수명을 합쳐주는 것이 관례이다.

Interface IProfile{
  name: string;
  age: number;
}

let profile:IProfile = { name: "홍길동", age: 13}


// age 타입이 문자열이거나 숫자일 경우
interface IProfile{
  name: string
  age: string | number
}

const profile:IProfile = { name: "홍길동", age: 13 or "13살"}

props도 객체이기 때문에, 위와 같이 타입을 지정해주면 된다.

배열

//문자열만 있는 배열
let aaa:string[] = ["짱구", "유리", "훈이"]

//문자열과 숫자열
let bbb:(string | number)[] = [1, 2, 3, "맹구", "철수"]

//모두 숫자이거나 모두 문자인 배열
let ccc: string[] | number[] = ["짱아", "흰둥이"]
ccc=[1, 2, 3]

함수

파라미터의 타입도 지정해야 한다.

/* props를 주는 쪽 컴포넌트 */
// 파라미터의 타입 지정

const add = (a: number, b: number) => {
  return a + b;
};
return (
    // 컴포넌트의 JSX부분
    <Component add={add} />
  );

--------------------------------------------------------------

/* props를 받는 쪽 컴포넌트 */
// 함수의 타입 지정
// 리턴되는 값의 타입을 적용. 리턴되는 값이 없다면 void 적어주면 됨.
interface IProps {
  add: (a: number, b: number) => number;
}

const Component2 = (props: IProps) => {
  props.add(1, 2);
  return (
    //컴포넌트의 JSX부분
  );
};

onChange 이벤트 핸들러 함수

이벤트 함수의 파라미터(event) 타입을 지정해줄 때에는 ChangeEvent를 사용해주면 된다. ChangeEvent는 리액트에서 제공해주는 타입이기 때문에 import 해줘야 한다.

// HTML 태그가 무엇인지 적어줘야함
const onChangeMyWriter = (event: ChangeEvent<HTML inputelement>)=>{
			setMywriter(event.target.value)
	}

이렇게 변수에 타입을 지정해주고 나면, 타입에 맞지 않는 값을 할당했을 때 에러가 발생하게 된다!

여기서 잠깐!

브라우저는 HTML, CSS, 자바스크립트만 읽을 수 있는데, 타입스크립트는 어떻게 읽을까? 타입스크립트는 실행 시 자바스크립트로 변경(컴파일)되어 실행된다.

컴파일: 하나의 언어가 다른 언어로 변경되는 작업
트랜스파일: 동일한 언어에서 다른 버전으로 변경되는 작업

code_J

Web FE 개발자 취준생

이전 포스트

✍🏻 [Code Camp_TIL] 9일차: defaultValue

다음 포스트

✍🏻 [Code Camp_TIL] 9일차: Typescript

TIL

타입스크립트

타입스크립트 사용 방법

객체

배열

함수

onChange 이벤트 핸들러 함수

✍🏻 [Code Camp_TIL] 9일차: defaultValue

✍🏻 [Code Camp_TIL] 10일차: 타입스크립트 유틸리티 타입, API 응답 데이터 타입

0개의 댓글