타입스크립트 공부를 시작하게 된 계기
: 그냥 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 타입으로 취급된다는 것이다.
덕타이핑의 장점은 유연성과 간결함이다. 객체가 특정 동작을 할 수 있으면 객체를 해당 타입으로 취급이 가능하기에
코드가 더 간결하고 명시적인 타입선언 없이도 잘 작동 가능하다.
이를 통해서 개발자는 불필요하게 타입을 강제하지 않고, 코드의 유연성과 확장성을 높일 수 있다.
----
자바스크립트와 타입스크립트는 호환성이 뛰어나, 기존 자바스크립트 코드에 타입스크립트를 점진적으로 도입할 수있다. 그리고 타입스크립트는 정적 타입 검사를 통해 오류를 예방하고 코드의 안전성과 그리고 유지보수성을 높여준다.
덕타이핑은 객체가 특정 동작을 할 수 있으면 그 객체를 해당 타입으로 취급하는 방식으로, 타입 선언 없이도 동작 기반으로 타입을 추론할 수 있다. 덕 타이핑은 유연성을 제공해주고 코드의 복잡성을 줄이는데 도움을 준다.
