profile
프론트엔드 개발자

느낌표 두개(!!) 연산자

!!는 다른 타입의 데이터를 boolean 타입으로 명시적으로 형 변환(Type Conversion) 하기 위해 사용한다. false로 변환 "" false NaN undefined null 0 true로 변환 그 외 나머지

2022년 9월 16일
·
0개의 댓글
·

유틸리티 타입

Partial 모든 속성들을 optional하게 변경한다. Required 모든 속성들을 required 속성으로 만들어준다. Partial과 반대 ReadOnly 모든 속성들을 읽기 전용(readOnly)으로 설정한 타입을 구성한다. 즉 모든 속성들의 값을 변경할 수 없고 참조만 할 수 있도록 만든다. NonNullable 주어진 타입 T에서 null과 undefined를 제외한 타입을 구성한다. ReturnType T의 return type을 그대로 할당한다. Pick 특정 타입에서 몇 개의 속성을 선택하여 타입을 정의한다. Omit 특정 속성만 제거한 타입을 정의한다. Pick과 반대

2022년 6월 28일
·
0개의 댓글
·

널병합연산자 ??

a ?? b a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b ??와 ||의 차이 ||는 첫 번째 truthy 값 반환 ??는 첫 번째 정의된(defined) 값 반환 널병합연산자 ??를 사용하면 피연산자 중 '값이 할당된' 변수를 빠르게 찾을 수 있다. 예)

2022년 6월 28일
·
0개의 댓글
·

declare 키워드

declare 키워드는 컴파일러에게 해당 변수나 함수가 이미 존재한다는 것을 알리는 역할을 한다. 다른 영역의 코드에서 declare로 선언된 해당 변수나 함수를 참조할 수 있다. declare로 선언된 부분은 JS로 컴파일 되지 않고 TS 컴파일러에게 타입 정보를 알리기만 한다. 이미 생성된 변수에 타입을 추가하고 싶을 때 사용하는 것 같다. declare 블록 이 영역 안에서는 declare 키워드가 기본으로 붙는다. 또한 이 영역 안에서는 선언 코드가 아닌 일반 코드를 작성할 수 없다. declare namespace ABC declare module "ABC" declare global: 모듈 파일에서도 전역 참조가 가능한 선언 코드를 작성하고 싶을 때 사용한다. 전역 참조가 가능하다는 것은 해당 선언의 참조를 위해 별도의 불러오기 코드가 필요 없다는 뜻이다. 참고로 이 블록은 오로지 declare module 블록 안에서만 중첩이 가능하다. 예)

2022년 6월 28일
·
0개의 댓글
·

Generics

https://www.typescriptlang.org/docs/handbook/generics.html generic은 재사용 가능한 요소들을 생성하기 위한 도구이다. 한 가지 타입보다는 여러 가지 타입으로 사용가능하게 만들어 다양하게 쓸 수 있다. Hello World of Generics generic의 기본은 identity function이다. identity function은 전달받은 것을 그대로 다시 반환하는 함수이다. generic을 사용할 때에는 안에 타입을 넣어 사용하면 된다. 위 예제에서 타입을 직접 설정하여 사용해도 되지만, TypeScript는 parameter의 타입을 추론할 수 있기때문에 생략해도 무방하다. Working with Generic Type Variables generic 타입의 변수를 사용할 때에는 해당 변수가 모든 타입이 될 수 있음을 감안해야 한다. 즉, 해당 변수가 가질 수 있는 속성이 무엇인지 주의하여

2022년 6월 28일
·
0개의 댓글
·

Enums

Enum은 JavaScript에서 타입 확장이 되지 않았다. Enum을 사용하면 이름을 가진 상수 집합을 만들 수 있고 TypeScript는 numeric enum과 string-based enum을 제공한다. Numeric Enums enum 키워드를 사용하여 enum을 생성할 수 있다. enum이 초기화되지 않는다면 차례로 0부터 1씩 증가하는 값을 가지며 초기화된다면 초기화 된 값부터 차례로 1씩 증가한 값을 가진다. 아래 예제에서는 Up이 1로 초기화되었으므로 자동으로 Down은 2, Left는 3, Right은 4의 값을 가진다. initializer가 없는 enum 멤버는 첫 번째에 위치하거나 숫자 상수로 초기화된 멤버 뒤에 위치해야 한다. enum을 사용하려면 enum 자체의 property를 그대로 사용하고 enum의 이름을 사용하여 타입으로 선언하면 된다. String Enums string enum은 각 멤버들이 string liter

2022년 6월 28일
·
0개의 댓글
·

Classes

https://www.typescriptlang.org/docs/handbook/classes.html Classes 클래스가 가질 수 있는 멤버는 property, method, constructor이다. 클래스 내부에서 이 멤버들은 "this."를 통해 접근할 수 있다. 클래스 객체는 new라는 키워드를 사용하여 생성한다. Inheritance 클래스는 상속을 사용하여 기존에 존재하던 클래스(base class 또는 superclass)를 확장한 새로운 클래스(derived class 또는 subclass)를 생성할 수 있다. 상속할 때에는 extends 키워드를 사용한다. derived class는 base class의 멤버들을 사용할 수 있다. base class에 constructor가 존재할 경우 derived class에서 super를 사용하여 base class의 constructor를 초기화 시켜줘야 하며 base class의 멤버에 접근

