에러 발견React와 TypeScript를 활용하여 프로젝트를 진행하던 도중 프로젝트를 빌드하다가 다음과 같은 에러를 발견했다.setData라는 값이 선언되었으나 사용되지 않았다는 이유로 빌드에 실패하였다. 처음에는 그냥 setData만 삭제하면 실패하지 않겠구나 하고 setData를 제거하는 선에서 끝낼려고 했는데, 생각해보니 너무 억울했다. 고작 그런 이유로 에러를 발생시킨다는게 규칙이 너무 엄격한 것 같다고 생각했다. 그래서 이러한 규칙을 완화하기 위해 에러가 발생하는 이유를 찾아보았다.에러 원인빌드를 시도했을 때 에러가 발생하였으니 컴파일 과정에서 실패했을거라 예상하고 tsconfig.json 파일을 열어보았다. TypeScript 공식문서에서 tsconfig.json에 대해서 확인할 수 있다. ..

keyofinterface User { id: number; name: string; age: number; gender: "m" | "f";}type UserKey = keyof User; // "id" | "name" | "age" | "gender"const uk:UserKey = "name"; // User의 key 중 하나 입력가Partialinterface User { id: number; name: string; age: number; gender: "m" | "f";}// Partial로 감싸면 인터페이스의 일부만 사용해도됨let admin: Partial = { id: 1, name: "Bob",};Requiredinterface Us..

클래스, 함수, 인터페이스를 다양한 타입으로 재사용 가능function getSize(arr: T[]): number { return arr.length;}const arr1 = [1, 2, 3];getSize(arr1); // 3const arr2 = ["a", "b", "c"];getSize(arr2); // 3const arr3 = [false, true, true];getSize(arr3); // 3const arr4 = [{}, {}, { name: "Tim" }];getSize(arr4); // 3interface Mobile { name: string; price: number; option: T;}const m1: Mobile = { name: "s21", ..

class Car { // color: string; constructor(readonly color: string) { this.color = color; } start() { console.log("start"); }}class Car { name: string = "car"; color: string; constructor(color: string) { this.color = color; } start() { console.log("start"); }}class Bmw extends Car { constructor(color: string) { super(color); ..

function add(num1: number, num2: number): void { // return num1 + num2; console.log(num1 + num2);}function isAdult(age: number): boolean { return age > 19;}/* 옵셔널 파라미터 포함 함수 */function hello(name?: string): string { return `Hello, ${name || "world"}`;}const result = hello(); // 인자를 안넣을 경우 옵셔널 파라미터 설정const result2 = hello("Sam");const result3 = hello(1234); /..

function add(num1: number, num2: number): void {// return num1 + num2;console.log(num1 + num2);}function isAdult(age: number): boolean {return age > 19;}/* 옵셔널 파라미터 포함 함수 */function hello(name?: string): string {return `Hello, ${name || "world"}`;}const result = hello(); // 인자를 안넣을 경우 옵셔널 파라미터 설정const result2 = hello("Sam");const result3 = hello(1234); // 타입 에러function ..

객체 프로퍼티를 사용할 때 인터페이스를 사용type Score = 'A' | 'B' | 'C' | 'F';interface User { name: string; age: number; gender?: string; // 있어도 되고 없어도 되면 ? 추가 - 옵셔널 프로퍼티 readonly birthYear: number; [grade:number]: Score; // Score에 입력한거 외에 다른 값 입력하면 에러}// 옵셔널 프로퍼티로 선언한 것 외에 모두 선언해야됨 안하면 에러let user : User = { name: 'kim', age: 30, birthYear: 2000, 1: 'A', 2: 'B'}user.age = 10;user.gen..

기본형let age:number = 30; // 숫자let isAdult:boolean = true; // true, falselet a:number[] = [1, 2 ,3]; // 숫자 배열let a2:Array = [1, 2, 3]; // 숫자 배열let week1:string[] = ['mon', 'tue', 'wed']; // 문자열 배열let week2:Array = ['mon', 'tue', 'wed']; // 문자열 배열week1.push(1); // 숫자 추가하면 에러 발생튜플let b:[string, number]; // 길이가 2인 배열, [문자열, 숫자]b = ['z', 1];b = [1, 'z']; // 에러 발생b[0].toLowerCase();b[1].toLowerCase(); ..