TypeScript,, any는 그만,,,

이예음·2022년 8월 26일

타입스크립트

: 자바스크립트의 타입을 강제시키는 언어

기존 자바스크립트와 달리 타입스크립트에서는 변수의 자료형을 지정해주기 때문에 문자열을 할당한 변수에 숫자열 등 다른 타입을 넣을 수는 없다.

예)
let hello:string = "hello" 

// 재할당이 문자열만 가능합니다.
hello = "12345"

타입스크립트를 사용하는 이유와 방법

1. 에러의 사전 방지

자바스크립트는 타입이 엄격하지 않다.

변수의 변환이 자유롭다. 이게 혼자 할 때는 편해 보일 수 있지만, 실무에 가서 큰 서비스를 맡게될 때는 문제가 생길 수 있다.

밑에는 실제 사례이다.

💡 타입스크립트를 사용하지 않아 발생한 실제사례!
어떤 서비스에서 게시물을, 한 사람당 최대 5개까지 등록 가능하다는 조건을 걸어두었습니다.
그런데 한사람이 글을 5개 이상 작성한 것을 발견했고, 이유를 찾아보니 아래와 같았습니다.

자바스크립트에서 다음과 같은 실수를 범한 것 이었습니다. ⇒ '0'(문자열) + 1 + 1 + 1 + 1 + 1
(결과: '011111')

즉 문자열과 숫자열이 더해져서 위와같은 결과가 나온 것 입니다. 우리는 여기서 알 수 있 듯, 실무에서 타입을 강제하는 것이 얼마나 중요한 일인지 알 수 있습니다.

따라서, 타입스크립트는 각 변수에 한개의 타입만 넣도록 해 안전성을 높여준다.

2. 코드 가이드 및 자동 완성(개발 생산성 향상)

코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다.
VSCode는 툴의 내부가 타입스크립트로 작성되어 있어, 타입스크립트 개발에 최적화되어 있다!

사용방법
// 변수에 타입을 지정해주시면 됩니다.
let aaa : string = "안녕하세요"
let bbb : number = 123 
💡 객체 타입을 만들 때 가지는 네이밍 관례
→ interface의 I와 변수명 합치기
예시) 변수이름 : Profile이라면, 타입을 지정하는 객체는 IProfile

이렇게 타입스크립트를 이용해서 각 변수에 타입을 지정해주고 나면, 타입에 맞지 않는 값을 할당할 때 에러가 나게 된다.

타입스크립트 설치 및 세팅

yarn add typescript --dev

: typescript 설치

yarn add @types/react@17.0.2

: 타입-리액트 설치

yarn add @types/node@17.0.2 --dev

: 타입-노드 설치

설치 후 package.json 확인 → dependencies / devDependencies로 나뉘어져 있음

dependencies : 브라우저에 실행시에 필요한 목록

devDependencies : vscode에서(개발시) 필요한 목록

💡 라이브러리 하위 모듈 버전 고정하기
사용하고 있는 외부 라이브러리가 의존하는 모듈의 특정 버전으로 고정시키고 싶을 경우
yarn 패키지 사용 시 package.json 에 추가
{
	"devDependencies": {
		...
	},
	"resolutions": {
		"@types/react" : "17.0.2"
}
설치를 다했으면, typescript 설정 파일(tsconfig.json)을 만들어준다.(내용은 비워두기)

그 상태에서 yarn dev 명령을 실행하게 되면, next.js가 typescript의 설정 파일인 tsconfig.json을 감지하고, 파일에 기본 설정을 자동으로 채워준다.

tsconfig.json 파일에 내용이 생겼는지 확인하고, strict를 true로 바꿔준다.

타입스크립트 파일 확장자

💡 1. JSX(React의 HTML) 를 return 하는 컴포넌트 : tsx
2. 자바스크립트만사용하는 컴포넌트 : ts

타입스크립트를 사용할 땐 위의 확장자를 잘 구분해서 사용해야 한다.

타입 추론

파일의 확장자를 바꾸면서 기존의 자바스크립트로 작성한 부분이 타입스크립트 영역으로 바뀌게 된다.

그래서 변수에 타입을 먼저 입히지 않고 할당을 하게되면 타입스크립트는 할당된 값의 자료형을 타입으로 추론 하게 된다.

타입스크립트 배열과 객체

/* 배열타입 */
// 문자열만 있는 배열
let aaa:string[] = ["원두","은정","혜원"]

// 배열에 문자열과 숫자열을 같이 넣어두고 싶을 때
let fff:(string | number)[] = [1,2,3,"철수","영희"]

// 모두 숫자이거나 모두 문자인 배열
let hhh: string[] | nuber[] =[ "영희","철수" ]
hhh=[1,2,3]

/* 객체타입 */
interface Ipropfile {
		name : string
		age : number 
		school : string
	}
const profile:Ipropfile = {
		name : "원두"
		age : 8
		school : "코캠 초등학교"
	} 

//age의 타입이 문자열이거나 숫자열일 때
interface Ipropfile{
		name : string
		age : string | number
		school : string
	}
const profile:Ipropfile = {
		name : "원두"
		age : 8 or "8살"
		school : "코캠 초등학교"
	}