2022년 6월 28일
·
0개의 댓글
·

Unions and Intersection Types

https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html TypeScript에서는 단일 타입들을 결합하여 사용할 수 있다. Union Types 수직선( | )을 사용하여 union type을 나타내면 여러 타입들 중 하나가 될 수 있음을 의미한다. 즉 string | number는 해당 변수가 string 또는 number가 될 수 있음을 의미한다. Unions with Common Fields union type을 사용할 때 모든 타입에서 공통적으로 가지고 있는 멤버들에만 접근할 수 있다. Bird와 Fish에서 layEggs라는 method만 공통으로 가지고 있으므로, Fish | Bird 타입인 변수에서는 layEggs만 사용이 가능하다. Discriminating Unions union type을 구성하는 모든 타입에 literal 값을 사용하는 공통 f

2022년 6월 28일
·
0개의 댓글
·

Functions

https://www.typescriptlang.org/docs/handbook/functions.html Functions JavaScript에서와 같이 TypeScript에서는 함수들이 함수의 이름이 존재하는 named function 혹은 함수의 이름이 없는 anonymous function으로 생성될 수 있다. 또한 함수들은 함수 바깥에 있는 변수들을 사용할 수 있고, 이 변수를 captured variable이라고 한다. Typing the function 함수의 parameter와 return 값에 타입을 정할 수 있다. Writing the function type 함수 전체의 타입은 (parameter name: type list) => return type 형식으로 나타낸다. parameter들의 이름은 정확하지 않아도 type만 정확하면 정확한 함수 타입으로 간주된다. Inferring the types TypeSc

2022년 6월 22일
·
0개의 댓글
·

Interfaces

https://www.typescriptlang.org/docs/handbook/interfaces.html TypeScript는 structural subtyping을 사용한다. 즉, 변수가 가진 모양을 기준으로 타입을 판단한다. interface는 이런 type들의 이름을 지정하는 역할을 한다. Our First Interface interface는 LabeledValue라는 타입의 구조(shape)을 정의한다. printLabel은 myObj가 label이라는 이름을 가진 string 타입을 가진 property가 있는지만 확인하고 그 외는 확인하지 않는다. Optional Properties property의 이름 뒤에 물음표(?)를 붙여서 존재할 수도 있고 아닐 수도 있는 property임을 명시한다. 이 경우 undefined가 자동으로 포함되기 때문에 undefind를 굳이 별도로 추가하지 않아도 된다. Readonly propertie

2022년 6월 22일
·
0개의 댓글
·

Basic Types

https://www.typescriptlang.org/docs/handbook/basic-types.html --- Boolean true/false의 값을 가짐 Number 숫자, floating point나 BigInteger와 같은 숫자들도 포함 BigInteger는 bigint 타입을 가짐 String 문자열 쌍따옴표(")나 따옴표(')를 사용하여 표기 templete string: 역따옴표(\`)를 사용하여 표기, 여러 줄과 ${expr}로 변수를 나타낼 수 있음 Array 아래 두 가지 방법으로 선언할 수 있음 Tuple 각 element의 타입과 element의 수가 지정되어있는 array Enum 여러 개의 데이터를 한 묶음으로 모음 Unknown 변수가 어떤 타입이든 될 수 있음을 나타냄 typeof 이나 비교를 통해 unknown 변수의 타입을 확인할 수 있음 A

2022년 6월 21일
·
2개의 댓글
·

TypeScript for JavaScript Programmers

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html 타입스트립트에 대한 간략한 개요. 1. Types by Inference TypeScript는 명시되지 않아도 변수의 type을 추론할 수 있다. 2. Defining Types 변수 뒤에 ":typename"을 붙여 type을 지정할 수 있다. 또한 interface라는 것을 사용하여 새로운 객체 type을 생성할 수 있다. 3. Composing Types Union을 사용하여 한 type이 여러 개의 type이 되도록 선언할 수 있다. ex) type WindowStates = "open" | "closed" | "minimized"; Generic을 사용하여 type을 변수처럼 지정하거나 정의할 수 있다. C++의 templete과 같다. ex) type StringArray =

2022년 6월 21일
·
0개의 댓글
·

타입스크립트 설치와 간단한 실행

타입스크립트 공식 문서: https://www.typescriptlang.org/download 1. NPM과 Node.js 설치 Node.js를 설치하면 NPM도 자동으로 설치된다. 여기에서 Node.js 다운받기 Node.js 설치(버전) 확인 node -v NPM 설치(버전) 확인 npm -v 2. 프롬프트 창에서 TypeScript 설치 npm install -g typescript TypeScript 설치(버전) 확인 tsc -v 간단한 hello.ts 파일을 작성해보자. 이후 ts 파일을 컴파일하여 js 파일을 만든다. tsc hello.ts 그러면 아래와 같은 hello.js 파일이 생성된다. 이 js 파일을 사용하면 끝!

2022년 6월 21일
·
0개의 댓글
·