사용이유

프로젝트가 커지면 커질수록 엄격하게 관리가 필요하다 (React에서는 한부분만 잘못되도 전체 랜더링이 안됨!)

각 변수 및 함수에 타입을 부여하여 관리 및 유지보수가 편함.

에러코드가 자바스크립트 보다 명확하여 어디서 에러가 발생했는지 찾기 쉬움.

설치방법

npm install -g typescript

Setting

create - index.ts , tsconfig.json

index.ts

자바스크립트의 index.js와 똑같은 페이지를 만듬.

tsconfig.json

index.ts를 index.js로 변환할때 무슨 버전을 설정하는 파일

{
	"compilerOptions": {
		"target": "es5", // 자바스크립트 버전으로 컴파일링해주세요!
		"module": "commonjs", 
	}
}

문법

자바스크립트에 타입을 추가해 좀 더 엄격하게 검사를 해줌

기존 자바스크립트 문법

let 변수 = "abcdefg"

타입스크립트 문법

let 변수 :string = "abcdefg" // 변수명 뒤에 타입을 설정해주어야한다!
변수 = 123 // 이렇게 적게되면 타입스크립트에서 바로 오류를 잡아줌.
// "변수에는 string만 들어 갈 수 있습니다!!!" 라고 오류가 나옴.

배열 및 객체 표현

let numArr : number[] = [1,2,3,4] // 타입 + 배열
let object : { name : string } = { name : 'kim'} 
		// 키값을 맞춰주고 벨류값에 들어갈 타입을 정해준다!
let object : { name? : string } = { name : 'kim'} 
		// name뒤에 ?를 써주면 키값에 name이 안들어올수도 있으니 '오류 아닙니다' 라고 적어주는 표현식

다양한 타입이 들어올수있을때 (union type)

let strAndNum : string | number = 숫자 , 문자열

같은 타입을 여러번 사용 해야할때 (type alias)

type Email = string | number

let 이메일 : Email = 'asdfgh'
// 타입을 지정할때는 맨앞에 대문자로!

함수에 변수값과 리턴값에 타입 설정하기 (숫자로 입력받아 문자로 리턴하고싶을때)

function ( x : number ) : string {
	return x * 10
}
// 매개변수가 들어가는 자리에 : type을 넣어주고 () 밖에 리턴값 type을 정해 줄 수 있다.

배열에 원하는 타입값만 받고싶을때 (array tuple 타입)

type Grade = [string,number] // 이렇게 선언하게되면 배열에 첫자리에는 문자열, 뒷자리에는 숫자

let gradeArr : Grade = ['김익현',100] 

객체값에 지정 해야할 속성이 많을때 (여러가지 문자열 키값에 대한 벨류)

type Name = {
	[key : string]: string, // 문자열로된 키값의 벨류는 문자열이다!
}

let myName : Name = {
	firstName : 'kim',
	lastName : 'ik hyun',
}