Typescript 시작하기

Typescript란:

자바스크립트의 var 와 같은 자료형 대신, string, number와 같은 자료형을 지정함으로써 안정성을 확보하고 TypeScript를 설치할 때 같이 설치되는 tsc(TypeScript Compiler)는 **컴파일 과정**에서 타입 검사를 통해 에러 없이 안정성이 확보되면 타입들을 제거하고 최종적으로 자바스크립트 코드를 생성한다

 

컴파일 = 타입검사  +  런타임 = javascript 코드로 변환

 

jsx:

react 에서 component를 생성하는 javascript문법이 사용하기 어렵거나 가독성이 떨어지기 떄문에 이를 간편하게 표현해주는 표현식이다

 

jsx문법

import React from 'react';

const App  = () =>{
  return( 
    <h1 title= "hello" style = {{color: "red"}} > tech hello </h1>
  )
}

jsx -> javascript로 변환된 문법

 

**** 아래의 javascript문법을 직접 사용하기도 하므로 익혀두는 것이 좋다 ****

"use strict";

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const App = () => {
  return /*#__PURE__*/_react.default.createElement("h1", {
    title: "hello",
    style: {
      color: "red"
    }
  }, " tech ");
};

변수타입 지정:

age 라는 변수에 number 타입을 지정함

let age: number = 10;

 

type alias:

type을 다른이름으로 치환하여 변수에 의미를 깊게 부여하는 용도로 사용

**Age라는 타입을 새로 만들고 number의 타입을 부여한다** - number타입을 alias하여 Age로 치환하여 사용

type Age = number

let age: Age = 20;

type Foo = {
    age: number;
    name: string;
}

const foo: Foo = {
    age = 10,
    name:"kim"
}

interface:

type alias와 똑같은 기능을 가지고 있고 자식으로 상속이 가능하다는점이 차이점이다.

interface Bar {
	age: number;
	name: string;
}

const bar: Bar = {
	age:10,
	name"kim"
}

REACT 프로젝트 만들기

npm create react-app 프로젝트명 --template typescript

또는

yarn create react-app 프로젝트명 --template typescript

 

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';

interface AppProps {
  title: string;
  color: string;
}

const App = ({ title, color }: AppProps)=> {
  return (
    <h1 style = {{color: color}}>{title}</h1>
  )
};

ReactDOM.render(
  <React.StrictMode>
    <App title="tech Hello" color="red" />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

yarn start