(책) 알아서 잘 딱 깔끔하고 센스있게 정리하는 TypeScript 핵심 개념

2023/01/19(목)

1. TypeScript란?

- 알고있던 내용

1. JavaScript 변수에 타입을 설정해주는 것

2. (사용 경험) interface로 객체타입을 설정해주거나, 매개변수(props등)에 타입을 미리 넣어준다.

- 궁금한 내용

1. 타입스크립트와 자바스크립트의 차이, 혹은 관계?

2. 타입 체크

3. tsc를 해서 컴파일 하는 이유

4. 자동으로 타입스크립트 파일을 자바스크립트 파일로 전환하는 방법

- 이해한 내용

1. 타입스크립트는 JavaScript에 정적 타입이 추가된 언어이다.

2. 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사)를 진행합니다.

3. tsc란 타입스크립트 파일을 자바스크립트 파일로 컴파일해 줍니다. => 이유: 브라우저는 타입스크립트 파일을 읽을 수 없기 떄문에 자바스크립트 파일로 변환해야 합니다.

4. 타입스크립트 파일을 자동으로 전환하는 방법: tsc --w 파일경로 => watch 명령어. 저장될 때마다 자동으로 컴파일

3. Type의 종류

- 알고있던 내용

1. any. 특이해서 알고있던 타입. 모든 타입의 값을 지정할 수 있다. 그렇지만 지양해야 한다.

- 궁금한 내용

1. 타입을 표기하는 방법

2. 타입 주석이란?

3. 타입 추론이란?

4. never 타입?

5. 유니온 타입?

6. 커스텀 타입?

7. 조건부 프로퍼티?

- 이해한 내용

1. 예) let name: string; 

2. 타입 주석: 변수를 선언한 후 콜론 뒤에 타입과 함께 세미콜론

3. 타입 추론: 타입 표기를 생략한 경우 컴파일러가 할당한 값에 따라 타입을 지정해주는 것.

 - 예) let name = 'hello-kk' // type: string

4. never 타입: 절대 반환하지 않는 함수에 사용. => 도달되지 않는 코드

 (1) 무한 반복 되는 함수

 (2) 오류를 발생시키기 위해 존재하는 함수

5. 유니온 타입: 하나의 변수에 지정할 수 있는 타입이 여러개인 경우. any타입이 아니라 유니온 타입을 사용하자.=>그래야 컴파일에서 타입이 잘못 지정되면 오류를 반환

 예) let example: string | number;

6. 커스텀 타입: type 키워드를 사용해서 새로운 타입을 선언할 수 있다.

 예) type Centimeter = number;

 예) type Student = { name: string; height: Centimeter; }

 let student: Student = { name: 'hello-kk', height: 000, }

7. 조건부 프로퍼티: 변수를 초기화할 때 프로퍼티 값이 필수가 아니라 선택사항인 경우, 프로퍼티 이름 뒤에 물음표를 붙이는 것

예) type Student = { name?: string; height: Centimeter; }

 let student: Student = { height: 000, }

- 새로 알게된 내용

1. 런타임이 아니라 컴파일 단계에서 타입 오류를 알 수 있다.

2. 그러나, 타입을 중복해서 명시적으로 지정하는 것은 피해야 한다.

 - 예) let name: string = 'hello-kk'

 

 

4. 배열(Array)

- 알고있던 내용

1. []

- 궁금한 내용

1. 배열 타입?

2. 배열 요소가 다양한데, any를 사용하기 보다는 다른 방법이 있을까?

3. 제네릭 배열 타입?

- 이해한 내용

1. 배열 타입: 요소가 모두 number 이라면,

 예) let list: number[] = [1,2]

2. 유니온 타입을 설정할 수 있다.: let info: (string | number | boolean | null )[] = ['hello-kk', 1, true, null ]

3. 제네릭 배열 타입: Array<Type> 형태로 선언한다.

4. let name: Array<string> = ['hello-kk']

 - 제네릭 배열 타입은 객체 타입도 지정 가능, 익명함수로도 받을 수 있다.

  예) let arr: Array<()=>string> = [ () => "hello-kk" ]

       console.log(arr[0]()) // "hello-kk"

