Typescript/개념

overview 이 글에서는 여러 옵션중 `files`, `include`, `exclude`에 대해서 다룹니다. { "compilerOptions": { "out": "test.js" }, "files": [ "literal.ts" ], "include": [ "**/*.ts" ], "exclude": [ "node_modules", "tests/**/*.spec.ts", "utils/t2.ts" ] } 1. files 프로그램에 포함할 파일의 허용 목록을 지정할 수 있습니다. 파일을 찾을 수 없으면 오류가 발생합니다. { "compilerOptions": {}, "files": [ "core.ts", "sys.ts", "types.ts", "scanner.ts", "parser.ts", "utilit..

1. 상속 타입스크립트에서는 일반적인 객체지향 패턴을 사용할 수 있습니다. 클래스 기반 프로그래밍의 가장 기본적인 패턴 중 하나는 상속을 이용하여 이미 존재하는 클래스를 확장해 새로운 클래스를 만들 수 있다는 것입니다. 예제를 봅시다. class Animal { move(distanceInMeters: number = 0) { console.log(`Animal moved ${distanceInMeters}m.`); } } class Dog extends Animal { bark() { console.log('Woof! Woof!'); } } const dog = new Dog(); dog.bark(); dog.move(10); dog.bark(); 타입이 추가된것을 제외하고 자바스크립트에서 보았던 클래..

1. Generics ? 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 제네릭을 함수처럼 생각하면 쉽다. function getText(text) { return text; } getText('hi'); // 'hi' getText(10); // 10 getText(true); // true 우리가 getText함수에 문자열을 넣으면 문자열이나오고 숫자를 넣으면 숫자가 나오고 불리언을 넣으면 불리언이 나오는 것 처럼 제네릭도 비슷한 개념이라고 생각하면 이해하기 쉽다. 자 위 자바스크립트 코드를 타입스크립트로 바꿔보자 function getText(text : string | number | boolean) { return t..

개념공부를 하다가 타입스크립트의 void가 명확하게 이해가 되지 않아 정리해보았다. 1. void 1) 정의 void는 값을 반환하지 않는 함수의 반환 값을 의미한다. 함수에 return 문에 없거나, 명시적으로 값을 반환하지 않을 때, 추론되는 타입이다. 위 정의에서도 보았듯이 우리가 타입스크립트에서 함수를 작성하고 return을 하지 않는다면 알아서 void로 추론을 한다. 그리고 그러한 함수들의 반환 값은 undefined로 평가된다. 자바스크립트에서는 아무것도 반환하지 않는 함수는 암묵적으로 undefined 값을 반환한다. 하지만 타입스크립트에서 void와 undefined는 같은 것으로 간주되지 않는다. 그렇다면 실제로 해보자 타입스크립트에서 void함수를 undefined 타입으로 지정한 ..

2. polymorphism poly란? - many, serveral, much, multi 등과 같은 뜻이다. morphos란? - form, strucure등과 같은 뜻이다. 따라서 polymorphism은 다형성을 뜻한다 기본적으로 함수는 여러가지 다른 모양을 가지고 있다. 타입스크립트에서 함수는 다른 2~3개의 parameter를 가질 수 있다. 또는 타입스크립트에서 함수는 string이나 object를 첫번째 파라미터로 가질 수 있다고 했다. 그러니까 우리는 이미 약간의 여러가지 모양의 다형성을 해본것이다. 이번시간에는 여기에 더 도움을 줄 제네릭에 대해서 알아볼 것이다. 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이..

effective Javascript를 읽다가 declare를 제대로 알지 못하여 이에 대해 검색해보았다. 그러다가 알게된 것들이 많아 이렇게 정리하게 되었다. (그 궁금증으로 인해 엄청난 시간이 소요되었다. ㄷㄷㄷ) 우리가 일반적인 자바스크립트 환경에서는 두 개의 JS파일을 같이 사용하고자 한다면 아래처럼 해도 된다. // data.js const a = 10; // index.js console.log(a + 5); // index.html "hi" 이런식으로 해도 정상적으로 작동한다. 하지만 js와 ts를 같이사용한다면 ? // data.js const a = 10; // index.ts console.log(a + 5); // index.html "hi" // ts를 컴파일한 js파일 ( tsc ..

class 보통 자바스크립트에서는 Constructor 함수를 만들고 그 안에 this.firstName = firstName 혹은 this.lastName = lastName 같은 코드를 넣어줄 것이다. 하지만 타입스크립트는 이렇게 하지 않아도 된다. 파라미터들을 써주기만 하면 타입스크립트가 알아서 Constructor함수를 만들어준다. // js "use strict"; class Player { constructor(firstName, lastName, nickname) { this.firstName = firstName; this.lastName = lastName; this.nickname = nickname; } } const coco = new Player("coco", "chanel", "..

call signatures call signatures는 우리가 작성한 함수에 마우스를 올려놓으면 나오는 것을 말한다. 이것은 우리가 함수를 어떻게 호출해야하는 지 알려준다. 즉 인자의 타입이랑 return의 타입을 알려주는 것이다. 자 그럼 우리만의 call signature를 어떻게 선언할 것인지 알아보자. type Add = (a:number, b:number) => number const add:Add = (a,b) => a+b 이렇게 해놓으면 우리가 처음 함수를 만들 때 처럼 일일히 type을 지정해줄 필요가 없다. 이런식으로 type Add만 만들고 함수 옆에 적어준뒤 마우스를 올리면 어떤 type인지 다 알려준다. overloading Function(=Method) Overloading은..

1) unknown TypeScript 3.0에서 unknown 타입이 도입이 되었다. unknown 타입은 단어의 뜻과 동일하게 '알 수 없다, 모른다'라는 의미를 가진다. unknown 타입은 any 타입과 동일하게 모든 값을 허용하지만, 할당된 값이 어떤 타입인지 모르기 때문에 함부로 프로퍼티나 연산을 할 수 없다. unknown 타입은 any와 마찬가지로 모든 타입의 값이 할당될 수 있다. let variable: unknown variable = true // OK (boolean) variable = 1 // OK (number) variable = 'string' // OK (string) variable = {} // OK (object) 하지만 조금 다른 것은 unknown 타입으로 선언..