타입스크립트 ts 기본 문법 익히기 -3

//index.ts
let a: boolean = true;
const b: { hello: string } = { hello: 'world'};

function add(x: number, y: number): number { return x + y};

const minus = (x: number, y: number): number => x - y;

콜론 : 이 많이 보인다. 

타입스크립트는 : 을 통해 자료형을 명시적으로 지정해준다. 한번 : 부분을 다 제거해보면 다음과 같다

let = true;
const b = { hello: 'world'};

function add(x, y) { return x + y};

const minus = (x, y) => x - y;

자바스크립트와 완전히 같다. 이렇게 기본적으로 자바스크립트 코드에 : 자료형 을 통해 어떤 자료형의 데이터가 들어와야 하는지 명시적으로 설정한다.

 

function add(x: number, y: number): number { return x + y}; 이 부분이 조금 햇갈릴 수 있는데 이건 리턴 값의 자료형을 지정한 것이다.

 

const func: (x: number) => string = (x: number) => x.toString();

이런 경우는 어떨까?

const func: (x: number) => string = (x: number) => x.toString(); 색칠된 부분까지가 타입이다. 

const func = (x) => x.toString();

위의 코드와 같다.

 

또한 이렇게 하면 너무 헷갈릴 수 있으니 타입을 명시하는 부분만 따로 뺄 수 있다. 

type Func = (x: number) => string;
const func: Func = (x: number) => x.toString();

Func 라는 타입 Alias를 만들었다. 위와 같은 코드로 작성할 수 있는 것을 알고 넘어가자.

 

타입으로 사용 가능한 값

출처는 제로초님 노드 강의 + 공식문서

https://typescript-kr.github.io/

 

*any 라는 것이 있다.

function add(x: any, y: any) {return x + y};

any 는 사실상 모든 타입이라고 생각하면 된다. 따라서 x: any하면 x는 자바스크립트처럼 아무 자료형을 받을 수 있는 변수가 된다. 또한 타입스크립트에서 function add(x, y) 이런 식으로 작성을 하면 x와 y는 any 자료형이라고 설정이 된다. 

즉, 자료형을 명시를 하지 않으면 any자료형이 된다. any는 타입스크립트 포기선언 자료형이다.

 

타입스크립트를 사용하는 이상 any 로 선언하는 것은 최대한 지양해야 한다.

 

*as const 라는 것이 있다.

const b = { hello: 'world' } as const;

뒤에 as const를 붙이면 속성의 수정을 막는다. 

 

//index.ts
let a: string | number = 'hello'; //유니언 타이핑
a = 123;

let arr: string[] = []; //배열 타이핑
arr.push('hello');

interface Inter {
  hello: string;
  world?: number; // 있어도 그만 없어도 그만인 속성
} //객체를 인터페이스로 타이핑할 수 있음
const b: Inter = { hello: 'interface' };

type Type = {
  hello: string;
  func?: (param?: boolean) => void; // 함수는 이런 식으로 타이핑한다
}

const c: Type = { hello: 'type' };
interface Merge {
  x: number,
};
interface Merge {
  y: number,
};
const m: Merge = { x: 1, y: 2 };

import 'a';
export { a } ;

• a변수는 문자열과 숫자 자료형을 다 받을 수 있다.
• arr변수는 배열 자료형을 받지만 배열안에 요소들은 모두 문자열이어야 한다. 즉, arr은 문자로 된 배열만을 받는다.
• Inter라는 인터페이스를 객체로 타이핑 했고 그것을 이용해서 b변수에 할당했다. 그리고 world뒤에 ?가 붙었는데 이 의미는 있어도 그만 없어도 그만인 속성인 것이다. 따라서 변수 b에 world속성을 생략해도 상관이 없다.
• 타입 Alias는 이름이 겹치면 에러가 발생하지만 인터페이스는 변수 m을 보면 이름이 겹쳐도 상관이 없고 겹치는 것끼리 합쳐지는 것을 볼 수 있다. 
• ts는 import, export es모듈을 사용한다는 점을 알고 넘어가자.