TypeScript

공부

never type은 아무 값도 저장하고 있지 않은 타입임. 따라서 never type을 가지고 있는 변수에는 값을 할당할 수 없음.보통 아래처럼 언제나 에러를 리턴하는 함수에 사용함.아래 forever()처럼 무한루프를 보유한 함수의 return type도 never

위 처럼 union type으로 변수가 여러개의 type중 하나를 가질 수 있게됨.union type으로 변수에 하나 이상의 tpye을 지정할 수 있음.출처

type alias로 이미 존재하는 type에 대해 새로운 이름을 붙여줄 수 있음.syntax는 아래와 같음.아래는 string type에 char라는 이름 붙여서 사용함.union type에 alias 사용하면 편함.type alias로 type에 다른 이름 붙여서

string literal type으로 오직 하나의 string literal만 받는 type 만들 수 있음.아래는 'click'만 받음.아래 처럼 union type이랑 같이 써서 변수에 들어갈 string set을 정하기도 좋음. string literal typ

if문은 조건에 따라서 코드를 실행함.조건 간단하면 삼항 연산자가 보기 편함.위 코드에서는 itemcount가 0보다 같거나 작을 경우를 상정하지 않았기 때문에 아래처럼 만드는게 좋음. 출처

아래는 switch...case문의 syntax임.Output: DeleteOutput: The month 2 in 2020 has 29 days

아래는 typecript for문의 syntax임.for문은 3개의 optional expression을 가짐.initializtion은 반복문이 맨 처음 시작할때 evalutated됨.보통 이거로 반복문 counter를 초기화할때 사용함.condition은 반복을 할

아래는 do...while의 syntax임.do...while은 condition이 false가 될때까지 {}안에 있는 코드를 돌림. 따라서 do...while은 최소 한번은 반복문 안의 코드가 돌아감. while과 달리 do...while은 각 반복이 끝난 후에 co

break로 반복문 종료하고 반복문 다음에 있는 코드로 프로그램 진행시킬 수 있음.Output:아래는 break로 switch문 나가는 예시임.Output:break로 반복문이나 switch 종료가능출처

자바스크립트처럼 function 키워드를 사용해서 함수 선언가능.자바스크립트랑 다른점은 parameter와 리턴값에 type을 지정해줄 수 있음.아래 add()함수는 number type의 parameter 2개를 받음.add()를 불렀을때 컴파일러가 함수에 넘겨진 인

function type은 parameter와 return type 2개가 있음. 함수 선언할때 아래와 같은 syntax로 두 개다 해줘야함.아래 예시는 2개의 number를 받아서 number를 리턴해주는 function type을 가지는 변수를 선언함.위 예시에서

자바스크립트에서는 함수가 parameter를 받도록 되어있음에도 불구하고 함수를 인자 넘기지 않고 부를 수 있음. 이는 자바스크립트가 optional parameter를 기본으로 지원하기 때문임.반면에 타입스트립트에서는 컴파일러가 함수를 부를때마다 아래와 같은 경우에

자바스크립트는 아래의 syntax로 default parameter를 지원함.위와 같은 syntax에서 인자를 넘겨지주지 않거나 undefined를 넘겨주게 되면 함수가 default값을 사용해서 해당 인자를 초기화함.타입스크립트도 자바스크립트랑 같은 syntax를 사

rest parameter는 함수로 하여금 특정한 type인 0개 이상의 인자를 받을 수 있게 해줌. 타입스크립트에서 rest parameter는 다음과 같은 규칙을 따름.함수마다 한 개의 rest parameter를 가질 수 있음.rest parameter는 para

타입스크립트에서 function overloading으로 parameter의 type과 result 값의 type관계를 설정할 수 있음.cfunction addStrings(a: string, b: string): string { return a + b;}근데 u

constructor 함수와 prototype inheritance로 클래스 만들 수 있음.ssn, firstName, lastName 이렇게 3개의 property를 가지는 Person 클래스를 만들고 싶으면 아래의 constructor 함수를 사용하면 됨.다음으로

접근 제어자는 클래스의 property와 method들의 접근 권한을 바꿔줌. 타입스크립트는 priavate, protected, public 3가지를 제공함.타입스크립트는 런타임때 접근 권한을 제어하는게 아니라 컴파일 할때 logical 하게 제어함.private은

타입스크립트는 readonly modifier를 통해서 클래스의 property를 immutable하게 해줌.readonly property에 값을 할당하는거는 아래의 상황에서만가능함.property 선언할때같은 클래스의 생성자 안에서만property를 변하지 않게 하

위 Person클래스의 property들에 접근하려면 간단히 아래처럼 할 수 있음.유저한테 입력을 받아서 age property의 값을 할당한다고 하면 입력값이 내가 원하는 값인지 아래처럼 확인을 해줘야하는데 이렇게 계속 하는거는 번거로움.따라서 setter와 gett

클래스는 다른 클래스의 property와 method들을 재사용 할 수 있음. 이를 상속이라고함.property와 method를 상속받은 클래스를 child class라고 하고 상속해준 클래스를 parent class라고함.자바스크립트는 프로토타입 상속으로 상속을 구현

인스턴스 property와는 다르게 static property는 클래스의 모든 인스턴스들 사이에서 공유됨.static propoerty를 선언하기 위해서는 static키워드를 사용해야하며 static property에 접근하기 위해서는 className.propert

