타입스크립트 설명서

박정호·2022년 5월 8일
typescript
0

타입스크립트를 공부하며 러프하게 정리했던 글을 업로드한다.

  • 모듈 : 소스 파일 모음집
    모듈화 : 코드 관리, 유지보수를 위해 고유 기능별로 코드를 나누는 것

  1. NodeJS와 환경은 동일하다.

  2. 전역 혹은 개별로 typescript 모듈 설치해주기

  3. tsc는 타입스크립트를 자바스크립트 코드로 변환만 할 뿐 실행하지는 않는다. 자동화 하고 싶으면 ts-node 모듈을 설치한다.

  4. 명령어 tsc or ts-node로 변환 작업 실행

  5. 자바스크립트로 개발된 라이브러리들은 인식을 못한다. 따라서 @types/ramda 등의 타입 라이브러리들을 설치해야한다.

  6. tsc --init 으로 tsconfig.json을 설정해준다. 각 키 값을 처음에 완전히 이해하기는 어려우니 템플릿을 보고 이해를 돕자.

  7. import / export , require , commonJS , es5 , es6 정확한 구분이 지금 나는 안되거든. 이거 공부를 해서 정리하자.

  8. import tip. export가 1개인 모듈들은 그냥 이름 선언해서 쓰면 되는데, 여러개면 다 쓰기 너무 힘드니까
    import * as A from 'B' 식의 심벌을 선언해주면 편하겠다.

  9. 객체, 타입은 개념을 보기 보다는 실제 코드를 변환하는 과정이 더 효율적이겠다.

  10. 타입스크립트 타입 계층도
    any
    number, boolean, string object
    interface, class
    undefined

  11. 객체에는 인터페이스가 있다. 인터페이스의 목적은 객체의 유효성 조건을 주어 타입 범위를 좁히는 데 있다.
    interface A { 객체의 타입 정의 }
    인터페이스 내의 있는 키값이 무조건 다 들어와야 선언이 된다.
    선택 속성을 주려면 키에 ?를 붙이면 된다.