5. 튜플(Tuple)

- 알고있던 내용

1. 파이썬 Tuple

2. 수정이 불가능하다.

3. list와 비슷하다

- 궁금한 내용

1. 배열과 차이점이 있다면 뭘까?

- 이해한 내용

1. 튜플 타입에 따라 배열 개수도 고정해야 한다.

 예) let info: [string, number] = ["hello-kk", 0, ]

 예) let info: [string, number] = ["hello-kk", 0, 1] => 안된다고 함. 해보기

 

5. 객체 타입(Object Types)

- 알고있던 내용

1. 객체 할당

2. 타입 추론이 가능하다. (그렇지만 경험상, 후에 꺼내서 쓸 때, 특히 자주 쓰인다면 미리 타입을 선언하는 것도 좋은 것 같다.)

3. 아마 유니온 타입도 가능한 것으로 알고 있다.

- 궁금한 내용

1. obj: object 인 경우에 오류가 나는 경우가 있었음. obj는 { name: string; age:number, }으로 미리 선언되어 있었음

2. object인 경우 객체타입을 다른 타입들과 비슷하게 설정할까?

3. 빈 객체의 경우는..

- 이해한 내용

1. 타입을 object로 선언하면 최상위 타입이기 때문에 유용하다고 할 수 없다. any보다 좁은 범위의 타입

2. 선택적 속성도 사용할 수 있다.

 예) const info: {type: string, name?: string} = { type : 'hello',}

      info.name = 'kk' 

3. 필드의 자료형을 지정하지 않은 채 인덱스를 사용한다.

 예) const info: { [index:string]: number } = {};

       info.age = 00;

 

2023/01/20(금)

7. 열거형(Enums)

- 알고있던 내용

1. 없다..

- 궁금한 내용

1. 열거형이란?

2. 사용방법

3. 매핑 방법

4. 숫자 열거형의 특징

5. 문자 열거형

6. 이종 열거형

7. const enum을 사용하는 이유

- 이해한 내용

1. 비슷한 종류의 아이템을 함께 묶어서 표현할 수 있는 수단.

2. 객체와 비슷하게 점 또는 괄호 표기법을 사용.

3. (1) 문자열에서 문자열로 매핑 (2) 문자열에서 숫자열로 매핑

4. 자동으로 적절한 숫자를 추론해서 할당. 지정된 값이 없다면 0부터시작해서 1씩 증가한다.

 예) enum Class { Rock = 0, Scissors = 100+1 , Paper } //Paper에 102가 들어가게 된다. (이전값에 1증가)

5. 문자열 또는 다른 문자열 열거형으로 상수를 초기화 해야 한다. (값이 증가하지 않음)

6. 문자열과 숫자 값을 같이 쓸 수 있다.

 예) enum Game { Rock = 'ROCK', Scissors = 2, Paper } // 마지막은??

7. 숫자 열거형은 존재하지 않는 키에도 접근할 수 있기 때문에 const enum을 사용하는 편이 안전하다.

8. 타입 별칭 & 인터페이스(Type Aliases&Interface)

- 알고있던 내용

1. Interface : 객체 필드에서 사용할 타입을 미리 지정해주는 것... 으로 사용해왔다.

- 궁금한 내용

1. 타입 별칭?

2. 유니온?

3. 문자열 유니온, 숫자 리터럴 유니온, 객체 리터럴 유니온, 함수 유니온, 인터페이스 유니온, 튜플 타입, 제네릭 타입

 

- 이해한 내용

1. 별칭을 제공, 재사용 가능. 새로운 타입을 생성하는 것이 아니라, 정의한 타입을 참고할 수 있게 이름을 지어주는 것.

 예) type Fruit = string;

      const myFruit1: Fruit = "apple";

      const myFruit2: Fruit = 1; //오류

 

7. 열거형(Enums)

- 알고있던 내용

1.

- 궁금한 내용

1.

- 이해한 내용

1.