본문 바로가기

Typescript12

typescript enum을 사용하지 않는게 좋은 이유 및 다른 방법 https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/ 2022. 1. 24.
Typescript Partial, Required, Pick 사용방법 interface IPerson { name: string; age: number; gender: string; } /** * 인터페이스의 모든 프로퍼티를 optional하게 변경한다. */ type PartialPerson = Partial; const partialPerson: PartialPerson = { gender: "male" // optional } /** * 인터페이스의 모든 프로퍼티를 required하게 변경한다. */ type RequiredPerson = Required; const requiredPerson: RequiredPerson = { name: "Jade", // required age: 29, // required gender: "male" // required } /*.. 2022. 1. 24.
generic 함수를 콜할 때 타입 정보를 함께 넘겨줘서 하나의 함수로 다양한 타입으로의 콜이 가능하다. 기본형은 아래와 같다. function func41(param: T): T { return param; } let v41 = func41("문자"); let v42 = func41(3333); let v43 = func41(); T는 다른 이름으로도 가능하지만, 일반적으로 T를 많이 쓴다. T는 여러개여도 가능하다. function func41(param: T): T1 | T2 | T3 { return param; } // 타입을 전부다 개수에 맞게 지정하거나 아예 타입을 안쓰는 경우가 있다. let v41 = func41("문자"); let v42 = func41(3333);// 아예 지정하지 않을 경우 타입은 .. 2022. 1. 6.
type import, export, namespace 타입도 마찬가지로 import, export가 가능하다. 타입 변수 앞에 export를 붙여주면 된다. a.ts export type TypeA = string | number; b.ts // export한 타입변수의 이름 지정 import { TypeA } from "./a.ts"; let 변수: TypeA = "문자"; 데이터를 감싸서 보낼 수 있는 namespace도 있다. 다만, namespace를 사용하려면 export 할 것들은 전부 namespace 안에 선언해야 한다. a.ts // export let variableA = "A";// namespace와 같이 쓰면 에러남 namespace 변수공간 { export type TypeA = string | number; export type .. 2022. 1. 6.
rest parameter, destructuring rest parameter 데이터의 개수가 정해져 있지 않은 다수의 데이터를 rest parameter라고 한다. 사용법은 간단하다. // 기본 사용 방식 // 함수 파라미터 이름 앞에 ... 을 붙인다. function func(...param) { console.log(param); } func(2,3,5,4,46,6,4,6,76,4,3); // 파라미터가 여러개일 때는 맨 뒤에 rest parameter를 넣어야한다. function func(a, b, ...param) { console.log(param); } func(2,3,5,4,46,6,4,6,76,4,3); // 파라미터의 타입 선언 방식은 기존과 같다. // 유니온 타입으로 선언해서 다양한 타입을 담을 수 있는 것도 기존과 같다. fun.. 2022. 1. 5.
interface를 타입으로 사용 type 키워드가 아니라 interface로도 같은 방법으로 사용할 수 있다. 둘의 사용하는 방법의 차이는 아래와 같다. // type type Person = { name : string, age : number } // interface interface Person {// = 이 없음 name : string;// 세미콜론으로 함(,도 가능하긴함) age : number; } interface가 type 대비 좋은 점은 extends가 가능하다. class 문법과 비슷한 개념이다. type도 & 키워드로 비슷한 기능을 사용할 수 있으나, 내부적으로 구동하는 방식에 차이가 있다. 가령 A, B 타입이 있고 C = A & B 라고 하면 이 것은 extends의 의미가 아니라 A도 만족하고 B도 만족하는.. 2022. 1. 5.
typescript 에서 DOM 제어 셀렉터는 여러가지 방법이 있으니 편한대로 써도 된다. 주요점은 DOM에 있는 Element를 참조할 때 종류에 따라 다른 타입을 찾아야 한다는 점이다. 아래 코드를 보면 어떤 것은 HTMLAnchorElement, 어떤 것은 HTMLImageElement 등으로 나뉘어져 있는 것을 볼 수 있고 그 외에도 다양한 종류가 있다. let title = document.querySelector("#title"); if(title != null) { // title의 innerHTML 속성 변경 title.innerHTML = "제목 변경" } if(title instanceof Element) { } let title2 = document.querySelector("#title") as Element; if(t.. 2022. 1. 5.
class, factory function, prototype type alias로 타입을 지정하는 방법도 있지만, 실제로 javascript에서 지원하는 방법은 아니기 때문에 js로 컴파일 될 때 type은 날아간다. 이를 방지하기 위해서는 class를 이용해 object를 만드는 방법이 있다. class 혹은 factory function으로 instance를 만들어 사용할 수 있도록 할 수 있다. 개념적으로는 일반적인 java나 kotlin의 class와 비슷하지만, 어디까지나 데이터 혹은 prototype에 등록하여 사용할 함수를 위한 목적이 강하다. factory function은 class 키워드가 도입되기 전에 사용했던 문법으로 기능적으로는 비슷하지만 자세히 들여다보면 같은 기능임에도 조금 차이가 나긴한다. 어느 문서에 따르면 class가 메모리 측면에.. 2022. 1. 3.
type alias & readonly & type alias extends, literal type과 as const 타입을 다 기재할 필요 없이 변수에 담아 사용 가능하다. // 아래 변수의 타입을 let value: string = "lee"; // alias해서 사용 type Name = string; let newValue: Name = "lee"; const 변수는 값을 바꿀 수 없지만, object의 내용은 바꿀 수 있다. 그래서 그 값을 변경하지 못하도록 readonly로 만들 수 있다. const name = "lee"; name = "kim";// 에러 const value = { name : "lee", age : 25 }; value.name = "kim";// 에러 안남 type Person = { readonly name : string, age : number } const newValue : .. 2022. 1. 1.

티스토리툴바