익명 인터페이스도 있는데, 생각해보면 굳이 쓸 이유가 없잖아 실 서비스에서,
익명 인터페이스는 그래서 함수 등의 매개변수에서 사용한다고 알고 있으면 좋을듯!

  1. 클래스는 생성자로 인스턴스를 만든다.

  2. 인터페이스와 클래스를 구분지을 수 있으면 좋을듯!

  3. 클래스의 속성은 public, private, protect 등을 앞에 붙여줄 수 있다. 솔리디티만의 그게 아니었구나

  4. 클래스 안에는 constructor 라는 특별한 메서드가 있다. 이를 생성자라고 합니다.
    이를 사용하는 이유는 변수에 public 등의 속성을 부여하기 위함인 것 같은데?
    변수와 그에 대한 속성 선언을 동시에 하려고 쓴다
    나눠서 쓰면 this. 써야하는 데 보기도 안좋네
    아니라면, 일반 인터페이스/클래스와 차이가 없음

  5. 타 언어와 동일하게 클래스는 인터페이스를 구현할 수 있다.
    class A implements B { } 를 하면 인터페이스 B를 만들 수 있다.
    예제를 보는데, 그냥 상속 느낌처럼 통일성을 주기 위한 행위인 것 같은데
    팁) 인터페이스 네이밍 앞에 I를 붙이네

  6. 추상 클래스 abstract : 속성이나 메서드 앞에 abstract를 붙여 나를 상속하는 다른 클래스에서 이를 구현하게 한다.
    즉, new 연산자로 객체를 만들 수 없다.

  7. 상속
    class A extends B
    추상 클래스와 연관지어서 예제를 보는게 이해가 더 쉽다.
    상속 받은 속성이 있다면 이는 super()로 받아주고 추상 속성이 있었다면 이를 새로 선언해준다(constructor 등으로)

  8. static 속성은 고정값 부여인 것 같다.

  9. 인터페이스, 클래스 던 목적은 구조화지. 개별로 다 만들면 보기가 너무 안좋고 확장이 어렵기 때문에.
    구조화 파일을 하나 통으로 만들고 거기서 import 해 와서 개발하는 식이 괜찮은듯

  10. 속성 개별로 가져오고 싶다면 비구조화를 사용하자.
    let a = A.a or let {a} = A

  11. 팁) ...을 잔여 연산자 혹은 전개 연산자라고 부른다.
    const {a, b, ...c} = A라고 한다면 a, b 까지는 1대1 매칭이 되고 나머지 값들이 모두 c 객체에 담긴다.
    괄호 벗기기랑 연관지어서 설명할려 했는데 아직 좀 더 봐야겠네
    아 괄호 벗기기가 전개 연산자래. 위에게 잔여 연산자고.

  12. 클래스와 object의 차이 인건가? 속성을 바로 불러오질 못하는데 object가
    쉽게 말해서 object 속성을 쓰려면 속성에 대한 타입 정의가 같이 들어가야함.
    그래서 인터페이스를 끼던가 해서 속성를 접근하니 되네.
    이를 타입 단언이라 하는데,
    객체 or (객체 as type) 형태로 쓴다
    23번은 처음 보기엔 좀 어렵네 사용해서 익숙해지자

  13. 함수- 함수는 쉽다
    function A(a:type) : return type {
    return b
    }
    함수는 이거만 유심히 보자.
    함수 반환 타입에 void가 있다.
    void는 반환(return) 이 없을 때 사용을 하는 것이다. C에서 봐서 익숙한 void

  14. 함수의 타입을 함수의 시그니처라 하는데 이걸 언제 씀?
    아하, 함수 시그니처를 명시하면 매개변수의 개수나 타입, 반환 타입이 다른 함수를 선언하는 잘못을 미연에 방지할 수 있다.
    쉽게 말해서, 함수를 여러개 선언하는 경우에 그 공통타입을 위에다 써주면 보기가 쉽잖아.

  15. 인터페이스처럼 타입들도 별칭을 주어 만들 수 있다.
    type A = (a, b)

  16. 위에 말한 매개변수에 인터페이스 넣는거 어색해 하지 말자. 그리고 익명 뿐아니라 일반 인터페이스도 넣을 수 있음.

  17. undefined는 최하위 계층이기 때문에 어디서든 사용 가능하지만 매개변수값이 undefined 일 때 처리를 해주어야 사용할 수 있다.

  18. 선택속성이 있다면 이에 대한 처리도 해주어야 한다.

  19. 매개변수에다가 직접 선택속성을 부여해줘도 된다.

  20. 자바스크립트는 스킴(scheme) : 함수형 언어, 셀프(self) : 객체지향 언어가 모두 들어가있고, 타입스크립트도 동일하다.
    자바스크립트의 함수는 Function 클래스의 인스턴스이다. new Function()으로도 만들 수 있음!
    new Function('a', 'b', 'return a+b')로 하면 동작을 한다.
    그런데 평소에 보던 형태와 다르다. 평소라면,
    function A(a,b) {return a+b}라고 썼을 텐데
    우리가 평소 쓰는거 그거, 이를 함수 표현식이라 한다!

  21. 프로그래밍 언어가 일등 함수 기능을 제공하면 함수형 프로그래밍 언어라 말한다.
    일등 함수란 : 함수와 변수를 구분하지 않는 것이다.
    변수에 함수를 선언하고 덮어씌우기도 가능하다는 소리다.

  22. 컴파일러는 표현식을 만나면 계산법을 적용해 어떤 값을 만든다.
    계산법에는 eager 과 lazy 가 있다. 사칙연산 같은 경우에는 eager로 바로 처리가 된다.
    하지만 함수 등의 경우엔 변수가 뭔지를 모르니 lazy로 보류를 시켜논다.
    컴파일러가 아래로 내려가다 함수 호출 연산자 ex) A(3,4) 를 만나면 매개변수를 넘겨주고 이제 eager 계산법을 처리한다.
    프로세스를 같이 건드려서 설명할 수 있겠는데

  23. 함수 호출 연산자는 연산자의 우선순위가 매우 높다. 우선순위는 정말 중요하다. 잘 이해해야함

  24. 함수 표현식을 담는 경우던, 대부분은 역시 const로 고정을 시켜놓는게 안전하다.

  25. 함수 시그니쳐도 화살표니까 화살표 함수랑 처음에는 헷갈릴 수도 있겠네.

  26. 화살표 함수에서 실행문 과 표현식 문 동작 방식이 다르다.
    실행문 () => { return A }
    표현식문 () => A

