Typescript with React 설치 및 기본 문법

Typescript React 프로젝트 생성

// typescript react 생성
npx create-react-app 프로젝트명 --template typescript

// npm typescript 전역설치
npm install -g typescript

생성된 디렉토리로 가보면 tsconfig.json file 이 생성되어 있는데, 없을 경우 설치

// tsconfig.json file 생성
tsc --init

tsconfig.json

{
  "compilerOptions": {
    "target": "es5", // 컴파일된 코드가 어떤 환경에서 실행될지 정의
    "module": "commonjs", // 컴파일된 코드가 어떤 모듈 시스템을 사용할지 정의
    "strict": true, // 모든 타입 체킹 옵션을 활성화
    "esModuleInterop": true, // 모듈 형태로 이루어진 파일은 es2015 모듈 형태로 불러올 수 있게 함
	"outDir": "./dist" // 컴파일된 파일들이 저장되는 경로를 지정
  }
}

Typescript 문법

// javascript 값에 대한 설정 값
let name:string = ‘kim’; 			// name이라는 문자열의 값만 받음
let name:number = 1; 				// name이라는 숫자의 값만 받음
let name:boolean = false; 			// name이라는 true/fasle의 값만 받음
let name:null = null; 				// name이라는 null의 값만 받음
let name:undefined = undefined; 	// name이라는 undefined의 값만 받음
let name:object = ‘kim’; 			// name이라는 오브젝트의 값만 받음
let name:string[] = ['kin']; 		// 배열인데 문자열의 값만 받음
let name:{name: string} = {'kin'};  // 오브젝트데 문자열의 값만 받음

// ? 설정에 대한 내용
let name:{name? :string} = {'kin'};  // 오브젝트데 문자열의 값이 들어올 수 있고, 아니고의 차이

// 문자로 받고 문자로 리턴
type Name = string | number;
let hi:Name = 123;
Function 함수(x :number) :number{
	return 
}

// tuyple type : 무조건 지정한 값의 순서대로 들어가야함
type Member = [number, boolean]; 
let John:Member = [123, true]