TypeScript (22) 썸네일형 리스트형 TypeScript 편하게 사용하기 인터페이스 생성 - transform.tools 기존 자바스크립트 코드를 타입스크립트로 수정하거나 별도의 타입 선언을 추가하는 작업을 할 경우 인터페이스를 생성하여 해당 인터페이스로 타입을 명시해주는 경우가 많습니다. JSON to TypeScript Cadence struct to Go struct transform.tools transform.tools를 사용하면 편하게 데이터 기반 인터페이스 생성이 가능합니다. 사용법 { photo: "https://w.namu.la/s/401a6229d082812558c9839860bfae5f1593d144e839c71196bd081fb77cfe39c9ae00743f5990a6baf2d3d6f8fccc1cedadfc039d73cd0271054a1423ca0f497.. 타입 스크립트 구성 옵션 타입 스크립트의 tsconfig.json 파일에 작성하는 구성 옵션에 대해 코드에서 주석과 함께 정리하도록 하겠습니다. tsconfig.json 파일은 크게 세 가지 옵션 compilerOptions, include, exclude으로 구분할 수 있습니다. { "compilerOptions": { "target": "ES2015", // TS를 JS로 변환 "module": "ESNext", // JS의 가장 최신 버전으로 모듈 사용 "moduleResolution": "Node", // 모듈의 해석 방식 지정 "esModuleInterop": true, // JS의 ESM 방식과 node,js의 Commonjs 방식을 호환 "lib": ["ESNext", "DOM"], // TS가 JS로 코드를 컴파일.. 타입 가져오기 / 내보내기 TypeScript의 타입 가져오기와 내보내기 하는 방법을 아래 예시 코드와 함께 살펴보겠습니다. user.ts interface User { firstName: string; lastName: string; age: number; isValid: boolean; } export function getFullName(user: User) { return `${user.firstName} ${user.lastName}`; } 함수 getFullName은 매개 변수 user의 타입을 인터페이스 User를 사용하여 명시하고 있으며, export를 사용하여 해당 함수를 이름을 가진 내보내기를 하고 있습니다. main.ts import { getFullName } from "./user"; const rati =.. 패키지의 타입 선언 TypeScript의 모듈 개념을 아래의 예시 코드와 함께 살펴보도록 하겠습니다. 예시 1 *본 예시는 lodash 패키지를 사용한 예시 코드입니다. import _ from "lodash"; // 에러 발생 const str = "the brown fox jumps over the lazy dog"; console.log(_.camelCase(str)); console.log(_.snakeCase(str)); 예시 1은 lodash 패키지를 import 한 후, camelCase와 snakeCase 메서드를 사용하고 있습니다. 패키지 설치를 완료했음에도 불구하고 import 부분에서 아래와 같은 오류가 발생합니다. 간략하게 살펴보면 모듈에 대한 선언 파일을 찾을 수 없다는 메시지를 담고 있습니다. 우선.. 제네릭 (Generic) - Updated keyof 제약 조건 TypeScript의 제네릭 문법은 크게 함수, 클래스, 인터페이스에서 사용이 가능합니다. 제네릭 문법의 사용법을 아래의 예시 코드와 함께 살펴보도록 하겠습니다. 함수의 제네릭 interface Obj { x: number; } type Arr = [number, number]; function toArray(a: string, b: string): string[]; // 함수의 타입 선언 1 function toArray(a: number, b: number): number[]; // 함수의 타입 선언 2 function toArray(a: boolean, b: boolean): boolean[]; // 함수의 타입 선언 3 function toArray(a: Obj, b: Obj): Obj[]; //.. 클래스 TypeScript에서 클래스 문법을 작성하는 방법과 TypeScript에서 사용할 수 있는 추가 문법에 대해 아래의 예시 코드와 함께 살펴보도록 하겠습니다. 예시 1 class UserA { constructor(first: string, last: string, age: number) { this.first = first; // 타입 에러 발생 this.last = last; // 타입 에러 발생 this.age = age; // 타입 에러 발생 } getAge() { return `${this.first} ${this.last} is ${this.age}`; // 타입 에러 발생 } } 클래스 UserA는 constructor 함수에서 매개 변수 first, last, age의 타입을 명해주고 있으.. 함수 명시적 this TypeScript에서 함수에서의 this 사용을 아래의 간단한 예제와 함께 살펴보도록 하겠습니다. interface Cat { name: string; age: number; } const cat: Cat = { name: "rati", age: 5, }; function hello(message: string) { console.log(`hello ${this.name}, ${message}`); // 타입 에러 발생 } hello.call(cat, "You are pretty awesome"); 인터페이스 Cat은 내부에서 속성에 대한 내용이 작성되어 있으며, 변수 cat는 인터페이스 Cat를 사용하여 타입을 명시하고 객체를 할당받고 있습니다. 함수 hello는 매개 변수 messa.. 타입 별칭(Alias) 별칭 : 달리 부르는 이름 타입 별칭이란 타입에 별도의 이름을 붙여 주는 것입니다. 타입 별칭에 대해 아래 간단한 예시 코드와 함께 살펴보도록 하겠습니다. 예시 1 type TypeA = string; type TypeB = string | number | boolean; type 키워드로 시작하여 각각의 타입 이름이 지정되어 있으며, 각각의 데이터이 명시되어 있습니다. type TypeA = string; 간단하게 TypeA를 살펴보면 type 키워드를 사용하여 타입의 이름을 지정하였고, 데이터 타입을 할당하고 있습니다. 지정한 타입의 별칭을 이용하여 할당한 데이터를 사용할 수 있습니다. 즉, string 타입에 TypeA라는 별칭을 추가했기 때문에 별칭 TypeA를 사용하는 것이 string 타입을 .. 이전 1 2 3 다음
