[TypeScript] 타입스크립트란? 기본 공부하기

타입스크립트 

자바스크립트를 기반으로 하면서 변수 값의 데이터 타입을 지정하여 예측 가능한 코딩이 가능하게 만든다.

JavaScript : dynamic typing 동적 타이핑 언어

TypeScript : 정적타이핑이 목적 => 코드의 타입을 명시적으로 선언하여 컴파일 중 에러가 나지 않고 개발 중에 에러를 발생시키는 장점이 있다.

 

- 객체 지향적인 프로그래밍 

- 컴파일 타임의 오류를 잡을 수 있음 

- 컴파일 되어야 함

 

타입스크립트는 자바스크립트 환경에서 실행될 수  없음 

브라우저가 타입스크립트를 이해하지 못하기 때문에 자바스크립트로 컴파일 되어야 한다.

 

---

타입 추론 

타입스크립트에서는 타입표기가 없는 경우 타입을 추론하여 a가 자동으로 숫자가 된다

밑에서 숫자인 a에 문자를 할당하려하니 오류메세지가 뜬다.

 

타입표기가 없는 경우 코드를 읽어 타입을 추론한다.

 

 

타입 명시

변수값의 타입을 명시하여 데이터 타입을 지정

const x: number  

x변수 : 숫자

let studentId: number = 1234;
let studentName:string= 'hi';

function str2num(a: number): object{
    return {a:'hi'}
}

 

 

type 과 interface ?

인터페이스 or type  이름은 대문자

interface Point {
    x: number;
    y: number;
}

type Point = {
    x: number;
    y: number;
};

interface IFn {
    (name:string) : string
}

type IFn = (name:string) => string;

 

interface 

객체타입을 만들기 위함 -> 객체만 가능 

type

function 표에서 interface보다 간단한 선언 가능

 

😮 어떤 것이 더 좋을지? 

재귀적으로 순회하며 속성을 머지하기 때문에 type은 merge 시 주의해야 한다.

합성자체에 대한 유효성을 판단하기 전에 모든 구성요소에 대한 타입을 체크하기 때문에 컴파일 시 상대적으로 성능이 좋지 않다. 

성능을 위해서는 interface를 사용하는 것이 좋다  ( 객체에서만 쓰이는 용도라면..)

 

프로젝트 전반에 type과 interface중 하나를 통일해서 사용하는 것이 좋다.

 

출처 : https://yceffort.kr/2021/03/typescript-interface-vs-type

 

 

interface에 정의하기 

* 선택적 property

물음표로 표시하면 있어도 없어도 되는 property지정 가능 

interface Student {
  id: number;
  name: string;
  age?: number;
}

* 메서드 property정의 가능

interface Student {
  id: number;
  name: string;
  age?: number;
  addComment: (comment: string) => string;
}

* readonly

읽기전용으로 지정된 속성은 수정될 수 없음

 

 

실제 interface는 컴파일된 javascript 파일에 없음

코드가 렌더링 될 때  영향력이 없기 때문에 변환되지는 않음

 

---

Enum

enum GenderType {
  Male,
  Female,
}

function getStudentDetails(id: number): Student {
  return {
    id: 1,
    name: 'tami',
    gender: GenderType.Male,
  };
}

 

var GenderType;
(function (GenderType) {
    GenderType[GenderType["Male"] = 0] = "Male";
    GenderType[GenderType["Female"] = 1] = "Female";
})(GenderType || (GenderType = {}));

enum에 잇는 값을 순차적으로 돌며 할당하는 방식

즉 GenderType의 enum은 숫자 속성을 가지고 있음 

 

 

String enum

interface Student {
  readonly id: number;
  name: string;
  age?: number;
  gender: GenderType;
  addComment?: (comment: string) => string;
}

이렇게 간단히 문자형 enum도 가능

 

 

리터럴 타입

interface Student {
  readonly id: number;
  name: string;
  age?: number;
  gender: 'male' | 'female';
  addComment?: (comment: string) => string;
}

더 간편하게 | 로 해당 속성이 가질 수 있는 값 지정 가능 

 

타입에 관한 더 많은 정보가 제공될수록 개발자의 의도가 명확하게 전달됨

코드가 효과적으로 유지 보수가 됨

---> any 타입의 사용을 최소화 하는게 좋음

 

 

유니언 타입 

const someValue : string | number

type Gurad

유니언 타입을 사용할때, typeof 연산자를 사용하여 코드 검증을 수행하는 것

 

type Alises

몇가지 type을 가진 props 지정 시 사용 가능 

type strOrNum = number | string;

const setValue = (value : strOrNum):strOrNum =>{
	return value;
}

---

함수형 타입 

함수에 정의된 모든 매개변수가 함수가 필요하다고 가정 

매개변수가 전부 주어지지 않았을 때 오류

선택적 매개변수

몇가지만 선택적 매개변수일때  ? 붙여서 표시 가능

function sendGreeting(a: string, b?: string): void {
  console.log(`${a} ${b}`);
}

sendGreeting('h', 'h');
sendGreeting('h');

선택적 매개변수는 필수 매개변수 뒤에 선언되야함 

 

기본 매개변수

매개변수의 default값 지정

function sendGreeting(a: string, b = 'there'): void {
  console.log(`hi ${a}, ${b}`);
}

접근제한자 Acess Modifier

클래스속 멤버변수와 메서드에 접근할 수 잇는 

 

 

 

참고 (https://www.youtube.com/watch?v=VJ8rvsw2j5w)