시작하기 앞서현재 모던 리액트 Deep Dive 라는 책으로 스터디를 진행하고 있는데, 책에서 "any 대신 unknown을 사용하자" 라는 내용이 있었다. 사실 지금까지 타입스크립트를 작성하다가 모르겠는 타입은 any 로 지정했었다. 그런데 이 책을 읽고 unknown 이라는 타입을 알게 되고 any 보다는 unknown 을 사용하는 게 더 좋다 하여 해당 내용에 대해 자세히 알아보기 위해 글을 작성하게 되었다. any[타입스크립트 공식문서(한국어) - any] Documentation - Everyday Types언어의 원시 타입들.www.typescriptlang.org간단하게 any 는 모든 타입을 허용한다. 그래서 모든 타입을 허용하여 타입 에러가 발생하지 않는다. any 단점any 는 편해 보..

Q. 질문JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #12) A. 답변현재 상황요즘 채용 공고를 보면 대부분 타입스크립트를 할 수 있는 사람을 우대하는 것을 쉽게 볼 수 있다.그만큼 타입스크립트가 중요하고 대부분의 기업에서 프론트엔드 개발을 할 때 타입스크립트를 채택해 사용하고 있다는 것을 알 수 있다. 타입스크립트 사용 이유그렇다면 자바스크립트 대신 왜 귀찮게 타입스크립트를 사용하는 것일까? 바로 프로그램의 안정성 을 위한 것이다. 자바스크립트는 알다시피 동적 언어라서 고정된 타입 없이 자유롭게 변수를 선언하고 사용할 수 있다.이게 자바스크립트의 장점이 될 수 있지만 타입 오류가 코드를 실행하기 전까지 알 수 없..

☘️유틸리티 타입(Utility Types) keyof keyof를 사용하면 인터페이스의 key값을 유니온 형태로 받을 수 있다. // keyof interface User { id: number; name: string; age: number; gender: "m" | "f"; } // 'id' | 'name' | 'age' | 'gender' type UserKey = keyof User; Partial Partial은 옵셔널로 바꿔주어, 인터페이스의 일부분만 사용 가능하게 해 준다. // partial interface User { id: number; name: string; age: number; gender: "m" | "f"; } let admin: Partial = { id: 1, name..

