민프
[React][TypeScript] typeScript 이란? 본문
https://www.typescriptlang.org/
JavaScript With Syntax For Types.
TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.
www.typescriptlang.org
이번엔 typeScript + styledComponents에 대한 포스팅을 해보려고 하는데
먼저 간단하게 typeScript에 대해서 설명을 해보자면
공식홈페이지에 의하면
TypeScript는 JavaScript를 기반으로 만들어져있어서 문법도 똑같다 뭐 Function이라던지, array, method 등등.. 만드는 방법이 같다. 여기에 새로운 기능만 살짝 추가된 것이다.
여기에 Strongly-typed라는 용어가 있는데
이것은 프로그래밍 언어가 작동하기 전에 type을 확인한다는 뜻이다.
javaScript는 Strongly-typed이 아니다.
따라서 javaScript는 어떤 타입인지 알지 못한다.
예를 들어서
const plus = (a,b) => a + b;
이렇게 정의하고
plus (2, "hi")
라고 하면 결과는 '2hi'가 나온다.이렇게 매게변수가 틀려졌을때 문제가 발생하는데 javaScript에서는 그것을 알려주지 못한다.
그래서 이러한 문제에 대한 안전장치가 있으면 좋겠는데
그것이 바로 typeScript이다.
공식홈페이지에 있는 예시를 보면
이렇게 user의 값에 name이 없는데 사용하게 되었을 때 자바스크립트에서는 undefined로 나오게 된다.
이런 것을 typeScript로 하게 되면
user.name은 존재하지 않는다고 말해준다.
그럼 아래 사이트에 가서 typeScript를 직접 사용해보자
TS Playground - An online editor for exploring TypeScript and JavaScript
The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.
www.typescriptlang.org
이렇게 type이 틀리게 되면 알아서 오류를 잡아주는 것을 확인할 수 있다.
그럼 브라우저는 어떻게 typeScript를 인식할까?
쉽게 말해보면 형식에 맞게 잘 작성해주면 브라우저는 사진과 같이 평범한 JavaScript이 되는 것을 확인할 수 있다.
다음 포스팅에서는 typeScript를 설치해보자
'[React]' 카테고리의 다른 글
| [React][TypeScript] type Props 적용해보기 (with interface, required props) (0) | 2023.01.24 |
|---|---|
| [React][TypeScript] typeScript 셋업하기 (0) | 2023.01.24 |
| [React] Style Components - 5 다크모드, 라이트모드 (Themes) (0) | 2023.01.23 |
| [React] Styled Component - 4 animation(keyframes), styled 컴포넌트 안의 다른 element 선택 적용 (0) | 2023.01.23 |
| [React] Styled Component - 3 다수의 컴포넌트를 다뤄보자 (attr) (0) | 2023.01.23 |
