개발 알다가도 모르겠네요

TS2532: Object is possibly 'undefined'. 또는 변수를 함수에 넘기고자 할 때 function validateToken(token: string) { return token; } const token = 'kjadj' as string | undefined; validateToken(token); 아래와 같은 Typescript 에러 메시지가 발생한 적이 있을 것이다. TS2322: Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. 이러한 에러가 발생하는 이유는 typescript가 예상하고 있는 특정한 type이 아닌, ..

타입 앨리어스는 새로운 타입을 정의합니다. interface Person { name: string, age?: number } // 빈 객체를 Person 타입으로 지정 const person = {} as Person; person.name = 'Lee'; person.age = 20; person.address = 'Seoul'; // Error 타입 앨리어스도 인터페이스와 마찬가지로 타입으로 사용할 수 있습니다. // 타입 앨리어스 type Person = { name: string, age?: number } // 빈 객체를 Person 타입으로 지정 const person = {} as Person; person.name = 'Lee'; person.age = 20; person.address..

Developer과 Person이라는 인터페이스를 설정하고 함수에 두 인터페이스를 유니온 방식으로 정의해주면, interface Developer { name:string; skill:string; } interface Person { name:string; age:number; } function introduce(): Developer | Person { return { name : 'Tony', age : 33, skill: 'Iron Marking'} } let tony = introduce(); console.log(tony.skill); // error 함수를 tony 변수에 할당한뒤 정의해준 속성 skill을 출력했을때 접근하지 못하고 에러가 발생합니다. 유니온 속성은 공통된 속성에만 접근할..

let bool = true; const arr = [1, 2, 3]; const tuple = [true, 1]; bool = 1; // Error! 아래의 tuple 변수는 배열의 요소가 각각 boolean과 number이기에 최종적으로 추론되는 타입은 boolean과 number의 유니온 타입의 배열, 코드로 나타내면 (boolean | number)[]이 됩니다. 여기에서 배열에서 사용된 요소들의 타입을 각각 추론하여 유니온 타입으로 만들어 내는 방식을 Best common type이라고 부릅니다. Best common type Best common type 은 말 그대로 가장 일반적인 타입입니다. 여러가지 자료형이 배열 내부에서 사용되고 있을 때, 그 여러가지 자료형을 포괄할 수 있는 가장 일반..

TypeScript에서는 enum을 사용하는 것이 가능합니다. enum Color { RED, GREEN, BLUE } 선언 후에 아래와 같이 사용할 수 있습니다. function setColor(color: Color) { // ... } setColor(Color.RED); var Color = { RED: 0, GREEN: 1, BLUE: 2, 0: 'RED', 1: 'GREEN', 2: 'BLUE' }; enum 키워드는 기본적으로 리버스 매핑(reverse mapping)을 지원합니다. 리버스 매핑이란 키로 값을 얻을 수 있을 뿐만 아니라, 값으로도 키를 얻을 수 있는 방식을 말합니다. 선언과 값 초기화 enum으로 만들어진 변수에는 내부적으로 값이 할당됩니다. 별도의 명시가 없다면 값은 0부터..

function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y }; 각 파라미터와 함수 자신의 반환될 타입을 정해줄 수 있습니다. TypeScript는 반환 문을 보고 반환 타입을 파악할 수 있으므로 반환 타입을 생략할 수 있습니다. 함수 타입 작성 let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; }; 함수의 타입은 매개변수, 반환 타입이 있습니다. 전체 함수 타입을 작성하고자 한다면 이 두 가지 타입이 필요합니..

TypeScript는 인터페이스를 지원하는데 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있습니다. 인터페이스는 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것입니다. 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나, 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드입니다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않습니다. // 인터페이스의 정의 interface Todo { id: number; content: string; completed: boolean; } let todos: Todo[] = []; // 파라미터 todo의 타입으로 Todo 인터페이스를 선언하였다. f..

제네릭은 어떠한 클래스 혹은 함수에서 사용할 타입을 그 함수나 클래스를 사용할 때 결정하는 프로그래밍 기법을 말합니다. JavaScript는 원래 타입 선언이 필요하지 않고, 코드를 실행시키기 전까지는 함수와 클래스가 모든 타입에 대응합니다. 반면에 TypeScript는 정적 타입 언어이기 때문에, 기본적으로 타입을 정의한 함수 혹은 클래스는 모두 다른 타입에 재사용할 수 없습니다. 제네릭을 사용하는 이유 다음과 같이 스택 자료구조를 TypeScript로 구현한다고 가정하면 class Stack { private data: any[] = []; contructor() {} push(item: any): void { this.data.push(item); } pop(): any { return this.d..

ES6 클래스는 클래스 몸체에 메소드만을 포함할 수 있습니다. 클래스 몸체에 클래스 프로퍼티를 선언할 수 없고 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화합니다. // person.js class Person { constructor(name) { // 클래스 프로퍼티의 선언과 초기화 this.name = name; } walk() { console.log(`${this.name} is walking.`); } } Typescript 클래스는 클래스 몸체에 클래스 프로퍼티를 사전 선언해야 합니다. // person.ts class Person { // 클래스 프로퍼티를 사전 선언하여야 한다 name: string; constructor(name: string) { // 클래스 프로퍼티수에 값..

타입스크립트란? 타입스크립트는 MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어입니다. 타입스크립트는 자바스크립트의 상위 집합으로서 ECMA의 최신 표준을 지원합니다. 기존의 ES5 자바스크립트 문법을 그대로 사용할 수 있으며, Babel과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 사용할 수 있습니다. 타입스크립트의 장점은 정적 타입 언어이기 때문에 컴파일 시 시간이 조금 걸리더라도 안정성을 보장한다는 점입니다. 자바스크립트의 경우는 동적 타입 언어이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않습니다. 타입스크립트는 자바스크립트의 이러한 단점을 보완하기 위해서 만들어 졌고, 이러한 이유로 MS에서는 타입스크립트에 “JavaScript t..