타입스크립트 타입

 

부트캠프에서 next.js / React-ts 환경의 개발을 경험했지만

구현에 급급하다보니 타입 지정이나 타입스크립트 동작 원리에 대해서는 특히 제대로 이해하고 진행하지 못하였어서

최종 프로젝트 디벨롭 진행 전 ts, next 강의를 보고 진행하기로 하였다

 

 

타입스크립트 : *컴파일 과정에서 문법, 타입 체크 수행

*컴파일 : 언어 변환 과정

 

 

타입 스크립트 타입 체크 과정
1. 컴파일 시작 - tsc 명령어를 사용해 ts 컴파일러 실행.
tsconfig.json 파일을 참고해 어느 파일을 컴파일할지, 어떤 옵션을 사용할 지 결정
2. 파일 로드 - 모든 입력 파일, import된 파일 로드
3. 코드 분석 - 코드를 읽고, 프로그램 구조를 나타내는 AST(구문 트리) 생성
4. 심볼 테이블 생성 - 심볼 테이블 : 변수와 함수 등 모든 관계를 정리한  테이블
5. 자바스크립트 코드로 변환 - AST를 바탕으로 변환
6. 타입 검사 - 타입 오류를 찾는다. 오류가 없다면 최종 자바스크립트 파일 생성

=> 
컴파일 타임에 코드를 분석. 
오류가 없을 시 자바스크립트로 모두 변환(런타임 환경에서는 js와 동일하게 작동)

 

타입 선언(원시 타입 제외)

- any : 모든 타입

- void : 값을 반환하지 않는 함수

( + console.log()와 같은 함수 or 콜백 함수 등에서 사용)

(변수에 void 지정 시 null과 undefined만 할당 가능)

- function : 함수

interface func {
  func1: (a: number, b: number) => number;
  func2: () => void;
}

 

- union : | 를 사용하여 여러 타입 연결

type union = string | number;

 

- intersection : & 를 사용하여 두개 이상의 타입을 조합

interface User {
  name: string,
  age: number
}

interface Validation {
  isValid: boolean
}

const testCase2: User & Validation = {
  name: 'jisu',
  age: 30,
  isValid: true
}

 

 

- readonly : 읽기 전용(수정 불가)

- Tuple : 길이, 값이 정해져있는 배열

let tuple: [string, number];
tuple = ['a', 1];
tuple = [1, 'a']; // Error

let userA: [number, string, boolean] = [1234, 'juyoung', true];

let usersA: [number, string, boolean][];
let usersB: Array<[number, string, boolean]>
usersA = [[1, 'chisus', true], [2, 'jisu', false]];

let tupleA: [1, number];
tupleA = [1, 2];
tupleA = [2, 3]; // Error

let a: readonly [string, number] = ['rest', 123];
a[0] = 'work'; // Error

 

- enum : 열거형부트캠프에서 next.js / React-ts 환경에서 개발을 해왔지만

 

구현에 급급하다보니 타입 지정이나 타입스크립트 동작 원리에 대해서는 특히 제대로 이해하고 진행하지 못하였어서

 

최종 프로젝트 디벨롭 진행 전 ts, next 강의를 보고 진행하기로 하였다

 

 

 

 

 

 

 

타입스크립트 : *컴파일 과정에서 문법, 타입 체크 수행

 

*컴파일 : 언어 변환 과정

 

 

 

 

 

타입 스크립트 타입 체크 과정

1. 컴파일 시작 - tsc 명령어를 사용해 ts 컴파일러 실행.

tsconfig.json 파일을 참고해 어느 파일을 컴파일할지, 어떤 옵션을 사용할 지 결정

2. 파일 로드 - 모든 입력 파일, import된 파일 로드

3. 코드 분석 - 코드를 읽고, 프로그램 구조를 나타내는 AST(구문 트리) 생성

4. 심볼 테이블 생성 - 심볼 테이블 : 변수와 함수 등 모든 관계를 정리한 테이블

5. 자바스크립트 코드로 변환 - AST를 바탕으로 변환

6. 타입 검사 - 타입 오류를 찾는다. 오류가 없다면 최종 자바스크립트 파일 생성

 

