Typescript

TS009. 타입스크립트의 내로잉 (Narrowing) 이란?

Type Narrowing 이란? Narrowing 이란 영어 자체의 뜻으로 봤을 때 범위를 좁힌다는 뜻이다. 처음 선언한 것보다 더 구체적인 유형으로 구체화하는 프로세스를 Narrowing 이라고 한다. 타입스크립트에서 어떻게 타입 유추를 정확하게 가져가는지에 대한 논리를 말한다. 주요 기술로는 Type Guards (IF 로 검사), Type Assertions (수동 재정의), Control Flow Analysis (프로그램 흐름 분석) 가 있다. Narrowing 을 통해 Union 타입에서 더욱 구체적인 타입으로 논리적으로 유추가 가능하다. Narrowing 의 간단한 코드 예제 아래의 예제는 Type Guards 를 이용한 예제이다. //Narroiwng 예제 function processI..

TS008. Typescript Intersection 이란?

Intersection 이란? | 기호였던 Union 과 반대되는 개념이다. Union 은 OR 였다면, Intersection 은 AND 개념이다. & 기호를 통해 묶어준다. interface Person { name: string; age: number; } interface Company { location: string; companyName: string; } type BusinessMan = Person & Company; // 계속 & 로 엮어나갈 수 있음 // 모든 프로퍼티를 다 채워야만 에러가 나지 안ㄶ음 let businessMan: BusinessMan = { name: "jake", age: 10, location: "seoul", companyName: "super startup"..

TS007. 타입스크립트 Union 이란?

