타입스크립트 구성 옵션 (tsconfig.json) Typescript 프로젝트를 시작하면 tsconfig.json 파일을 만들어서 제공해야 한다. 참고로, 자바스크립트를 타입스크립트로 수정하거나, 별도의 타입 선언 추가 작업을 타이핑이라고 한다. compilerOptions 만들어진 타입스크립트 코드들을 자바스크립트로 변환하기 위해 어떤 옵션들이 세부적으로 필요한지 결정해주는 옵션 include 어떤 타입스크립트 파일들을 컴파일해서 자바스크립트로 변환할 것인지 그 파일에 대한 경로가 어디에 있는지 배열 데이터로 목록화해서 제공할 수 있다. exclude 최종적으로 자바스크립트로 컴파일하기 전에 제외할 파일이나 폴더의 경로를 명시할 수 있다. compilerOption이 매우 많아서, 아래 블로그를 참고..
TypeScript
패키지의 타입선언 - typescript에서 javascript의 모듈을 가져와 사용하려면 모듈의 타입을 선언해주어야 한다. - 모듈의 타입을 선언해주는 파일을 흔히 .d.ts 파일이라고 한다. - .d.ts 파일을 사용하는 방법에는 2가지가 있다. 1. dts 파일을 만들 때 패키지의 이름과 일치하도록 파일의 이름을 지정해주는 것. ex) lodash.d.ts 2. 만약 파일의 이름이 일치하지 않으면 아래처럼 삼중 slash 지시자의 참조 태그를 통해서 경로를 따로 명시해줄 수도 있다. 자바스크립트로 변환했을 때는 주석처리가 되기 때문에 큰 영향을 미치지 않는다. /// - 파일명에서 d는 declare를 의미한다. - .d.ts 파일에는 구현과 관련된 로직이 들어있는 것이 아니라 타입에 대한 내용만 ..
타입 내보내기 typescript 파일에서 어떤 특정한 타입을 export 키워드를 이용해 내보낼 수 있고, import를 이용해 가져다 쓸 수도 있다. Type export export interface Uuser { firstName: string lastName: string age:number isValid: boolean } export function getFullName(user: Uuser) { return `${user.firstName} ${user.lastName}` } Type import import { Uuser, getFullName } from './exportuser' const gohome: Uuser = { firstName: 'crust', lastName: 'chee..
제네릭 - 제네릭은 재사용성이 높은 컴포넌트를 만들 때 활용된다. 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다. - 그때그때 다른 타입의 데이터를 넣어주고 싶다면 제네릭 문법을 이용해 유연하게 사용할 수 있다. 제네릭 - 함수에서의 활용 interface Obj { x: number } type Arr = [number, number] // 함수를 사용해야할 때마다 오버로딩을 해주는 것은 번거롭다. 이를 generic으로 해결할 수 있다. // 처음 들어오는 값을 보고 타입을 추론한다. function toArray(a: T, b: T) { return [a,b] } // 명시적인 방법보다 typescript가 추론할 수 있는 상황을 만들어주는 것이 좋다. console...
클래스와 접근제어자 - TypeScript에서는 this로 접근할 수 있는 각각의 속성들은 constructor 함수가 만들어지기 전에 클래스 바디 부분에서 타입이 지정되어 있어야 한다. - 클래스 바디: 클래스가 선언되고 중괄호가 열린 곳부터 닫히는 곳까지의 영역 - 속성 부분의 타입은 constructor 함수 위에 있는 클래스 바디 부분에 명시 해주면 된다. - 접근 제어자 같은 경우에는 속성에서만 사용하는 것이 아니라 메서드에서도 사용가능하다. 접근제어자(Access Modifier) public - 어디서나 자유롭게 접근 가능, 클래스 바디에서 생략 가능하다. protected - 선언된 클래스나 해당 클래스에서 파생된 후손 클래스 내에서 접근 가능 private - 선언된 클래스에서만 접근 가..
오버로딩 함수의 모양이 같지만, 타입이 다른 경우 아래처럼 함수를 2개 만들어 사용하는 방법이 있다. function add1(a: string, b: string) { return a + b; } function add2(a: number, b: number) { return a + b; } add1('hello ','world'); add2(1,2); // add1('hello ',2); // 에러발생 // add2('hello ',2); // 에러발생 또 다른 방법으로 오버로딩을 사용할 수 있다. 오버로딩을 사용하는 법은 아래와 같다. function add(a: string, b: string):string // 타입 선언하는 부분 function add(a: number, b: number):n..
TypeScript에서의 this interface Cat { name: string age: number } const cat:Cat = { name: 'Lucy', age: 1 } function hello(this: Cat, message:string) { console.log(`hello ${this.name}, ${message}`) } hello.call(cat, 'you are pretty awesome!') 일반 함수에서의 this는 호출 위치에서 정의가 된다. 위 코드에서 this는 call 메서드 속 cat 객체 데이터를 기준으로 호출하고 있다. 이런 경우에, this 타입을 지정해줄 수 있다. 매개변수처럼 보일 수 있으나 함수 내부에서 사용할 수 있는 this 키워드의 타입을 지정해주..
타입 별칭 // 타입 별칭(Alias), 별명 // type 명령어를 이용해 사용가능 type TypeA = string; // string의 별명을 만들어주는 것 type TypeB = string | number | boolean; // 타입 별칭은 기본적으로 단일 타입보다는 유니온이나 intersection을 이용해 재사용을 하는 것에 사용 type User = { name: string age:number isValid: boolean } | [string, number, boolean] // 객체나 튜플로 지정 가능한 타입을 만들어줌 const userA: User = { name: 'siuuu', age:85, isValid: false } const userB:User = ['ronaldo'..
인터페이스 (interface) 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진, 새로운 타입을 정의하는 것과 같다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. // 인터페이스 (Interface) // 선택적 속성 - ? // 읽기전용 속성 - readonly interface Userr { // 파스칼케이스 name: string; age: number; // 읽기만 가능, 재할당 하려고 하면 에러 발생 isValid?: boolean; // name과 age는 필수인데, isValid는 선택적 속성임을 알려준다. // 있어도 되고 없어도 됨 } const Ronaldo: Userr= { name:'Ronaldo', age: 36, isValid: true }..
타입 가드(type guard) // 타입 가드 (Guard) // 에러가 발생할 수 있는 상황 자체를 코드 상에서 방어한다는 개념 function logText(el: Element) { console.log(el.textContent); } const h1El = document.querySelector('h1'); if (h1El instanceof HTMLHeadingElement) { logText(h1El) } 조건문 등을 이용해 타입 에러가 발생할 수 있는 경우를 방지하는 방법. 사실 이 방법은 비단 타입 스크립트에만 사용하는 것이 아니라, 다른 언어에서도 사용가능한 방법이다.
