Javascript VS Typescript

Javascript란

웹 개발에 주로 사용되며, 웹 페이지를 대화식으로 만드는 프로그래밍 언어

• 클라이언트 측 스크립팅 언어
• 객체 지향 프로그래밍 지원
• 높은 수준의 코드 탐색과 디버깅
• 자바스크립트 호환

 

TypeScripte란

자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어

• 컴파일 언어, 정적 타입 언어
• 객체 지향 프로그래밍 지원
• 높은 수준의 코드 탐색과 디버깅
• 자바스크립트 호환

➡️ 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠름.

 

React Native에서의 코드 차이

변수 선언

// Javascript
const [ data, setData ] = useState([]);
const [ text, setText ] = useState('');
const [ number, setNumber ] = useState(0);

 

// Typescript
const [ data, setData ] = useState<{[key: string ]: any}>([]);
const [ text, setText ] = useState<string>('');
const [ number, setNumber ] = useState<number>(0);

Typescript : 다양한 변수 타입을 제공함.
boolean, number, string, object, array, void, null, never, undefined, tuple, any

any: 모든 데이터 타입을 허용
➡️ any를 사용하면 typescript를 사용하는 의미가 없다!
➡️ 왠만하면 사용하지 말자 !

 

컴포넌트 생성

// Javascipt
const Component = ({ data, setData }) => {
  return (
     <View>
    	...
     </View>
  );
};

// Typescript

type Props = {
   data : {[key:string]:any};
   setData : () => void;
}

const Component = ({ data, setData }:Props) => {
  return (
     <View>
    	...
     </View>
  );
};

Typescript: 타입을 지정해주기 때문에 오류를 쉽게 발견할 수 있음.