Frontend/Typescript

추상클래스의 인스턴스는 만들 수 없다. 상속받는 클래스가 어떻게 동작해야할지 알러주기 위해 추상클래스를 사용한다. 추상클래스는 클래스에게 어떻게 구현할지를 알려주는 것이 아니라 무엇을 구현해야 할지에 대해 알려준다. 그러나 자바스크립트에는 추상클래스의 개념이 없다. 우리는 왜 추상클래스를 만드는 걸까? 다른 클래스들이 표화된 속성과 메소들르 갖도록 해주는 블루 프린트를 만들기 위해 추상클래스를 사용한다. 인터페이스는 컴파일하면 js로 바뀌지 않고 사라진다. 인터페이스를 쓸 때 클래스가 특정 형태를 따르도록 어떻게 강제할까? 추상클래스 -> 인터페이스 인터페이스는 자바스크립트에서 존재하지 않아 코드가 보이지 않아 훨씬 간단해졌다. 인터페이스를 상속할 때는 속성을 private로 만들지 못한다. public..

[key:string] Words 타입이 string만을 속성으로 가지는 객체라는 것을 말한다. [key:number] 도 될 수 있다. 그러면 "potato" 가 에러가 난다. [key:string] 이 형식(객체)은 제한된 양의 속성만 가질 수 있다. 속성에 대해서 미리 알지 못하지만 타입을 미리 알고 있을 때 쓰면 된다. 클래스를 타입처럼 활용하는 것이 가능하다.!! 이런식의 지정된 특정 값을 갖는 type을 사용하는 것도 가능하다! interfaces 인터페이스는 오브젝트를 설명하는 또다른 방법이다. type -> interface로 바꿔도 에러가 나지 않는다. typescript에서 object의 모양을 알려주는 방식 2가지가 type과 interface이다. 하지만 interface는 오직 o..

private 키워드는 오직 typescript에서 보호해주기 위해서 사용한다. / 따로 설정이 안해주면 기본적으로는 모두 public이다. abstract : 추상클래스는 다른 클래스가 상속 받을 수 있는 클래스이다. 하지만 직접 새로운 인스턴스를 만들 수는 없다 타입스크립트는 추상클래스의 인스턴스를 만들 수 없다고 경고한다. 상속 받은 자식클래스에서는 부모 메소드를 사용할 수 있다. 자바스크립트에서는 abstract이 전혀 언급되지 않는다. 추상 메소드를 만들려면 메소드를 클래스 안에서 구현하면 안다. 추상클래스 안에서는 추상 메소드를 만들 수 있는데 추상 메소드 안에는 메소드를 구현하면 안되고 call signature만 적어둬야 한다. 추상메소드(코드가 없는 메소드)는 추상 클래스를 상속 받는 모..

다형성은 무엇인가? 다형성(polymorphism)이라는 단어는 원래 '여러 개의 형태를 갖는다'라는 의미이다. poly(하나 이상), morph(형태)가 합성된 단어로 '하나 이상의 형태'를 뜻한다 concrete type number , boolean, string,void형 같은 타입 type SuperPrint = { (arr:number[]):void (arr:string[]):void (arr:boolean[]):void (arr: (number | boolean)[]):void } const superprint:SuperPrint = (arr) =>{ arr.forEach(i => console.log(i) ) } superprint([1,2,3,4]) superprint([true, fal..

Call Signatures type Add = (a:number, b:number) => number //함수의 리턴값의 type이 number이다! function의 type을 정해두는 것! type Add = { (a:number, b:number) : number } 위의 코드와 같은 유형 오버로딩은 함수가 여러개의 call signatures를 가지고 있을 때 발생시킨다. Overloading 한 클래스에 이름이 동일한 메서드가 중복 정의되어 있는 경우를 메서드 오버로딩(overloading)이라 한다. 또 다른 예 // call signatures 파라미터의 타입 다른 예 type Add = { (a:number, b:number) : number (a:number, b:string) : nu..

age? const player : { name:string, age? :number } = { name:"doyi" } typescript는 선택적 변수(optional parameter)를 지정할 수 있게 한다. type type Player = { name:Name, age?:number } typescript 는 객체의 타입을 따로 지정할 수 있다. const doyi : Player = { name:"doyi", age:23 } 이런식으로 응용이 가능하다! readonly type people = { readonly name:Name, age?:number } const peoplean = (name:string) : people => ({name}) const c = peoplean("sss"..

타입스크립트(TypeScript)란? 타입 스크립트는 자바스크립의 단점을 보완하기 위해 만든 언어이다. 뛰어난 타입 안정성 때문에 런타입에러도 줄게되고 생산성도 늘어나 전반적으로 자바스크립트보다 코드에 버그가 엄청 줄게 된다!! 자바스크립트에서는 이런식으로 타입이 같지 않음에도 에러가 나는게 아니라 이상한 코드를 출력한다. 마찬가지로 a,b 라는 숫자 2개를 보내지 않았음에도 코드는 실행되고 있다. 이것또한 에러가 나긴했지만 코드가 실행되고 나서 발생하는 에러이다. 제일 좋은 방식은 코드가 실행되기 전에 hello() 라는 메소드를 doyi라는 객체가 가지고 있지 않다는 것을 알려주는 것이다. 타입스크립트(TypeScript) 시작하기 일반 HTML CSS JS 개발 1. node 설치하기 https:/..