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

특징

자바스크립트는 동적 타입이어서 런타임에 오류를 발견할 수 있는 것에 반해
타입스크립트는 정적 타입 컴파일 언어로써 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 타입을 미리 결정하기에 실행 속도가 매우 빠릅니다

또한 자바스크립트 기본 문법에 타입스크립트라는 문법을 추가한 언어이기에 .js를 .ts로 변경해서 사용할 수 있습니다, 그리고 ES6에 추가된 문법을 포함하고 있으며 객체지향 프로그래밍 패턴을 지원합니다

설치

npm install -g typescript

tsconfig.json 생성 후 아래 코드 복붙

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

// 자바스크립트로 자동 변환
tsc -w

리액트에 설치시

• 기존 프로젝트에 설치
  해당 작업폴더경로로 터미널 오픈 후

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

• 새로운 프로젝트에서 설치

npx create-react-app my-app --template typescript

타입

타입종류도 여러가지가 있습니다
string, number, boolean, null, undefined, bigint, [], {}, 등

타입 지정은 밑 예시와 같습니다

let 변수명 :타입 = '내용';

let name :string = 'LEE';
let name :string[] = ['LEE', 'SUGNHUN']; // string만 있는 배열 타입
let name :{ name? : string } = { name : 'Lee' } // name 속성은 옵션이다를 표시
let name :string | number = 'lee'; // string or number

// 아래 함수는 파라미터로 number, return 값으로 number
function 함수(x :number) :number {
	return x * 3;
}

만약 함수에서 아무것도 반환하지 않아야된다면 void로 설정하면됩니다

function 함수(): void {
	대략함수내용
}

타입을 변수에 담아쓸 수 도 있습니다
타입은 대문자로 시작합니다

type Mytype = string | number

// tuple 타입
type Member = [number, boolean];
let Lee:Member = [11, false]; // [첫번째는number, 두번째는boolean];

// 모든 object 속성
type Objects = {
	[key :string] : string,
}
let lee : Objects = { name : 'Lee', age : '26' }

파라미터 뒤에 ?을 붙힌다면 optional한 상태가 됩니다

const sample = (a, b, c?) => {
	console.log('c is optional parameter');
}

React

props

interface로 props에 대한 정의를 할 수 있습니다

interface NavProps {
	handleToFirst: any;
}

component

함수형 컴포넌트를 뜻하는 React.FC를 붙혀준다

const Example: React.FC<interface명> = () => {
	....
}

참조

https://www.samsungsds.com/kr/insights/TypeScript.html
https://codingapple.com/unit/how-to-install-typescript-in-local-vue-react/