코드로 대화하기

안녕하세요! 오늘은 typeof Array[number]에 대하여 알아보겠습니다. 최근에 이직을 하고 정신이 없어서 블로그 글도 못 올리고 1일 1 깃도 못했네요. typeof Array[number]? const names = ["Song", "James", "Mike"] as const; type Name = typeof names[number]; // type Name: "Song", "James", "Mike" 패턴은 위와 같이 생겼는데요. Name 타입을 정의할 때 유니온 타입을 사용하여 Song, James, Mike를 중복해서 적지 않은 것을 확인할 수 있습니다. 문제점과 패턴에 대해 자세히 살펴보겠습니다. 문제점 만약 이 방식을 사용하지 않으면 어떻게 될까요? 1. 타입을 정의하지 않는다...

안녕하세요! 오늘은 typescript의 제네릭(Generic)에 대해 알아보겠습니다. 개발을 하다 보면 재사용하는 함수는 따로 제작하여 사용하고는 합니다. 예를 들어 매개변수를 그대로 리턴하는 함수가 있다고 생각해 봅시다. function returnParam(item: number): number{ return item; } 현재는 number타입만 있지만 string타입도 추가해야합니다. function returnParam(item: number|string): number|string{ return item; } const test = returnParam("test"); 유니온타입을 이용하여 추가했습니다. 위 코드에서 test는 number | string 타입이기 때문에 공통되는 타입의 함수..

Enumerated Type 타입스크립트에서 enum이란 특정 값들의 집합을 의미하는 자료형 (열거형)입니다. C, C#, Java 등 많은 프로그래밍 언어들이 enum을 데이터 타입에 포함하고 있지만 자바스크립트는 포함하고 있지 않습니다. 타입스크립트로 넘어오게 되면서 enum을 사용할 수 있게 되었습니다. 코드를 통해 어떤 것들이 있는지 살펴보겠습니다. Numeric enums (숫자 열거형) enum Alphabet{ A, B, C, D, E, F } console.log(Alphabet); /* { '0': 'A', '1': 'B', '2': 'C', '3': 'D', '4': 'E', '5': 'F', A: 0, B: 1, C: 2, D: 3, E: 4, F: 5 } */ console.log(..

오늘은 typescript의 union type과 intersection type을 알아보겠습니다. 일반적으로 타입을 선언하기 하기 위해서는 아래와 같습니다. function logString(item: string){ console.log(item); }; logString("hello"); 똑같은 로직을 처리하지만 타입만 다른 경우는 어떨까요? function logString(item: string){ console.log(item); }; function logNumber(item: number){ console.log(item); }; logString("hello"); logNumber(1); 타입만 다르게 하여 함수를 두 번 선언하여야 합니다. 이렇게 되면 불필요한 중복이 생깁니다. Unio..

지금까지 변수와 함수에서의 타입 선언을 알아보았습니다. 직접적으로 타입을 넣는 경우도 있지만 type과 interface로 따로 뺄 수 있습니다. 타입을 따로 빼면 불필요한 반복이 줄어들어 확장성이 좋아집니다. Type Aliases 기본 구조 type UserData = { name: string; age:number; } function logUserData(user: UserData){ console.log(user.name); console.log(user.age); } logUserData({name:"song", age:0}); // 성공 logUserData({name:"song", address:"pangyo"}); // 오류 address는 type에서 선언되지 않았다. logUserDa..

오늘은 typescript에서 함수를 선언하는 방법에 대하여 알아보겠습니다. javascript function sum(a, b){ return a + b; }; sum(1, 2); js에서 일반적으로 함수를 선언하는 방법입니다. 타입이 선언되어있지 않기 때문에 숫자, 문자열, 오브젝트 등 모든 타입을 넣을 수 있습니다. 이렇게 되면 원하는 기존의 의도와는 다르게 함수가 작동할 가능성이 있습니다. typescript function function sum(a: number, b: number):number { return a + b; } sum(1, 2); // 성공 sum(1); // 오류 . 두번째 매개변수가 없습니다. sum("hello", 100); // 오류 ts에서는 매개변수와 리턴하는 타입 ..

오늘은 typescript에서 변수를 선언하는 방법에 대하여 알아보겠습니다. js와 달리 ts는 타입이 엄격하기 때문에 유의하셔야 합니다. 숫자 . number 숫자를 선언합니다. 16진수, 10진수, 8진수, 2진수 모두 지원합니다. let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: number = 0o744; 문자열 . string 문자열을 선언합니다. 백틱(``)을 사용하거나 연산이 있는 문자열도 가능합니다. let hello: string = "hello"; let sentence: string = `${hello} my name is sjh`; let sentence2: string ..

안녕하세요! 오늘은 타입 스크립트에 대하여 알아보겠습니다. 타입스크립트를 배우기 전 왜 이 언어를 사용해야하는지 궁금해서 찾아보게 되었습니다. 최근 개발자들 사이에서 ts는 굉장히 뜨고 있는데요. 대기업들의 채용공고에도 우대사항 혹은 자격요건에 포함되어있는 것을 볼 수 있습니다. npm trends를 봐도 무섭게 성장하고 있습니다. 저는 궁금했습니다. 왜 타입스크립트가 뜨게 되었고, 왜 수많은 개발자들이 선택을 하였을까요? 이 언어를 배워야하는 이유는 뭘까요? 개요 C#의 창시자인 아네르스 하일스베르가 개발을 주도하였고 마이크로소프트에서 2012년 오픈소스로 발표하였습니다. 2014년 4월 마이크로소프트의 Build 행사에서 타입스크립트의 1.0 버전을 공개했습니다. 2016년 9월에 2.0 버전이 릴리..