☘️제네릭(Generics) 제네릭을 사용하면 클래스 or 함수 or 인터페이스를 다양한 타입으로 재사용할 수 있다. 만약 배열을 입력받아 길이를 반환하는 함수를 만들었을 때, 아래처럼 유니온 타입으로 입력받는 배열의 타입을 매번 추가하면 번거로움이 있다. function getSize(arr: number[] | string[] | boolean[] | object[] ): number { return arr.length; } const arr1 = [1,2,3]; getSize(arr1); const arr2 = ["a","b","c"]; getSize(arr2); const arr3 = [false, true, false] getSize(arr3); const arr4 = [{name: "짱잼"},..

☘️클래스(Class) 클래스 자바스크립트에서 클래스를 작성할 때, 아래와 같이 하면 된다. 그러나 이를 타입스크립트에서 작성할 때엔 에러가 발생한다. 타입스크립트에서 Class 를 사용할 때에는, 멤버 변수를 미리 선언하고 타입을 설정해 준다. class Car { color: string; constructor(color: string) { this.color = color; } start() { console.log("start"); } } const bmw = new Car('red'); bmw.start(); 멤버 변수를 미리 선언하는 방법 이외에도 접근 제한자나 readonly를 사용하는 방법이 있다. // 접근 제한자 class Car { // color: string; constructor..

☘️리터럴, 유니온/교차 타입 변수를 선언할 때, const와 let 을 사용한다. const 변하지 않는 값을 선언할 때 사용 let 변하는 값을 선언할 때 사용 그래서 const로 선언한 변수를 수정할 경우 에러가 뜨게 된다. 문자열 이외에 다른 타입을 넣고 싶을 경우 다음과 같이 수정할 수도 있다. const name1 = "짱잼"; let name2: string | number = "철수"; name2 = 1; 여기서 name1 처럼 정해진 값을 가진 것을 리터럴 타입 이라고 한다. 리터럴 타입 Job이라는 문자열 리터럴 타입을 만든다. 그러면 Job 타입을 사용할 경우 선언해 둔 문자열만 사용할 수 있게 되며, 그 외에 문자열을 사용할 경우 에러가 발생한다. type Job = "student..

☘️함수 그 전 게시물을 보면 타입스크립트로 함수를 만들때에는 매개변수와 반환 값의 타입을 입력하였다. function add(num1:number, num2:number): number { return num1 + num2 } 만약 아무 값도 반환 하지 않을 거면 void 로 해준다. function add(num1:number, num2:number): void { return num1 + num2 } 그 밖에도 원하는 형태로 수정하여 함수를 만들 수 있다. function isBig(num1:number): boolean { return num1 > 100; } 함수 - 옵션 속성 인터페이스처럼 함수에서도 옵션 속성을 설정할 수 있다. 매개변수의 변수 이름 뒤에 ? 를 붙인다. 그러면 함수를 호출할..

☘️인터페이스(interface) 객체를 생성하여 해당 객체의 name을 출력하면 object에 name이 없다는 에러가 발생한다. 이러한 문제를 해결하기 위해 타입스크립트에서는 인터페이스를 사용한다. 인터페이스 타입을 지정하여 인터페이스를 만들어 준다. 자세한 설명은 타입스크립트-핸드북 에서 볼 수 있다. interface User { name: string; age: number; }; let user: User = { name: '짱잼', age: 24, } 인터페이스 - 옵션 속성 여기서 만약 인터페이스에 새로운 속성을 추가하고 해당 속성을 꼭 사용하고 싶지 않을 때 속성 뒤에 ? 를 붙여 옵션 속성을 추가할 수 있다. 그래서 user 객체에서 꼭 gender 속성을 사용하지 않아도 된다. int..

☘️TypeScript 기본 타입 변수 타입 - number, boolean, string, Array 타입스크립트에서 변수를 선언할 때, 변수 타입을 지정해서 설정할 수 있다. let fruit:string = "apple" 만약 fruit 변수를 string이 아닌 다른 타입으로 재정의하면 에러가 뜬다. 사용자가 타입을 설정하지 않아도 타입스크립트가 변수 추론을 통해 스스로 변수 타입을 지정하여 에러가 뜨게 해준다. string 이외에도 다른 타입을 지정할 수 있다. let age:number = 24; // 숫자 let isAdult:boolean = true; // 불린 let a1:number[] = [1,2,3] // 숫자 배열 let a2:Array = [1,2,3] // 숫자 배열 let ..

☘️시작하며... 약 1년 6개월의 방황 끝에😅 개발 직무를 선택하게 되었다. 프런트도 찍먹하고, 백엔드도 찍먹하다가 졸업작품에서 React Native를 사용하여 앱을 만들면서 프론트엔드가 재미있고 적성에 맞는 거 같아 프론트엔드 개발자가 되기에 마음 먹었다! 새로운 마음으로 몇 달째 멈춘 velog를 접고 티스토리에서 새로 개발 블로그를 시작하려고 한다 그래서 개발 동아리에 프론트엔드 개발자로 들어가게 되었고 이번 프로젝트에서 TypeScript를 사용하기로 하였는데 한 번도 사용해 본 적이 없어 개발과 동시에 공부하려고 한다!👍👍👍 파이팅~ 티스토리는 카카오톡 이모티콘 사용할 수 있네ㅋㅋㅋㅋㅋㅋㅋㅋㅋ기엽당 ☘️참고 자료 영상을 보고 따라 하면서 배우는 것이 좋다 생각해 유튜브에서 TypeScript..