=> 

컴파일 타임에 코드를 분석. 

오류가 없을 시 자바스크립트로 모두 변환(런타임 환경에서는 js와 동일하게 작동)

 

 

 

 

타입 선언(원시 타입 제외)

 

- any : 모든 타입

 

- void : 값을 반환하지 않는 함수

 

( + console.log()와 같은 함수 or 콜백 함수 등에서 사용)

 

(변수에 void 지정 시 null과 undefined만 할당 가능)

 

- function : 함수

 

interface func {

  func1: (a: number, b: number) => number;

  func2: () => void;

}

 

 

- union : | 를 사용하여 여러 타입 연결

 

type union = string | number;

 

 

- intersection : & 를 사용하여 두개 이상의 타입을 조합

 

interface User {

  name: string,

  age: number

}

 

interface Validation {

  isValid: boolean

}

 

const testCase2: User & Validation = {

  name: 'jisu',

  age: 30,

  isValid: true

}

 

 

 

 

- readonly : 읽기 전용(수정 불가)

 

- Tuple : 길이, 값이 정해져있는 배열

let tuple: [string, number];

tuple = ['a', 1];

tuple = [1, 'a']; // Error



let userA: [number, string, boolean] = [1234, 'juyoung', true];



let usersA: [number, string, boolean][];

let usersB: Array<[number, string, boolean]>

usersA = [[1, 'chisus', true], [2, 'jisu', false]];



let tupleA: [1, number];

tupleA = [1, 2];

tupleA = [2, 3]; // Error



let a: readonly [string, number] = ['rest', 123];

a[0] = 'work'; // Error

 

- enum : 열거형 - 여러 값들에 미리 이름을 정의하여 열거해두고 사용하는 타입(불변한 상수 열거) 

	enum Weather {
    	sun = 'sunny',
      	cloud = 'cloudy',
      	rain = 'rainy'
    }
	
	// 아무것도 지정하지 않은 경우에는 0부터 숫자를 매긴다.
	enum OsType {
    	IOS, // 0
      	ANDROID // 1
    }

 

*enum 사용의 문제점

https://velog.io/@sensecodevalue/Typescript-Enum-%EC%99%9C-%EC%93%B0%EC%A7%80-%EB%A7%90%EC%95%84%EC%95%BC%ED%95%98%EC%A3%A0

[Typescript] Enum 왜 쓰지 말아야하죠?

 

- object : 객체

 

- unknown : 타입을 알 수 없을 때(타입의 전체 집합)

- Never : 아무 타입도 포함하지 않는 타입

 

* any, unknown의 차이 

any : 컴파일 타임에서 어떤 타입 검사도 요구하지 않는다

unknown : 로직에 적합한 타입을 해당 변수가 가지고 있는지 추가적인 검사를 요구

const num: unknown = 10;

// 아래 코드는 unknown 타입의 특성 상 컴파일 에러를 발생시키고 타입 검사를 요구받음 
console.log(num+10);

// 타입 검사를 수행하여 num 변수의 타입을 number 범위까지 한정했기 때문에 잘 작동
if (typeof num === "number") {
  console.log(num+10);
}

 

any 타입은 데이터 페칭 등의 경우에 데이터 타입에 대한 정보가 전혀 없을 경우에 사용

 

 

---

 

type vs interface

 

https://stackoverflow.com/questions/37233735/interfaces-vs-types-in-typescript/52682220#52682220

Interfaces vs Types in TypeScript

 

1. 확장성 

 

interface의 경우 같은 이름의 재선언시 확장된다. 2개의 인터페이스가 합쳐진다

(type은 재선언 불가)

 

2. 복잡한 타입 표현

 

type의 경우 복잡한 타입 표현에 유리하다

type A = B | C 처럼 더 다양한 타입을 정의할 수 있다

 

 

최근까지도 type, interface에 대한 논의가 이어지는 것을 보면
정답이 있는 것이 아니고, 유연하게 사용하는 것이 좋게 보이지만

개인적으로 타입의 확장 등이 필요한 경우에는 interface의 확장성이 아닌 
type과 추가적으로 제공하는 유틸리티 타입을 사용할 것 같다