추상 클래스는 보통 파생될 클래스들의 공통점을 모아서 정의하기 위해서 사용됨. 일반적인 클래스와는 다르게 바로 인스턴스화 되지 않음.추상 클래스를 선언하기 위해서는 아래처럼 abstract 키워드를 사용해야함.일반적으로 추상클래스는 하나 이상의 추상 메소드를 가지고 있

아래 예제에서 타입스크립트 컴파일러가 getFullName()으로 넘어간 인자가 2개의 property를 가지고 모두 string인지 확인해서 맞으면 통과시켜줌.위 처럼 했을때 함수 인자의 타입 선언이 가독성이 별로 않좋기 때문에 타입스크립트는 인터페이스를 제공함.아래

위의 Mailable이라는 인터페이스가 2개의 메소드를 가지고 있고, 이 인터페이스를 사용한 클래스가 있을때 인터페이스에 아래와 같은 새 메소드를 추가하려하면 문제가 있음.문제를 해결하기 위해서 이미 있는 Mailable 인터페이스를 확장한 새 인터페이스를 만들어야함.

intersection 타입은 여러개의 타입을 조합해서 새로운 타입을 만들어냄. 이렇게 만들어맨 타입은 조합한 타입들의 기능을 전부 가지고 있음.타입을 합치려면 &연산자를 아래와 같이 사용하면됨.typeAB는 typeA와 typeB의 property를 가지게됨.반면에

type guard는 조건문을 통해서 변수가 가질 수 있는 타입의 개수를 줄여나가게 해줌.위 코드에서 2개의 인자가 모두 number 혹은 string인지 확인하고 각각에 맞는 리턴을 해줌. 만약에 2개의 인자가 모두 number, string이 아닌경우에는 에러나오게

자바스크립는 변수들이 동적 타입을 가져 타입 캐스팅의 개념이 없지만 타입스크립트는 있음. 타입 캐스팅으로 변수의 타입을 바꿀 수 있음.as키워드나 <>연산자를 통해서 타입캐스팅을 할 수 있음.document.querySelector()의 리턴 타입이 Element

type assertion은 타입스크립트 컴파일러한테 해당 타입으로 가정하도록 지시함. as키워드를 사용해서 할 수있음.type assertion은 type narrowing으로 알려져있기도함. type assertion으로 유니온 타입을 narrow 할 수 있음.위

타입스크립트 제네릭은 함수, 클래스, 인터페이스를 재사용가능한 일반적인 폼으로 쓰게 해줌.number 배열의 랜덤한 element를 리턴해주는 함수를 만들어야 한다고 할때 아래의 getRandomNumberElement() 함수는 parameter로 number\[]를

아래와 같은 예시가 있다고 할 때merge()는 2개의 객체를 합쳐주는 제네릭 함수임.merge() 함수는 2개의 객체가 들어오기를 기대하고 있는데 아래처럼 객체가 아닌게 넘어오는거를 막지는 못함.위 코드는 에러가 안나오기는 함.이렇게 모든 타입에 대해서 동작하는것보다

클래스와 비슷하게 인터페이스도 제네릭하게 할 수 있음. 제네릭 인터페이스는<>안에 제네릭 타입 parameter list를 가지고 있음.위는 type parameter T가 인터페이스의 모든 멤버한테 보이게 만들어줌.이 type parameter list는 아래처

제네릭 클래스는 제네릭 타입 parameter list를 <>안에 가지고 있음.타입스크립트는 아래처럼 여러개의 제네릭 타입을 타입 parameter list에 가질 수 있게해줌.제네릭 constraints는 클래스의 제네릭 타입에도 사용가능함.type parame

타입스크립트 모듈은 선언과 코드를 모두 가지고 있음. 모듈은 글로벌 scope에서 실행되는게 아리나 자신만의 scope에서 실행됨. 모듈 안에서 변수, 함수, 클래스, 인터페이스를 선언하면 export로 export하지 않는 이상 모듈 밖에서는 보이지 않음.따라서 모듈

keyof operator는 객체의 타입을 받아서 그 키의 string이나 number의 literal union을 만듬.아래 type P는 'x'|'y' 타입이랑 같음.타입이 string이나 number \*index signature를 가지고있으면 keyof는 그

위 코드에서 pop()에 나오는데 이유는 함수 리턴하는 시점에서 해당값 타입유추를 하기 때문에 this.elements.length == 0으로 유추 해버리면 아래 코드처럼 if 다음에 pop을 한번 더 했을 경우에 this.elements.pop()가 undefin

에서 ?가 뭐임?result: T | undefined랑 같은 말임.ts에서 변수에 ! 붙이는게 뭐임?컴파일러한테 이거는 확실히 undefined가 아니니까 컴파일 하라는 뜻임.

destructuring assignment로 배열이나 객체에서 값 풀어서 저장할 수 있음.출처

브라우저의 세션에 유지되는 data를 window 인터페이스로 저장할 수 있음.setItem으로 현재 도메인의 로컬 Storage 객체에 데이터를 넣을 수 있음.이러면 아래처럼 저장됨.객체를 저장하면 object Object 이렇게 나옴.따라서 JSON.stringif