🔎 Generics, Any 와 다른 점 보통의 함수는 들어오는 인자와 나가는 리턴의 타입이 일정한 규칙을 이루며 같은 로직이 반복된다. function helloString(message: string): string { return message; } function helloNumber(message: number): number { return message; }반복을 줄이기 위해 모든 타입을 인자로 받고 리턴할 수 있는 any를 사용할 수 있지만 타입이 서로 일치하지 않을 수 있다는 문제가 있다. function hello(message: any): any { return message; } console.log(hello('Mark').length); // any의 length도..
📑 Classes Classes란 object(객체)를 만드는 blueprint (청사진, 설계도)라고 할 수 있다. 클래스 이전에 object를 만드는 기본적인 방법은 function이다. JavaScript에도 class는 es6 부터 사용 가능하지만 접근제어자 같은 몇가지 기능이 부족하다. typescript에서 OOP을 위한 초석으로 class의 여러가지 기능을 제공하고 있다. 또한 TypeScript 에서는 클래스도 사용자가 만드는 타입 중의 하나라고 할 수 있다. class Person {} const p1 = new Person(); console.log(p1);class Person { name; constructor(name: string) { this.name = name; } } co..
📜 Interfaces Interfaces란 어떤 타입을 만드는 방식인데 내부적인 것과 상관없이 외부적으로 드러나는 객체의 사용방식이 적힌 타입이다. function hello(person: { name: string; age: number; }): void { console.log(`안녕하세요! ${person.name} 입니다.`); } const p: { name: string; age: number; } = { name: 'Mark', age: 35 }; hello(p); // 안녕하세요! Mark 입니다. //Interfaces 사용하면 interface Person { name: string; age: number; } function hello(person: Person): v..
📑 Compilation Contex 컴파일 컨텍스트는 기본적으로 타입스크립트가 어떤 파일을 컴파일할 것인지, 자바스크립트로 변환할 때 어떤 옵션을 사용할 것인지 등을 판단하기 위해 쓰이는 문서라고 할 수 있다. 따라서 컴파일 컨텍스트에는 사용 중인 컴파일러 옵션에 대한 정보가 포함되어 있다. tsconfig.json에 적혀 있으니 tsconfig.json를 읽을 수 있는 것이 중요하다. 📑 tsconfig schema http://json.schemastore.org/tsconfig 에서 tsconfig.json 파일의 전체적인 스키마를 볼 수 있다. 타입스크립트 버전이 올라갈수록 점점 더 많아지고 있다. 최상위 프로퍼티에 대해 하나씩 알아보자 compileOnSave extends compileOpt..
🕶 작성자와 사용자의 관점으로 코드 바라보기 Type System 타입 시스템에는 다음과 같은 두 가지의 시스템이 있다. 컴파일러에게 사용하는 타입을 명시적으로 지정 컴파일러가 자동으로 타입을 추론 TypeScript와 JavaScript의 Type System 타입스크립트는 두 가지 시스템 모두 가능한데 기본적으로 타입을 명시적으로 지정할 수 있고 지정하지 않으면 타입스크립트 컴파일러가 자동으로 타입을 추론한다. 타입은 해당 변수가 할 수 있는 일을 결정하는데 자바스크립트는 함수 사용법에 대한 오해를 야기한다. 예를 들어 어떤 함수 안의 매개변수가 number타입이어야 하는데 string을 입력하면 NaN으로 출력이 된다. 즉, 사용자에게 오류가 있다는 것을 알려주지 않는다. // JavaScript ..
🤔 TS Types vs JS Types 타입스크립트의 타입과 자바스크립트의 타입을 먼저 비교해보자. 타입스크립트는 Static types로 개발 중간에 타입을 체크한다. 자바스크립트는 Dynamic types로 개발 단계가 아닌 런타임에 들어가야만 오류를 체크할 수 있다. 그래서 타입스크립트는 자바스크립트보다 한단계 먼저 오류를 체크할 수 있다는 장점이 있다. 📢 Type Annotation Type Annotation은 변수의 타입을 지정하는 것으로, 타입스크립트가 가진 고유의 기능이며 자바스크립트와는 차별된 기능이라 할 수 있겠다. 예를 들어 자바스크립트에서는 변수에 값을 할당하면 밑에서 임의의 다른 값을 다시 할당할 수 있다. 하지만 타입스크립트에서는 처음에 할당한 값의 타입과 같은 타입의 값만 ..
🌊 TypeScript TypeScript는 type을 추가하여 자바스크립트를 확장한 것으로 즉, 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어라고 할 수 있다. 코드를 실행하기 전 사전에 에러를 방지할 수 있고 코드 자동완성으로 코드를 수정하는데 들이는 시간을 줄여준다는 장점이 있다. 따라서 자바스크립트 코드의 품질과 개발 생산성을 높일 수 있다. 그런데 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해줘야 한다. 이 변환 과정을 컴파일(complile)이라고 부른다. 💧 TypeScript 설치하기 먼저 broswer(ex. chrome), node.js, nvm가 기본적으로 설치되어 있어야 한다. 1. 터미널에 npm init -y 입력 폴더 생성 후 vscode 터미널..