유니온 (Union) 이란? 타입스크립트에서 타입을 병합할 수 있는 방법 중 하나임 | 기호를 이용함 아래의 코드에서 StringOrNumberType 은 string 이나 number 타입 두가지를 병합한 타입임 타입에 유연성을 제공함 type StringOrNumberType = string | number; let stringOrNumberType: StringOrNumberType = "김모씨"; stringOrNumberType = 100; 타입 가딩 (Type Guarding) 이용 Union 타입을 이용하는 경우 아래와 같이 instnaceof 혹은 typeof 를 통한 타입 가딩을 이용해 동작 방식을 지정해줄 수 있음 function combine(input1: number | string..

TS006. 타입스크립트 타입 캐스팅 및 주의점

캐스팅 방법 아래의 예제 코드와 같이 as 타입 으로 캐스팅 가능 let someNumber = 3; someNumber as any; const twoNumbers = [1, 3] as const; 주의점 타입스크립트는 언제나 자바스크립트로 컴파일 된다는 점이 중요 캐스팅하면 타입스크립트에서 인식되는 타입은 바뀌지만 자바스크립트에서는 그대로임 이 부분 때문에 자바스크립트와 타입스크립트 간의 타입 괴리가 생길 수 있음 아래 코드의 경우, string 으로 캐스팅을 해도 출력시 number 가 나옴 let anyNumber: any = 3; console.log(typeof (anyNumber as string)); // 결과로 number 가 나옴 any 로 캐스팅하는 경우 주의점 초보의 경우 타입 설정..

TS005. 타입스크립트의 타입 추론 (type inference)

타입 추론 (Type Inference) 타입스크립트에서 자체적으로 변수나 파라미터의 타입을 유추하는 기능 기본 타입 추론 예시 아래의 코드에서는 :number 와 같이 타입을 지정해주지 않았음에도 타입스크립트가 스스로 타입을 추론함 let myNumber = 1000; // number 타입 let myBoolean = true; // boolean 타입 let myString = "jake"; // string 타입 myNumber = "JAKE"; // 기존에 number 로 추론된 타입에 문자열을 넣으려 하면 에러가 발생함 const 키워드가 붙었을 때의 타입 추론 const 키워드가 붙으면 let 키워드와 좀 다르게 상수로 타입을 추론함 const 로 선언된 상수는 변화할 일이 없으니 더 구체적..

TS004. 타입스크립트의 Enum 타입 간단하게 알아보기

타입스크립트 Enum JS 에서는 enum 이 존재하지 않음 enum 을 대체하기 위해 일반 상수에 문자열을 넣는 방식으로 코드를 짜왔음 실수를 방지하기 위함 JS 에서 Enum 을 흉내내어 사용하던 방식 아래와 같이 특정 문자열에 대응되는 상수를 작성해놓으면 자동완성으로 오타없이 쉽게 이용이 가능 const REQUEST_STATE = "REQUEST"; const LOADING_STATE = "LOADING"; const DONE_STATE = "DONE"; const ERROR_STATE = "ERROR"; TS 에서 Enum 을 사용하는 방식 interface 와 흡사하게 선언함 = 없이 선언 아래와 같이 선언 시에 ts 컴파일 이후에는 숫자가 0부터 차례대로 들어감 enum State { REQ..

TS003. 타입과 인터페이스

타입과 인터페이스 type 과 interface 는 타입스크립트에서 새로운 타입을 정의할 때 사용하는 가장 일반적인 키워드이다. type 은 타입스크립트의 타입에 이름을 지어주는 역할을 한다. interface 는 타입보다 훨씬 나중에 생겼다. 타입 예제 type StringType = string; // StringType 이라는 타입 선언을 하고 string 타입과 동일하게 설정할 수 있다. type Sex = "male" | "female"; // n가지 중 하나를 선택하는 타입을 정의할 수도 있다. type Person = { // 객체 형태의 타입을 정의할 수도 있다. name: string; age: number; }; 타입을 통한 추상화 전후 살펴보기 me1 과 me2 의 타입 형태는 결국 ..

TS002. 자바스크립트의 기본(Primitive) 타입과 타입스크립트에만 있는 타입

자바스크립트의 기본 타입 자바스크립트의 기본 타입으로는 7가지 타입이 있다. string, number, bigint, boolean, symbol, null, undefined 이는 MDN 문서의 Primitive 항목에서 알 수 있다. 자바스크립트 기본 타입을 타입스크립트로 표현하기 기본 타입을 타입스크립트로 표현하는 방식은 기본적으로 변수명: 타입 을 이용해 변수를 선언하면 된다. const stringType: string = "String"; const numberType: number = 123; const bigIntType: bigint = BigInt(9999); const booleanType: boolean = true; const symbolType: symbol = Symbol(1..

TS001. 자바스크립트 -> 타입스크립트 변경 시 이점

자바스크립트 (동적 타입 언어) 의 한계 자바스크립트는 동적 타입 언어라 태생적 한계가 몇가지 있다. 런타임 타입 오류 함수의 매개변수로 의도치 않은 타입이 들어온다고 해도 런타임에 알 수 있다. 아래의 코드와 같이 무언가를 더하는 add() 라는 함수가 있다면, 들어오는 타입에 따라 반환 결과가 완전히 달라진다. MDN Plus 연산자 스펙 에 따라 문자열과 숫자가 + 연산자를 만나면, 숫자 타입의 매개변수는 "default" 를 힌트로 사용하여 형변환되어 문자가 된다. function add(a, b) { return a + b; } add(1, 2); add(1, "2"); // coersion 발생 아래와 같이 타입 체크를 런타임에 해줄 수 있지만, 말 그대로 런타임에 타입 체크를 하는 것이기 때..

DefinitelyTyped 프로젝트와 @types/모듈

개요 DefinitelyTyped 프로젝트는 일종의 자원봉사 프로젝트로, 여러 개발자들이 자발적으로 자바스크립트 모듈의 타입을 추가해주고 있다. 그리고 이렇게 추가된 타입은 npm 을 통해 다운받을 수 있다. npm 을 통해 타입을 다운받으면, IDE 에서 자바스크립트 모듈에 대한 타입 지원이 가능해진다. node 모듈의 타입을 다운받고 싶다면? npm install @types/node 위 명령어를 입력하면, 기본 node 모듈의 타입 정의를 다운받아 볼 수 있다.

타입스크립트를 실행시키는 방법

개요 node.js 만 설치된 환경, 혹은 브라우저만 설치된 환경에서는 타입스크립트를 그냥 실행할 수 없다. 타입스크립트를 밑바닥부터 실행하는 방법을 알아보자. tsc 설치하여 컴파일 후 실행하기 tsc 는 타입스크립트 컴파일러로 타입스크립트로 작성된 파일을 자바스크립트로 변환시켜주는 기능을 가지고 있다. typescript 패키지 설치하기 npm install -D typescript 위 명령어를 통해 타입스크립트 해석기를 설치할 수 있다. tsconfig 설정하기 { "include": [ "src/**/*" ], "compilerOptions": { "outDir": "build", "esModuleInterop": true, "target": "ES3", "strict": true, "allowJ..

타입스크립트 d.ts 파일 이용해보기

d.ts 파일이란? 일명 정의 (definition) 파일 이라고 불린다. 자바스크립트에서 다른 라이브러리에 있는 함수를 사용한다고 가정하면, 처음에는 아무런 도움을 받을 수 없다. 어떤 파라미터를 넣어야 할지, 어떤 결과 값이 나오는지 알 수 없고 공식문서를 꼼꼼히 읽으며 찾아봐야 한다. 그러나 요즘 만들어진 라이브러리는 다운만 받아도 IDE 에서 어떤 파라미터를 넣어야 하는지 자동완성 되는 경우가 흔하다. 누군가 매우 고생해서 해당 라이브러리에 쓰일 타입 정의 파일인 d.ts 파일을 전부 작성해놓았기 때문이다. 인자의 타입 반환 타입 등을 다 넣어놓은 파일이다. d.ts 파일이 있으면 코드 자동완성을 통해 생산성 높은 작업을 할 수 있다. 예시 (notifee 라이브러리) 스크린샷 위는 notifee..