타입스크립트 공부

1. node.js 설치

- npm init -y 실행 → package.json 파일이 생성되고 해당 프로젝트는 node.js로 운영이된다.

2. TS설치

- npm i typescript

3. TSC 실행

- npx tsc : ts파일을 js파일로 변환

- npx tsc --init → tsconfig.json 생성

 

tsconfig.json 옵션 중 allowJs 주석을 풀어 활성화시키면 자바스크립트를 사용가능하다.

옵션은 나중에 더 알아보자

 

타입스크립트는 자바스크립트의 변수, 매개변수, 리턴값에 타입을 설정하는 것이 전부이다.

 

타입을 설정하는 행동을 "타이핑 한다"라고 한다.

 

종류: string, number, undefined, null, any, symbol, bigint

 

1. TS문법:

1. 함수

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

const add: (x: number, y: number) => number = (x, y) => x + y;

 

** 타입선언: 특정 타입을 미리 선언해두고 해당 타입을 사용하고자 하는 곳에서 선언된 타입을 사용하면 된다.

(심화: overloading)

a) type Add = (x: number, y: number) => number

b) interface Add { (x: number, y: number) : number; }

const add: Add = (x, y) => x + y;

 

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

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

 

d) const add: (x: number, y: number) => number;

const add = (x, y) => x + y;

 

** 타입 강제 선언

let aa = 123

aa = "123" as unknown as number;

 

1-1. 함수의 매개변수(rest)

function rest( ...args: string[ ] ){  }

rest( "1", "2", "3" )

 

2. 객체

const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 };

 

const obj = { a: 0, b: 1, c: 2, d: 3 } ← 각 키값은 타입추론으로인해 number라는 타입을 가지게된다. 하지만 각 키값을 고정값으로써 사용하고자 할때 아래와 쓸 수 있다. (엄격한 타이핑)

1. const obj: { a: 0, b: 1, c: 2, d: 3 } = { a: 0, b: 1, c: 2, d: 3 }

2. const obj = { a: 0, b: 1, c: 2, d: 3 } as const 

 

const obj = { a: "123", b: "hello", c: "world" } as const

type Key = keyof typeof obj ← type Key = "a" | "b" | "c" 와 같다. (객체의 키만 가져온 경우)

type Key = typeof obj[keyof typeof obj] ← type Key = "123" | "hello" | "world" 와 같다. (객체의 키의 값들만 가져온 경우)

★enum 알아보기

 

union( | )과 intersection( & )

type A = { hello: "world" } | { zero: "cho" } "또는 = or"

const a: A = { hello: "world" } // true

const a: A = { hello: "world", zero: "cho" } // true

 

type A = { hello: "world" } & { zero: "cho" } "모두 만족 = and"

const a: A = { hello: "world" } // false

const a: A = { hello: "world", zero: "cho" } // true

 

상속 또는 확장(extends)

type Animal = { breath: true };

type Mamal = Animal & { breed: true };

type Human = Mamal & { think: true };

const chanki: Human = { breath: true, breed: true, think: true };

 

3. 배열

const arr: string[ ] = [ "123", "456" ] 

const arr: number[ ] = [ 123, 456 ] 

const arr: Array<string> =  [ "123", "456" ] ★

const arr: Array<number> = [ 123, 456 ] ★

const arr: [ number, number, string ] → 길이제한, 타입의 위치와 원소의위치가 정확해야 한다.

 

4. 고정된 원시값

const a: 5 = 6 → a변수는 반드시 5

 

**타입 커스터마이징 예시

a) type World = "world"

const a: World = "world" ← "World"타입을 가지는 변수는 반드시 "world"로 사용되어져야 한다.

 

b) type World = "world" | "hell"

const a: World = `hello ${ World }` → "hello world" 또는 "hello hell"를 ctrl + space시 추천옵션으로 제시한다.

 

 

5. 태그(HTML 요소)

const head: Element = document.querySelector("#head");

 

2. 타입추론

"const"의 정의에 따라 const로 선언된 변수는 타입을 따로 지정하지 않아도 알아서 타입을 정한다.

즉, const a = "5"일 경우 변수 a는 string 타입으로 자동 인식된다.(추론한다)