TypeScript8 TypeScript 유틸리티 타입 TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공합니다. 이런 유틸리티들은 전역으로 사용 가능합니다. TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io keyof User인터페이스의 키값을 리터럴타입으로 선언할수있다. Partial 파샬은 속성을 모두 옵셔널하게 바꿔준다. Required 파샬과 반대로 모든 속성을 필수로 바꿔준다. Readonly 속성을 읽기 전용으로 바꾼다. Record 타입 T의 프로퍼티의 집합 K로 타입을 구성합니다. 이 유틸리티는 타입의 프로퍼티들을 다른 타입에 매핑시키는 데 사용될 수 있습니다. Record활용 예제 Pick 타입의 속성중 원하는것을 골라서 사용할수있다. Om.. 2023. 1. 13. TypeScript 제네릭 제네릭(Generics)의 사전적 정의 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 제네릭 | 타입스크립트 핸드북 제네릭(Generics)의 사전적 정의 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 joshua1988.github.io 유니온 타입의 매개변수를 갖는 함수가 있다. 그런데 만약 boolean타입을 받는 배열을 받아야 하면 boolean[]의 유니온 타입을 또 추가해줘야 할것이다. 이럴때 제네릭(Generic)을 이용한다. T는 Ty.. 2023. 1. 13. TypeScript 클래스 JavaScript에서는 문제가 없는 코드이지만 TypeScript에서는 클래스를 작성할때 멤버변수를 미리 선언 해줘야한다. 멤버변수를 미리 선언 하지 않는 방법은 접근제한자나 readonly키워드를 사용하는 방법이 있다. 접근제한자 | public, private, protected, readonly public (default) 자식 클래스나, 클래스 인스턴스 모두 접근이 가능 기본적으로 아무것도 선언하지 않으면 public이다. private or # 자식 클래스에서 접근 불가능, 해당 클래 내부에서만 접근 가능 #으로 선언시 해당 변수나 함수에 #을 붙혀서 사용한다. private === # 기능상 차이는 없고 편한걸 사용하면된다. protected 자식 클래스에서 접근이 가능, 클래스 인스턴스에.. 2023. 1. 13. TypeScript 리터럴/유니온/교차 타입 Literal 리터럴 타입 리터럴은 데이터(값) 그 자체를 뜻한다. 즉, 변수에 넣는 변하지 않는 데이터 i는 상수이고 1은 리터럴이다. 변수 선언과 동시에 값을 지정해주는 표기법을 리터럴 표기법이라고 한다. const i = 1; type에 문자열 리터럴을 이용하여 job속성에 Job의 값만 쓸수있게 할수있다. 다른 값을 입력하면 에러가 난다. Union 유니온 타입 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미 gift매개변수에 Car와 Phone의 유니온 타입을 지정했을때 두 인터페이스 모두 color라는 속성이있어 콘솔로그에서는 에러가 안나지만 start()함수는 Car에만 있기때문에 에러가 발생한다. 동일한 속성의 타입을 다르게 줘서 두개의 인터페이스를 구분할수 있다. 이것.. 2023. 1. 12. TypeScript 함수 이전 글에서 TypeScript의 함수를 선언 하는 정도만 작성했었는데 이번에 제대로 알아보려한다. TypeScript 함수 선언 매개변수에 타입을 지정해줘야하고 ()끝날때 리턴타입을 지정해줘야 한다. 아무것도 리턴하지 않으면 void를 입력해준다. function add(num1:number, num2:number):number { return num1 + num2; } let add = (num1:number, num2:number):void => { console.log(num1 + num2); } 선택적 매개변수 매개변수name을 받아 반환값에 name값이 없으면 "world"가 찍히는 함수에 매개변수를 입력하지 않으면 에러가 난다. 이때 사용 할수있는게 매개변수를 옵셔널하게 선언하여 선택적 매개.. 2023. 1. 11. TypeScript 인터페이스(interface) 인터페이스 설명 TypeScript - Interface | PoiemaWeb 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. poiemaweb.com TypeScript에서 객체를 선언할때 인터페이스를 사용해야한다. 그냥 객체를 선언하고 접근하면 속성에 대한 타입이 없어서 에러가 난다. 이렇기에 객체에 대한 타입으로 인터페이스를 생성해주고 해당인터페이스를 타입으로 선언하여 객체를 생성한다. 인터페이스를 타입으로 지정시 student객체에 name, age의 속성이 있어야 한다. 속성을 입력하고 객체에 접근시 갖고있는 속성들을 확인 할수있다. 만약 객체에 있어도 되고 없.. 2023. 1. 10. TypeScript 기본 타입 number let age:number = 12; string let car:string = "bmw"; boolean let isAdult:boolean = true; array let numArr:number[] = [1,2,3]; or let numArr:Array = [1,2,3]; 튜플 (Tuple) 배열 과 비슷한 모양인데 인덱스별로 타입이 다를 때 사용할수 있다. let tupleArr:[string, number]; tupleArr = ["test",1]; ok tupleArr = [1,"test"]; ng tupleArr[0].toLowerCase(); ok tupleArr[1].toLowerCase(); ng void 함수의 반환값이 없을때 사용 function printHello():.. 2022. 12. 28. TypeScript를 왜 쓸까? 왜 타입스크립트를 쓰는가? 우리가 사용하는 브라우저는 타입스크립트를 이해하지 못한다. 그래서 자바스크립트로 변환해서 로드해야 실행할수있다. 이렇게 보면 더 왜 쓰는지 이해가 안되는데 예를들면 JS function add(num1, num2) { console.log(num1 + num2); } 매개변수 num1과2를 더한값을 로그로 보여주는 함수라는 것을 알수있다. 하지만 내가 의도한것은 숫자만 더해서 숫자를 로그로 보여주고싶지만 실사용시 문자와 숫자를 더해도 되고 아무것도 넣지 않거나 매개변수를 1개만 넣거나 2개이상을 넣었을때 원하는 결과와 멀어질수있다. 이처럼 실수가 분명한 코드인데 자바스크립트은 아무런 경고를 주지않는다. 같은 코드를 TypeScript로 작성해보자 복붙을 하자마자 바로 빨간줄들이.. 2022. 12. 24. 이전 1 다음
