[TypeScript] intro

Gomao·2023년 3월 31일
0

TypeScript

목록 보기
1/3

TypeScript의 기본 특징

  1. JavaScript에 타입을 부여한 언어로, ES7 이하의 문법을 포함함.
  2. 정적 타입의 컴파일 언어로, 컴파일 시점에서 타입 에러를 방지할 수 있음. 코드 작성 단계에서 타입을 체크해서 오류 확인 가능하고, 미리 타입을 결정하기 때문에 실행 속도가 빠름
  3. 하지만, 같은 이유로 인해 컴파일 시간은 더 오래걸림.
JavaScript는 동적 타입의 인터프리터 언어로 runtime에서 error 발견
  1. 타입 추론을 제공
  2. Interface, Generic 기능 제공

TypeScript의 기본 type

  1. 기본적으로 JavaScript의 모든 자료형을 제공한다.
String, Boolean, number, null, undefined, object, array
  1. tuple : 길이와 각 요소의 type이 정해진 배열
  2. enum : 특정 값들의 집합
  3. any : 모든 타입을 저장 가능 →가급적 사용 지양
  4. void : 결과 값을 반환하지 않는 함수 타입
  5. never : 항상 오류를 발생시키거나 반환이 없는 함수 타입

TypeScript에서 타입을 정의하는 방법

let person1: {name:string, age:number} = {
	name: "gomao"
    age: 15
};

또는

type student = {
	name: string;
    age: number;
}

let person2:Human = {
	name: "gomgom"
    age: 14
}

변수에 직접 type을 정의해주거나,
type object를 생성하여 미리 담아줄 수 있다.

Utility types (유틸리티 타입)

내용 출처 : typescript github io

먼저 종류를 알아보자.
1. Partial<T> property를 선택적으로 구성
2. Readonly<T> property를 읽기 전용으로 설정
3. Record<K,T> property key=K, value=T로 구성
4. Pick<T,K> T type중에서 property가 K인 것만 지정
5. Omit<T,K> T type중에서 property가 K인 것만 제거
6. Exclude<T,U> T type중에서 U와 겹치는 타입을 제외
7. Extract<T,U> T type중에서 U와 겹치는 타입만 포함
8. NonNullable<T> T type중에서 null과 undefined를 제외
9. Parameters<T> 함수 타입 T의 매개변수의 타입들의 튜플 타입
10. ConstructorParameters<T>
11. ReturnType<T> 함수 타입 T의 반환타입으로 구성
12. InstanceType<T> 생성자 함수 T의 인스턴트 타입으로 구성
13. Required<T> T의 모든 property가 필수로 설정된 타입
14. ThisParameterType
15. OmitThisParameter
16. ThisType<T>
따로 적어두지 않은 것들은, 아직 직관적으로 잘 이해가 안 되서
사용할 기회가 되면 그때 추가 포스팅 하도록 해야겠다.

Typescript에서의 함수 선언

크게 다음 3가지 타입이 있다.
1. function의 parameter type
2. function의 return type
3. function의 structure type

기본적인 타입 선언

JavaScript

function sum(a,b) {
	return a + b;
}

TypeScript

function sum2(a: number, b:number):number {
	return a + b;
}
※ 이때 함수의 반환값에 타입을 정하지 않으려면 :void 사용

이때, JavaScript는 정의된 매개변수의 갯수만큼 인자를 넘기지 않아도 되지만, TypeScript는 함수와 인자를 모두 필수 값으로 간주하여 그렇게 하면 오류가 발생한다.

sum2(10) ==> error, too few parameters

해결 방법으로 ?를 사용하는 방법이 있다.

function sum3(a: number, b?: number):number {
	return a + b;
}    
이렇게 하면 인자를 하나만 제공해도 타입 에러가 발생하지 않는다.
sum3(10) ==> 타입 에러 없음

※ rest 문법 (...)도 적용이 가능하다.
function sum(a: number, ...nums: number[]):number {
	const sumofnums = 0;
    for(let num of nums){
    	sumofnums += num;
	}
    return a + sumofnums
}   

다만, rest인자의 type을 number[]과 같이 표현해주어야 한다.

연산자를 이용한 Type 선언

Union Type

둘 중에 하나만 만족해도 되는 타입

function sum(a: number|string, b: number|string){
	return a + b
}

다만, union type을 쓸때 주의점이 하나 있는데,
지금은 잘 이해가 안 되니 이 링크를 통해 학습하도록 하자.


Intersection Type

여러 타입을 모두 만족하는 하나의 타입

interface Person {
  name: string;
  age: number;
}

interface Developer {
  name: string;
  skill: number;
}

type Capt = Person & Developer;

이 경우, Capt type은 다음과 같이 정의한 것과 같다.

type Capt = {
  name: string;
  age: number;
  skill: string;
}

인트로 치고는 너무 장황해진것 같지만, 아무튼 다음 포스팅 예정 내용은
1. Class (객체 지향 프로그래밍)
2. Interface
3. Generic
정도가 되겠다.

profile
코딩꿈나무 고마오

0개의 댓글