오래전 부터 구분되어 오고 있다. C가 실행문 지향 언어이고, 스칼라가 표현식 지향 언어이다.
ES5는 실행문 지향 언어이지만, ESNext, 타입스크립트는 둘다 지원한다. 이를 다중 패러다임 언어라 하는 데 이건 뭐 알거 없고
프로그래밍 언어에서 실행문은 CPU에서 실행되는 코드를 말한다.
실행문은 실행만 할 뿐 결과를 알려주지 않는다. 따라서 결과를 알고 싶으면 return를 적어주는 것이다.
return 키워드는 반드시 함수 몸통에서만 사용할 수 있다. 문법을 잘못 이해해 오류가 나는 것을 방지하려는 의도이다.
표현식은 return 안해도 알려준다. 표현식은 값을 반환하는 실행문이라고 이해를 하면 편하다.

  1. 복합 실행문은 컴파일러로 하여금 여러 실행문을 한 개 처럼 인식하게 한다.
    function A() {
    a
    b
    c
    }
    여기서 {} 얘네가 복합 실행문이란 걸 의미하는 것이다.
    복합 실행문은 변수의 유효 범위를 지역 범위로 제한한다. 스코프를 연결지어서 생각하자.

  2. 단순한 경우를 다 return 주는건 번거롭기 때문에, 화살표 식등의 표현식 문도 사용하는 것이다.

  3. 표현식과 구분 짓기 위해서 표현식 문이라는 단어를 쓰는 것이다. 실행문에서 a > b는 실행문의 일부일 뿐 실행되지는 않지만
    표현식 문에서 a > b는 그자체로 실행이 되어 값이 생기는 것이다.

  4. 일등 함수 기능을 제공하는 언어에서 함수는 '함수 표현식'이라는 일종의 값이다. 따라서 변수에 담을 수 있다.
    이 뜻은 함수 표현식을 매개변수로 받을 수 있다는 소리다. 매개변수로 받은 함수가 콜백 함수다. 아 맞네

