본문 바로가기

Javascript/TypeScript

 (9)
[타입스크립트 튜토리얼 번역] generics type tutorial | 제네릭타입 https://www.tutorialsteacher.com/typescript/typescript-generic TypeScript Generics TypeScript - Generics In this section, we will learn about generics in TypeScript. When writing programs, one of the most important aspects is to build reusable components. This ensures that the program is flexible as well as scalable in the long-term. Gen www.tutorialsteacher.com 해당 문서를 번역한 글입니다. 더보기 In this sect..
[타입스크립트] 리액트에서 타입스크립트를 사용하는 방법 리액트에서 타입스크립트를 사용하는 방법을 알아보기 전에, 타입스크립트에 대한 간략한 요약을 먼저하고 지나가겠다. 타입스크립트는 변수, 함수를 만들 때 타입을 지정해주는 것이다. 그게 끝이다. 그럼, 이제부터 리액트에서 타입스크립트를 설치하는 방법부터 알아보겠다. npx create-react-app 프로젝트명 --template typescript 이런 명령어로 설치를 진행하면, 타입스크립트가 적용된 리액트 버전이 설치된다. 만약 기존에 사용중인 리액트 앱에서 타입스크립트를 사용하고 싶다면, npm install --save typescript @types/node @types/react @types/react-dom @types/jest 위 코드를 통해서 타입스크립트를 설치하면 된다. 께알상식+ 위 사..
[타입스크립트] generic에 대하여 generic타입 : 함수에서 타입을 지정해줄 때, 타입파라미터를 통해서 자유롭게 함수내에서 사용하는 타입을 정해줄 수 있는 방법이 있다. 이것을 generic타입이라고 부른다. 이 타입을 활용하면, 한 가지 타입에만 제한되지 않고 다양한 타입을 함수마다 적용해서 사용할 수 있다. 때문에 확장성도 넓다. 바로 예시부터 확인해보자. function 함수(x: MyType[]) :MyType { return x[0]; } let a = 함수([4,2]) let b = 함수(['kim', 'park']) 위의 코드를 보면, 함수()과 같은 방식으로 generic 타입을 선언할 수 있다. 이렇게 선언하고 난 타입은 함수를 호출 할 때, 타입을 파라미터에 넣어주면된다. 변수 a의 경우에는 generic의 타입을 ..
[타입스크립트] protected, static 키워드 사용하기 extends 문법 복습해보기 : class의 내용을 복사하고 싶을때, 어떤 코드를 사용하면 되는가? extends 키워드를 사용하면 된다. class User{ x = 10; } class NewUser extends User{ } let 사람 = new NewUser(); console.log(사람); 위와 같이 코드를 작성하면 User로 부터 복사되어서 생성된 사람이라는 instance에서도 x속성이 들어가 있는 것을 확인할 수 있다. 개발자들은 이런식으로 코드의 양을 줄일 수 있 수 있었다. protected 란? : 그런데 만약 여기서 private키워드를 사용하면 어떻게 될까? private는 해당 중괄호{}안에서만 이용이 가능하다. 그렇기 때문에 복사된 클래스 안에서는 private으로 지정..
[타입스크립트] public, private 키워드를 사용하는 방법 타입스크립트의 장점은 무엇일까? 타입을 지정할 수 있다는 장점이외에도, 자바스크립트에서 쓸 수 없는 문법을 쓸 수 있는 장점이 있다. 어떤 문법을 말하는 것일까? 자바스크립트에는 존재하지 않는 public, private, protected, static 등등의 키워드들을 사용할 수 있다. class를 만들어서 개발을 하는 경우가 많다면, 이런 네개의 키워드를 활용해서 더욱 객체지향적인 코드를 짤 수 있다. public키워드 사용법 : 먼저 public에 대해서 알아보자. class User { public name : string constructor(){ this.name = 'kim' } } 이렇게 필드의 값에 public 키워드를 붙일 수가 있다. 이것을 붙이면 어떤 효과가 있느냐? 이 name ..
[타입스크립트] rest parameter의 타입을 지정하기 rest parameter란 무엇일까 : fucntion 함수() { } 함수(1,5,3,5,6,6) 이렇게 함수가 있는데, 함수의 파라미터에 몇개의 인자가 들어올지 모르는 상황이다. 이럴 때 사용하는 것이 rest parameter이다. 문법은 spread operator를 사용한다. fucntion 함수(...a) { } 함수(1,5,3,5,6,6) 만약 다른 파라미터도 함께 사용하고 싶다면, 다른 파라미터의 맨 뒤에서 사용해야 한다. fucntion 함수(x,y, ...a) { //이렇게! } 함수(1,5,3,5,6,6) 그리고 이렇게 rest parameter를 통해서 들어온 값들을 콘솔에 출력해보면 전부다 배열에 담겨서 나오는 것을 알 수 있다. function 함수(...a){ console...
[타입스크립트] 클래스의 타입을 지정하기 클래스의 필드값 : 클래스에 타입을 지정하는 것을 설명하기에 앞서서 클래스의 필드값에 대해서 설명해보겠다. class Person{ data = 0 } 이렇게 Person이라는 클래스에 constructor가 없이 변수를 선언해두면, 이런 값을두고 우리는 클래스의 필드값이라고 부른다. 이런 필드값들은 생성된 모든 자식들에게서 사용이 가능하다. let 사람1 = new Person() console.log(사람1.data) // 0 이렇게 출력해보면 0이라는 값이 나오게 될 것이다. 클래스의 타입지정하기 : 이제 본격적으로 클래스의 타입 지정에 대해서 알아보자. 기본적으로 클래스를 생성할 때, 인스턴스의 속성을 정의하기 위해서 constructor를 사용해야한다. class Person { construc..
[타입스크립트] 여러가지 타입을 정하는 방법 - union, any, unknown 타입스크립트에서는 변수 하나를 만들고 타입을 지정할 수 있다. 유니온 타입 : 그런데, 가끔가다가 숫자만이 아니라, 문자도 같이 들어오게 하고 싶을 때 어떻게해야할까? let 변수 : string | number = 'kim' 이렇게 변수에 string | number형식으로 타입을 선언하면 문자 또는 숫자의 타입을 허용한다는 말이 된다. 이렇게 두 가지 타입을 합친다는 의미로 union이라는 단어를 사용한다. 소괄호를 쳐도 된다. (string | number | boolean) 응용하기 : 문제 상황을 생각해보자 let 회원들 : number[] = [1,2,3]; 이렇게 배열안의 타입을 정해줄 수 있다 . 그런데 만약 배열안에 [1,'2',3]과 같이 숫자도 들어가고 문자도 들어가는 배열을 만들고 ..

티스토리툴바