TypeScript

[TS] TypeScript Concept and Basic Knowledge

user-anonymous 2025. 5. 25. 15:52
728x90
더보기

타입스크립트 공부를 시작하게 된 계기

: 그냥 JS만 사용하여 주구장창 개발만 하였는데, 코드가 더 딥해질수록 변수의 정체성을 잃는 것은 물론... 타입에서 자유로운 영혼이 되버리니 버그를 종잡을 수 가 없게됐다. 그러던 도중 타입스크립트를 사용하게 되면 더 Typesafe적인 코드를 개발할 수 있다는 점을 알게되었다.

 

List

  • TypeScript and JavaScript
  • Duck Typing

 

- TypeScript and JavaScript

 

자바스크립트는 웹페이지에 생명력을 불어넣어주는 언어라 볼 수 있다. 예로 들면, 버튼을 클릭하거나, 페이지를 스크롤하며 일어나느 동작들이 자바스크립트 덕분에 가능해진다. 자바스크립트는 자유롭고 유연한 언어라 볼 수 있다. 하지만, 때때로 그 유연함이 오류를 발생할 가능성이 커진다. ( 예를 들면, 숫자 변수에 문자열 값을 넣는 것이 가능해진다.)

let age = 25
age ="나이" // 자바스크립트에선 에러발생 But 타입스크립트에선 Error!!

 

 

그러므로 등장한 것이 타입스크립트이다. 타입스크립트는 코드 작성시 더 명확한 규칙을 제공해준다. 

타입스크립트는 변수 선언 시 타입을 명확히 지정해야 하기에, 실수를 줄일 수 있다. 타입스크립트는 대형 프로젝트에서 특히 유용하다. 변수 타입을 명확하게 명시해줄 경우, 유지보수가 쉬워지고, 팀원 간 협엽 시에도 실수를 최소화 할 수 있다. 

 

타입스크립트는 자바스크립트와 호환성이 좋기 때문에, 개발자는 타입스크립트를 처음 시작할 때 기존 자바스크립트 코드를 그대로 사용하며 점차 타입을 추가할 수 있다. 그러므로 조금씩 타입스크립트의 장점을 누리며 개발이 가능하다.

 

- 타입스크립트 설치

npm install --save-dev typescript

 

- tsconfig.json 생성 ( 타입스크립트가 어떻게 컴파일되어야 하는지 설정 )

npx tsc --init

 

- tsconfig.json 설정 수정 

{
  "compilerOptions": {
    "allowJs": true,  // 자바스크립트 파일도 컴파일에 포함시킴
    "checkJs": false, // 자바스크립트 코드에 대한 타입 검사를 생략
    "outDir": "./dist", // 컴파일된 파일들이 저장될 디렉토리
    "target": "ES6"
  },
  "include": ["src/**/*"]  // 타입스크립트 및 자바스크립트 파일이 포함된 경로
}

 

allowJs 옵션을 true로 설정할 경우, 점차적으로 타입스크립트로 변환이 가능하다. 예를 들어 src/app.js 파일이 있으면, 이 파일을 그대로 사용할 수 있다. 이를 Typescript로 마이그레이션 작업을 진행할 경우에는 app.js -> app.ts로 바꾸고 타입을 추가하면 된다.

 

 

- Duck Typing

더보기

"오리처럼 걷고, 오리처럼 꽥꽥 소리내면, 그건 오리일 것이다.." 

=> 어떤 객체가 특정 행동을 할 수 있으면 그 객체는 그 행동을 수행하는 타입으로 간주한다..

=> 객체의 타입을 강제로 정의하지 않아도, 객체가 특정한 메서드나 속성을 가지고 있다면 타입이 맞다고 인정해준다.

 

 덕 타이핑은 타입스크립트에서 객체의 타입을 정의할 때 사용하는 개념 중 하나다

 객체의 형태가 아니라, 객체가 무엇을 할 수 있는지 에 따라 타입을 결정하는 방식이다. 즉, 타입을 명시적으로 선언하지 않아도 객체가 특정 동작을 할  수 있다면, 그 객체는 그 타입으로 간주하는 것이다.

 

interface Swimmer {
  swim: () => void;
}

function makeItSwim(thing: Swimmer) {
  thing.swim();
}

// 덕 타이핑이 적용된 예시
const duck = { swim: () => console.log("The duck is swimming!") };
const dog = { swim: () => console.log("The dog is swimming!") };

makeItSwim(duck);  // "The duck is swimming!"
makeItSwim(dog);   // "The dog is swimming!"

 

여기서 보면 duck과 dog는 Swimmer 인터페이스를 구현하지 않았지만, 둘 다 swim 메서드를 가지고 있기 때문에 makeItSwim 함수에 인자로 전달할 수 있다.

 

즉, 객체가 swim이라는 메서드를 가지고 있다면, 이는 Swimmer 타입으로 취급된다는 것이다.

덕타이핑의 장점은 유연성과 간결함이다. 객체가 특정 동작을 할 수 있으면 객체를 해당 타입으로 취급이 가능하기에 

코드가 더 간결하고 명시적인 타입선언 없이도 잘 작동 가능하다. 

 

이를 통해서 개발자는 불필요하게 타입을 강제하지 않고, 코드의 유연성과 확장성을 높일 수 있다. 

 

 

 

----

자바스크립트와 타입스크립트는 호환성이 뛰어나, 기존 자바스크립트 코드에 타입스크립트를 점진적으로 도입할 수있다. 그리고 타입스크립트는 정적 타입 검사를 통해 오류를 예방하고 코드의 안전성과 그리고 유지보수성을 높여준다.

 

덕타이핑은 객체가 특정 동작을 할 수 있으면 그 객체를 해당 타입으로 취급하는 방식으로, 타입 선언 없이도 동작 기반으로 타입을 추론할 수 있다. 덕 타이핑은 유연성을 제공해주고 코드의 복잡성을 줄이는데 도움을 준다.

 

 

 

 

728x90
반응형