매개변수로 전달한다는 의미는
함수에 들어와서 실행을 한다는 소리잖아
매개변수에 함수가 담긴단건
들어와서 뭘 한다는 거 아냐
이해했다.
와우!

  1. 프로그램의 전체 구조를 쉽게 작성할 수 있게 설계된 라이브러리를 보통 프레임워크라 한다.
    프레임워크는 공통으로 구현해야 할 함수를 API(application programming interface)라는 이름으로 제공한다.
    API는 프로그램마다 새로운 내용을 추가로 구현할 수 있게 지원해주어야 하는 데, 이러한 점에서 콜백함수는 API 구현에 매우 중요하다!
    너무 중요하다 42번

  2. 콜백함수가 이해가 되니까 중첩함수도 이해가 쉽네. 굳!

  3. 고차 함수는 또 다른 함수를 반환하는 함수. 팩토리얼 느낌?
    함수형 언어에서 함수는 단순히 함수 표현식이라는 값으로 다른 함수를 반환할 수 있다.
    함수 표현식으로 고차 함수를 표현하니 사건 순으로 보기가 쉬워지네

  4. 클로저를 쉽게 얘기해본다면 함수안에 함수가 있을 때 위의 함수의 매개변수 a는 안의 함수에겐 외부의 변수란 말이야
    결국 둘다 매개변수인데 이러한 형태를 함수형 프로그래밍 언어에서 클로저라고 한다.
    고차 함수는 이 클로저 기능이 꼭 필요하다.

  5. 고차 함수는 쉽게 정리하면 클래스라고 보면 된다. 묶은 것이여.

  6. return이 값을 반환할 수도, 함수 자체를 반환할 수도 있구나 와 이해했다
    아직 함수를 반환한 걸 부분 애플리케이션, 부분 적용 함수라고 한다.

  7. 매개변수에도 디폴트 값을 줄 수 있다. 그냥 함수 안에서 +10 하는 것보다 10이 무엇인지 정의를 해주는게 더 정확하겠지

  8. 단축 구문은 다른 곳에서도 많이 써봤으니까 다시 복기만 하자.

  9. 화살표 함수에서 객체를 반환하고 싶으면? {} 이렇게 써버리면 복합 실행문으로 인식을 하기 때문에 ({})의 괄호를 씌워주어야 한다.

  10. 타입선언을 할때 object로만 쓸 수 없는 거 같은데? 나중에 다시 복습하자 지금 개념이 많이 들어와서 한번 정리가 필요하다.

  11. 색인 기능 타입으로 객체를 만들 수 있네. 오 내가 궁금했던 내용이다.
    const makeObject = (key, value) => {[key]:value)} or
    type KeyType = {

}
와 이거 꿀팁 !

  1. 다시 한번 복습. function은 Function 클래스의 인스턴스. 즉, 함수는 객체. 따라서 함수는 this 키워드를 사용할수 있다.
    function {}로 만든 함수는 this 사용 가능. 그러나 화살표 함수는 this 사용 불가!

  2. 타입스크립트에서 메서드 즉 클래스 안에 들어가있는 그 함수 무말랭이 비스무리 한거는 function 으로 만든 함수 표현식을 담고 있는 속성이다.
    그렇다면 메서드 안에 this를 쓰고 싶다면 식도 실행문(함수 포현식)으로 써줘야 겠지 하지만 이게 번거로워서 화살표 함수로 쓸 수 있는 단축구문이 있다.

  3. 클래스 속성(state, method 모두 다) 에 static은 정적으로 만들 수 있다.

  4. 제이쿼리 등의 라이브러리에는 객체의 메서드를 계속해서 호출하는 방식을 사용할 수도 있다. 이를 메서드 체인이라고 한다.
    ex) A.slideUp.slideDown.
    타입스크립트에서 이와 같은 방식을 따르기 위해서는 this를 사용해야 한다.

  5. 함수는 뭘 넣는다는 느낌이고, 클래스는 가져온다는 느낌이 많이 드는데?

  6. 함수형 프로그래밍에서 배열은 매우 중요한 기능을 한다.
    함수형 프로그래밍의 일부인 선언형 프로그래밍, 함수형 프로그래밍을 가능하게 하는 순수 함수

  7. 자바스크립트에서 배열은 Array 클래스의 인스턴스 이다.

  8. push 등의 메서드도 다 Array 꺼 겠쥬?

  9. 자바스크립트에서 배열은 다른 언어와 다르게 객체다. 아 그럼 다른 애들은 객체가 아닌가 보네 아항
    일단 왜냐하면 Array 클래스의 인스턴스이니 당연히 객체겠다.
    tip) Array.isArray() : 배열 객체인지 일반 객체인지 알려준다.

  10. 타입스크립트에서 배열의 타입은 '아이템 타입'이다. 배열의 아이템의 타입대로 따라간다.
    type으로 주는 것도 똑같이 적용된다.

  11. 어떤 프로그래밍 언어는 문자열을 문자들의 배열로 간주한다. 맞네 파이썬이 그랬지. 아닌가 무의식적으로 split를 썼나?
    하지만 타입스크립트는 문자 타입이 없고 문자열의 내용 또한 변경을 할 수 없다. 따라서 가공을 하려면
    문자열을 배열로 전환해야 한다. 그게 자주 봤던 split() 메서드다.

  12. split 메서드는 String 클래스에 있다. split(구분자) 구분자를 넣는 행위에서 매개변수에 기본값을 넣어버리는 예제가 나오네.

  13. 다시 합치는 join은 Array 클래스에 있다.

  14. 비구조화 할당은 예제 하나만 넣어놀게용
    let [first, second, third, ...rest] = array

  15. ESNext, 타입스크립트는 for문은 더 쉽게 사용하도록 for ...in문을 제공한다. 이는 객체 대상이지만 배열도 객체이므로 사용할 수 있다.
    이미 써서 알겠지만 객체의 속성을 대상으로 순회한다.

  16. 아이템으로 순회하고 싶다면 for ...of문을 사용할 것. 객체에서 value값이 적용이 되는지는 해보고 수정하겠다.

  17. 배열을 다루는 함수를 작성할 때는 number[] 보다 T[] 와 같이 타입을 한번에 표현하는 것이 편리하다.
    타입을 T처럼 변수 취급하는 것을 제네릭 타입이라고 한다.
    ex) const A = (array: T[]): number => A.length

  18. 제네릭 함수와 함수 시그니쳐는 예제를 좀 더 써보자

profile
박정호
개발하기
이전 포스트

이번에 하고 한 몇 년은 안 할 생각 중인 CSS 프레임워크 정리

다음 포스트

블록체인에 대하여(블록체인에 대한 블로그 글 라우팅)

0개의 댓글