typescript

VS code에서 타입스크립트 프로젝트 생성방법

---

• 폴더 생성 후 폴더 안에서 터미널 실행
• 터미널에 npx create-react-app 프로젝트명 --template typescript 명령어 입력
• 생성이 완료되면 리액트 서버 실행명령어 입력 npm start

프로젝트 생성완료가 되고 리액트 서버를 실행하면 위의 메시지가 출력됩니다.

typescript?

---

자바스크립트는 자료형을 정의하지 않고 자유롭게 변수에 값을 넣어 코딩이 가능합니다. 즉, 코딩이 간략하고 코딩생산성이 증가하지만 코딩시 에러를 잡지 못하고 서비스때 심각한 오류가 발생합니다.

 

즉 자바스크립트의 자료형을 명시해서 코딩하게 해주는 JS의 확장 언어를 타입스크립트라 합니다.

 

// Basic.tsx : 자식 컴포넌트(typescript 적용된 버전)

// rfce

import React, { useState } from 'react'

// 새로운 객체타입(자료형) 정의한 파일 import

import IObject from './../types/IObject';

function Basic() {

    // TODO: 타입스크립트 기본 사용법 익히기

    // 타입스크립트 바인딩 변수

    // 사용법 : let [변수명, set변수명] = useState<자료형>(초기값);

    let [message, setMessage] = useState<string>("바인딩 변수 출력입니다.");

    let [num, setNum] = useState<number>(0);

    let [bflag, setBflag] = useState<boolean>(true);

    let [obj, setObj] = useState<IObject>({id: null, name:"green"});

    let [arr, setArr] = useState<Array<number>>([1, 2, 3, 4, 5]);

    let [objArr, setObjArr] = useState<Array<IObject>>([{id: null, name: "green"}]);

   

    // TODO: 1) 기본자료형 : 문자열(string), 숫자(number), 참/거짓(boolean), 객체(따로정의)

    // 타입스크립트 일반 변수 정의

    // 사용법 : let 변수명: 자료형 = 값;

    let message2: string = "일반 변수 출력입니다."; // 문자열

    let num2: number = 1; // 숫자형(실수, 정수 모두 포함)

    let bflag2: boolean = false; // 참/거짓(bool, boolean)

    // TODO: 객체는 자료형을 개발자가 따로 정의해서 사용함

    // 사용법 let 변수명: 정의한객체파일명 = {속성:값...};

    // IObject = {id?: any(null제외한 어떤 자료형도 가능) | null, name: string(문자열만 가능)}

    // id는 모든 자료형 허용 또는 null 자료형도 허용 / name은 문자열만 허용

    let obj2: IObject  = {id: null, name:"green2"};   // 객체(object)

    // TODO: 2) 유니온 사용법 : let 변수명: 자료형(type) | 자료형2 ...

    let num3: number | string = 1;

    let num4: number | string = "hello";

    // let num5: number | string = true; // 에러 발생

    // TODO: 3) 옵셔널(?) : 객체의 속성이나 함수의 매개변수에 사용가능

    // TODO: 사용하면 오류없이 실행되게 함(자료형 | undefined 더 붙은 것과 같은 의미)

    function hello(name?: string) {

        console.log(`안녕하세요 ${name}`);

    }

    // 함수의 사용

    hello("홍길동"); // 안녕하세요 홍길동

    hello();        // 안녕하세요

    // TODO: 4) 배열 : let 변수: Array<자료형 | 자료형2 ...>

    // TODO: 변수 및 함수 사용 시 반드신 정의된 자료형의 값으로 사용하게 강제함

    let arr2: Array<string> = ["a", "b", "c"];     // 문자열 배열

    let arr3: Array<any> = [1, 2, 3];              // 모든 자료형 사용가능

    let arr4: Array<number> = [1, 2, 3];           // 숫자형 사용가능

   

    // TODO: 객체 배열

    let objArr2: Array<IObject> = [{ id: 1, name: "green2"}]; // JSON 문서 형태(객체배열)

  return (

    <div>

        문자(일반) : {message2}<br/>

        문자(바인딩) : {message}<br/>

        숫자형(일반) : {num2}<br/>

        숫자형(바인딩) : {num}<br/>

        boolean형(일반) : {bflag2? "참":"거짓"}<br/>

        boolean형(바인딩) : {bflag? "참":"거짓"}<br/>

        객체형(일반) : {obj2.name}<br/>  

        객체형(바인딩) : {obj.name}<br/>  

        배열(일반) : {arr2}<br/>  

        배열(바인딩) : {arr}<br/>

        {/* 객체배열은 반복문으로 출력 : .map((value, index)=>{}) */}

        객체배열(일반) : {objArr2.map((value)=>value.name)}<br/>  

        객체배열(바인딩) : {objArr.map((value)=>value.name)}<br/>  

    </div>

  )

}

export default Basic

객체형의 경우 개발자가 따로 정의를 해주어야 합니다.

 

// types폴더 > IObject.ts 객체 자료형을 정의하는 파일

// TODO: 타입스크립트 파일명 종류 : .tsx(jsx표현식을 사용한 js), .ts(jsx 표현식을 사용 안 한 js파일)

// TODO: 리액트의 JSX(Javascript and XML) : {값}

// 사용법

// export default interface 객체자료형명 {

//                  속성 : 자료형 | 자료형2 ...,

//                  속성2 : 자료형

// }

// 속성? : 옵셔널(?) : 속성이 없어도 오류 없이 실행되게 해줌

// 예) let obj: IObject = { name: "홍길동"}

//    obj.id (결과는 오류로 출력되지만 에러없이 프로그램이 실행되게 해줌)

export default interface IObject {

    id?: any | null,

    name: string

}

 

연습문제

---

// BasicExam.tsx : 자식컴포넌트

import React from "react";

import { useState } from "react";

function BasicExam() {

  let [message, setMessage] = useState<string>(

    "안녕하세요 그린컴퓨터아카데미입니다."

  );

  let [message2, setMessage2] = useState<string>("아래는 곱셈 샘플입니다.");

  let [message3, setMessage3] = useState<string>("곱셈");

  let [num, setNum] = useState<number>(2);

  let [num2, setNum2] = useState<number>(3);

  let [result, setResult] = useState<number>(num * num2);

  return (

    <div>

      {/* 아래 처럼 바인딩 변수를 사용해서 화면 출력을 하되 타입스크립트 코드를 적용하여 출력하세요

        단, 문자는 string , 숫자는 number 를 사용해서 코딩하세요

        */}

      {/* 결과 :

                안녕하세요 그린컴퓨터아카데미입니다.

                아래는 곱셈 샘플입니다.

                곱셈

                2 * 3 = 6

               

         */}

      {message}

      <br />

      {message2}

      <br />

      {message3}

      <br />

      {`${num} * ${num2} = ${result}`}

      <br />

    </div>

  );

}

export default BasicExam;