개발언어/TypeScript
-
NodeJS - Typescript를 활용한 express서버 구축개발언어/TypeScript 2024. 3. 18. 11:18
TypeScript를 활용한 express 서버 구축 ts 파일 node 명령어로 실행하기 위와 같이 간단한 디렉토리 구조에 ts 파일을 생성하고 안에는 간단한 console.log를 찍는 코드를 적는다. 그 다음에 해당 파일을 node 명령어로 실행하면 보통의 js 파일을 실행하듯 실행해도 ts 파일의 코드대로 로그가 찍히는 것을 확인할 수 있다. 그러면 노드로 타입스크립트를 실행할 수 있는 것 일까? → 🙅♀️그렇지는 않다. 노드는 파일 확장자를 신경 쓰지 않고 파일안의 내용을 일반적인 자바스트립트로 처리한다. 위 코드에서는 타입스크립트의 기능이 하나도 없기 때문에 실행된 것이다. Typescript의 기능이 추가된 ts파일 node 명령어로 실행 이번에는 타입스크립트의 기능을 활용한 코드를 작성한..
-
TypeScript - Core Syntax & Feature(JavaScript와 차이점)개발언어/TypeScript 2023. 4. 16. 15:38
type에 대한 자바스크립트와 타입스크립트의 차이점 자바스크립트 type은 동적인 타입이다. 즉, 변수를 가질때 처음엔 숫자일 거라고 가정했지만 나중에 문자열이 그곳에 할당 되어도 완전히 괜찮다. 그리고 그것이 typeof 연자자를 가지는 이유다. typeof연산자를 가지므로써 런타임 도중 당시의 type을 확인할 수 있다. 반면 타입스크립트는 type 정적이 타입이다. 즉 개발 도중 변수와 매개변수의 타입을 정의 하는 것을 끝낸다. 런타임 도중에 갑자기 정의한 type이 변하지는 않는다. 물론 타입스크립트는 결국 자바스크립트로 컴파일 되기 때문에 이론적으로 그럴수도 있다. 타입스크립트를 사용할때는 정의 당시 숫자형이여야 한다고 설정했던 변수에 문자열을 할당하면 개발 도중에 Error가 발생한다. 때문 ..
-
TypeScript - Core Syntax & Feature(Core Type)개발언어/TypeScript 2023. 4. 16. 14:05
Core Syntax & Feature 타입스크립트가 어떤 type을 제공하고 지원하는지 type들로 작업하는 방법 type을 할당하는 방법 type을 사용하면 얻어지는 이점 Core Types 타입스크립트는 자바스크립트에 덧붙여 더 많은 type을 제공한다. 또한 타입스크립트는 사용자가 정의한 사용자정의의 type도 작성하고 사용할 수 있게 해준다. 우선 자바스크립트가 가진 핵심 타입부터 시작해 자바스크립트와 타입스크립트에 각각 어떤 type이 지원되는지 두 언어 사이에 차이점이 의미하는 바를 알아본다. number 자바스크립&타입스크립트에서 사용하는 핵심타입 중 하나는 number(숫자형)이다. 두개의 언어에서 number type은 하나 뿐이다. 정수형이나 실수형을 세분화 나누는 타입은 존재하지 않..
-
TypeScript - Tuple(튜플)개발언어/TypeScript 2023. 3. 22. 15:26
Tuple(튜플) 튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다. //튜플 타입으로 선언 let x: [string, number]; //초기화 x = ["hello", 10]; // 성공 //잘못된 초기화 x = [10,"hello"]; //오류 튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있다. 단 요소들의 타입이 모두 같을 필요는 없다. 예를 들어 위 코드와 같이 number , string이 쌍으로 있는 값을 나타내고 싶을 수 있다. console.log(x[0].substring(1)); console.log(x[1].substring(1)) //오류, 'number'에는 'substring' 이 없다. console.log(x[0]..
-
TypeScripte- typeScript를 javaScript로 compile개발언어/TypeScript 2022. 11. 5. 15:55
javaScript의 input값에 액세스할 때 알아 두어야 하는 것은 해당 value는 input type이 문자이든 숫자이든 상관 없이 항상 문자열(string)이라는 것이다. const button = document.querySelector("button"); const input1 = document.getElementById("num1"); const input2 = document.getElementById("num2"); function add(num1, num2) { return num1 + num2; } button.addEventListener("click", function() { console.log(add(input1.value, input2.value)); }); 위 함수에서 ..
-
TypeScript의 함수 4 (Conclusions)개발언어/TypeScript 2022. 6. 13. 12:29
Conclusions 제네릭을 사용해서 직접 사용해서 직접 call signature을 만드는 일은 거의 없다. 왜냐하면 실제 개발에서는 주로 다른 패키지를 사용하거나 혹은 라이브러리를 사용하고, 그리고 그 라이브러리들이 제네릭을 통해서 생성이 된다. 다시 말하면 라이브러리를 만들거나. 다른 개발자가 사용할 기능을 개발하는 경우엔 제네릭이 유용할 것이다. 하지만 그외 대부분의 경우에는 제네릭을 직접 작성할 일은 없을 것이다. 대부분 제네릭을 사용만 하게 될 것 이다. nest.js next.js react.js 를 사용하게 된다면 제네릭을 사용하게 될 것이고, 타입스크립트에게 제네릭을 보내게 될 것이다. 즉 제네익을 사용하는 call signature를 작성하게 될 것이다. call signature 외..
-
TypeScript의 함수 3 (Polymorphism)개발언어/TypeScript 2022. 6. 12. 18:23
Polymorphism 다형성(polymorphise)이란 무엇일까? poly는 그리스어로 many,several,much,multi 라는 의미이다. polygon(다각형)같은 단어를 생각하면 된다. 더불어 morphos혹은 morphic은 form(형태), structure(구조)란 뜻을 가지고 있다. 즉 polymorphous란 여러가지 다른 구조들이라는 의미이다. 기본적으로 함수는 여러가지 다른 모양을 가지고 있다. 앞서 말한 함수의 다형성에서 함수는 서로다른 2-3개의 인자를 가질 수 있다는 사실을 살펴보았다. 그리고 타입스크립트에서 함수는 string이나 object를 첫번째 인자로 가질 수 있다. 그러니까 우리는 이미 약간의 여럭가지 모양의 다형성을 경험해 본 것이다. 제네릭이 다형성에 어떻게..
-
TypeScript의 함수 2 (Overloading)개발언어/TypeScript 2022. 6. 12. 16:21
Overloading function overloading / method overloading 실제로 오버로딩된 함수를 직접 작성하지는 않을것이다. 그 대신 대부분 다른 사람이 만든 외부 라이브러리를 사용할 텐데, 이런 패키지나 라이브러리 들은 오버로딩을 엄청 많이 사용한다. 그래서 오버로딩에대해 제대로 알아 두는 것은 중요하다. 좀 더 긴 방식의 call signature 작성 방법 위 와 같은 방법이 존재하는 이유은 오버로딩 때문이다. Overoloading은 무엇일까? => 오버로딩은 함수가 여러개의 call signatures를 가지고 있을 때 발생한다. 그냥 여러 개 가 아니라 서로 다른 여러개의 call signature을 가졌을 때 발생하는 것이다. 위 코드의 Add라는 함수는 첫번째 모양..