취업 준비 !

[코드잇 풀스택 1기] - TypeScript, d.ts

minsugar 2024. 11. 16. 14:59

TypeScript

타입스크립트는 자바스크립트에 정적 타입 기능을 추가한 프로그래밍 언어 Microsft에서 개발했으며, 자바스크립트로 컴파일이 가능하다.

확장된 문법과 강력한 타입 시스템을 통해 코드 품질과 유지 보수성을 크게 향상시킵니다.

 

하지만 단점도 있겠죠...?

처음 사용할떄 정말 정말 정말 어렵고, 대체 왜...? JS에서 잘 사용한다면 필요가 없지 않을까 ?? 라는 생각을 했지만

돌아오는 멘토님 답변은 : 대부분의 개발자는 JS -> TS로 넘어가길 원하지만 TS -> JS로 다시 넘어가려는 사람은 없다.

라는 답변을 들었습니다.

 

동작원리

1. 코드 작성

➡️ 개발자는 .ts 파일에 타입스크립트 코드를 작성합니다.

➡️ 타입스크립트는 자바스크립트 문법에 추가적인 타입 정보와 기능을 제공합니다.

 

2. 타입검사

➡️ 타입스크립트 컴파일러(tsc)가 코드 타입을 검사합니다.

➡️ 타입이 맞지 않거나, 잘못된 변수 사용이 있을 경우 컴파일 단계에서 오류를 출력합니다.

 

3. 컴파일

➡️ 타입 검사가 완료되면, 타입스크립트는 해당 코드를 순수한 자바스크립트 코드로 변환합니다.

➡️ 변환된 자바스크립트 코드는 브라우저 또는 Node.js 환경에서 문제 없이 실행됩니다.

 

4. 실행

➡️ 변환된 js 파일은 브라우저나 Node.js에서 실행됩니다.

➡️ 최종적으로 타입스크립트는 런타임에 영향을 미치지 않으며, 정적 타입 시스템은 개발 단계에서만 유효합니다.

 

주요기능

1. 정적 타입 시스템

➡️ 변수, 함수, 반환값 등 명시적인 타입 지정이 가능합니다.

➡️ 정적 타입 검사를 통해 타입 오류를 사전에 방지 할 수 있습니다.

 

2. 인터페이스

➡️ 객체의 구조를 정의하고, 코드의 일관성, 가독성을 높입니다.

 

3. 제네릭

➡️ 다양한 타입에 대해 재사용 가능한 코드를 작성할 수 있습니다.

 

4. 타입 추론

➡️ 타입스크립트는 명시적으로 타입을 지정하지 않아도 자동으로 타입을 추론합니다.

 

⭐ 장점

코드 품질 향상 : 정적 타입 검사로 버그를 사전에 발견 가능

유지 보수성 향상 : 명확한 타입 시스템 덕부넹 대규모 프로젝트에서 가독성이 좋고, 안정적인 코드를 작성 가능

도구 지원 강화 : VSCode와 같은 에디터에서 자동 완성, 타입검사, 리팩토링 도구가 더 좋아짐

기존 자바스크립트와 호환 : 자바스크립트 코드를 그대로 타입스크립트로 점진적으로 마이그레이션이 가능함.

 

⭐ 단점 

초기 학습 어려움 :  정말 어렵고.. 이해 못하는 부분이 생기지만, 추가적인 학습이 필요합니다. ㅎㅎ

컴파일 단계 추가 : 타입스크립트는 컴파일링 과정이 피룡하므로, 추가적인 개발 진행상황이 필요합니다.

타입 정의 관리 : 외부 라이브러리에 대한 타입 정의 파일을 관리 해야합니다.

 

나머지 기능들은 .d.ts에서 추가적으로 설명하겠습니다!

 

 

.d.ts

타입스크립트에서 타입선언을 위해 사용되는 파일입니다.

타입스크립트 프로젝트에서 외부 자바스크립트 라이브러리를 사요할 때 해당 라이브러리의 타입 정보를 제공하여 타입 안정성을 보장해주는 파일입니다.

 

정의 파일은 순수 타입 정보만 포함하며, 실제 실행 가능한 코드는 포함하지 않습니다.

 

왜 사용할까 ??

➡️ 타입 안정성 보장

자바스크립트 라이브러리나 모듈 타입스크립트에서 사용할 때, 해당 라이브러리의 타입이 명확하지 않으면 타입 오류가 발생할 수 있습니다.

파일을 통해 타입을 미리 정의하여 여러한 문제를 방지할 수 있습니다.

➡️ 개발 생산성 향상 

자동 완성, 타입 검사, 코드 인텔리전스 기능을 제공하여 개발 효율성을 높입니다.

➡️ 타사 라이브러리 지원

많은 자바스크립트 라이브러리들이 .d.ts 파일을 제공하거나, DefinitelyTyped와 같은 레지스트리에서 지원합니다.

 

어떤식으로 사용할까 ?

// lib.d.ts

declare module 'lib' {
exprot function greet(name :string): string;
export const version : stirng;
}

 

적용

improt { greet, version } from 'lib';

console.log(greet("minsu"));
console.log(version);

 

npm install --save-dev @types/lodash

타입 패키지를 사용하여, 자바스크립트 라이브러리에 대한 타입 정의는 DefinitelyTyped라는 오픈소스 레이즈스티리에서 제공 하고 있습니다.

 

타입 정의 파일 작성 시 주의 사항

⭐ 실제 코드가 아닌 타입 선언만 포함해야 합니다.

console.log, if, for는 포함하지 않습니다.

⭐ 타입 선언을 외부 모듈로 제한 하려면 declare module을 사용 합니다.

전역 니임스페이스를 오염시키지 않기 위해 피룡한 경우에만 사용합니다.

⭐ @type 레지스트리에서 기존 타입이 존재하는지 확인한 후, 없는 경우에만 직접 장석합니다.