React - TypeScript 기본 - 세팅 ~ 어떻게 타입을 입히는지

타입스크립트는 자바스크립트 문법을 그대로 이용할수 있지만, 타입 부분을 조금 업그레이드 해서 쓸수있는

JS의 업그레이드 버젼.

 

JS문제점

5 - "3" 하면 "3"을 알아서 숫자로 바꿔서 계산해준다
 - Dynamic Typing (편해보이지만, 프로젝트가 커지면 원하는 값이 없을때 에러찾기가 힘들다)

TS

5 - "3" 에서 error를 띄워준다.

 

설치

npm install -g typescript

 

파일뒤에 js나 jsx 말고 ts를 붙히면 타입스크립트 파일이 된다.

index.ts

 

config 파일 생성

tsconfig.json

파일안에 넣을거

{
    "compilerOptions" :{
        "target" : "es5",
        "module" : "commonjs",
    }
}

 

브라우저는 ts파일을 못읽고 js파일을 읽기때문에, ts파일을 js로 변환해야한다.

아래처럼 치면 된다.마치 scss가 css로 변환되는거랑 같다. 켜놓은 동안은 자동변환.

아까 위에서 만든 tsconfig.json 파일이 ts -> js 컴파일시 옵션을 설정할 수 있는 파일.

 

tsc -w

 

타입 입히는법

let _string :string = "kim"; // string 변수 선언
let _number :number = 0; // number 변수 선언
let _bool :boolean = true; // boolean 변수 선언
let _null :null; // null 변수 선언
let _undefined :undefined; // undefined 변수 선언
let _array :string[] = ['KIM', 'PARK']; // array 변수 선언

// 객체 변순 선언 name? 은 뒤에 key값이 이름이 들어올수도있고 아닐수도 있다
let _object :{name? : string} = {name : 'kim'}

// 다양한 타입이 들어 올 수 있게
let _diverse :string | number = 123;
_diverse = 'kim';


// 함수 타입    파라미터에 타입으 정하고 뒤에는 return값도 타입을 정해줄수 있다
const func = (_number : number) : number => {
    return _number + 1;
}

//array - tuple type, 배열에서 첫번째는 무조건 number, 두번째는 무조건 boolean이 나오게
type member = [number, boolean]
let junho :member = [10, true];

// 객체안에 속성을 너무 많이 지정해줘야할때
// 같은속성이면 이렇게 지정가능
type properties = {
    [key: string] : string,
}
let kim :properties = { name: 'kim', height: '120', male: 'true' }


// Class
class User {
    // 변수를 만들때 타입을 지정할수 있다
    name: String
    constructor(name){

    }
}