타입스크립트와 관련된 도서를 읽고, 인상적이었던 내용에 대한 회고록입니다.
1. 타입스크립트와 자바스크립트와의 관계
타입스크립트는 자바스크립트의 SuperSet 이다. 모든 자바스크립트는 타입스크립트가 될 수 있지만 그 역은 성립하지 않는다.
// 이 소스는 JS, TS 환경 모두 잘 동작한다.
function greet(name) {
console.log(`Hello ${name}`)
}function greet(name: string) {
console.log(`Hello ${name}`)
}위의 소스코드를 Node 로 실행시키면 함수 파라미터 부분에서 에러가 발생할 것이다.
타입스크립트 컴파일러를 자바스크립트 파일에 도입하기만 해도 얻을 수 있는 이점이 많다.
// 타입 추론 과정에 의해 String.prototype 에 존재하지 않는 메소드를 실행하려는 것을 감지했다.
const str = 'str'
str.toUppercase() // 'toUppercase' 속성이 'string' 형식에 존재하지 않습니다.// 타입 추론 과정에 의해 할당된 오브젝트의 인터페이스를 구성하여 유효하지 않은 접근을 감지했다.
const user = {name: 'SungJun', age: 28}
console.log(user.mame) // 'mame' 속성이 ... 형식에 없습니다.추론을 이용하는 방법도 좋지만 명확한 인터페이스를 정의하여 타입을 지정하는 것도 훌륭한 접근이다.
interface User {
name: string,
age: number
}
const users: User[] = [{User},{User},{User}]
users[0] // User.name , User.age Will Be Intellisenced By editor타입스크립트는 자바스크립트 런타임에 발생할 에러를 찾아내려 한다. 하지만 완벽하게 모든 에러를 찾아낼 수는 없다. 예를들어 함수의 지정된 파라미터보다 많은 파라미터를 입력하는 경우, 타입스크립트의 입장에서는 에러를 뿜어내지만 자바스크립트의 관점에서는 arguments 배열에 늘어날 뿐이다. 이것은 자바스크립트라는 동적 언어에 정적 언어의 성격을 입히는 과정에서 발생한 괴리라고 생각이 든다.
2. 타입스크립트 설정 이해하기
다음의 명령어로 타입스크립트 컴파일러를 설치해보자.
$ npm install typescript -g이후 tsc 명령어가 사용 가능해진다. tsconfig.json 파일을 만들어서 프로젝트에 타입스크립트를 도입할 때 정책을 지정할 수 있다.
$ tsc --inittsconfig.json 파일의 noImplicitAny, strictNullChecks 두가지 옵션만큼은 활성화 하여 프로젝트에 도입하도록 하자. noImplicitAny 필드의 옵션값이 false 경우 타입을 지정하지 않았을 때 자동적으로 any 로 설정하게 되는데 이런 경우 자바스크립트 파일로 작성한 결과와 다를 것이 없다. strictNullChecks 옵션을 사용하여 타입에 명시적으로 null 혹은 undefined 를 지정하지 않았을 때 에러가 발생하게 한다.
// noImplicitAny : false
function add(a,b) {
return a + b;
}
add('3', 5) // '35' 이것이 과연 우리가 기대한 결과일까요 ?
// noImplicitAny : true
function add(a: number, b: number): number {
return a + b;
}
add('3', 5) // 'number' 형식에 'string' 을 지정할 수 없습니다.// strictNullChecks : false
const num: number = null // OK.
// strictNullChecks : true
const num: number = null // Error.
const num: number | null = null // OK.3. 타입스크립트로 작성한 코드를 자바스크립트로 생성하는 것과 타입 지정은 독립적이다.
tsconfig.json 파일의 noEmitOnError 을 설정하지 않는 한, 타입 체킹에 오류가 있어도 자바스크립트 아웃풋을 생성할 수 있다.
정적 언어인 타입스크립트는 타입이나 클래스의 구분을 프로그래밍 단계에서 진행하여 오류를 표시해준다. 하지만 자바스크립트는 런타임에 instanceof 라는 키워드를 통해 프로토타입 체인을 방문하여 컨스트럭터를 조사한다. 타입스크립트로 런타임에 특정 인스턴스의 클래스를 구분해 줄 수 있는 방법은 없을까 ?
Class 문법을 통해 인스턴스를 생성하는 방향을 도입하게 되면 타입과 값으로 써 모두 사용할 수 있다.
class User {
name: string;
age: number;
constructor({name, age}){
this.name = name;
this.age = age;
}
}
new User('SungJun', '28') // Error.
new User('SungJun', 28) // OK.4. any 키워드는 지양한다.
any 키워드를 타입스크립트 환경 내에서 즐겨 사용하게 될 경우.
- 타입시스템을 통한 인텔리센스 기능을 이용할 수 없게 된다.
- 명확한 타입을 가질 수 없게 된다.
- 지정한 타입 네이밍을 통한 소스 코드의 시맨틱을 살려낼 수 없게 된다.
- 런타임에 버그가 발생할 확률이 높아지면서 회사에서 혼나게 된다.
