Typescript | 타입스크립트란 ?, Type System, Typescript 사용하는 이유 ?, Typescript 추가 제공 타입, type annotation/inference

 

타입스크립트란 ?

자바스크립트에 타입을 부여한 언어

자바스크립트의 확장된 언어(super set) = 자바스크립트의 기능을 가지고 있고 + 그 외의 기능도 가짐

자바스크립트와는 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 함 --> 이 변환 과정을 컴파일(compile)이라고 함

 

Typescript: 정적타임(static) 또는 컴파일 타임. 코드 작성 단계에서 오류 확인

↓

Typescript Compiler

↓

Javascript: 동적타임(dynamic). 런타임에서 동작할 때 타입 오류 확인 (비교적 안정성이 높음)

 

Type System

개발 환경에서 에러를 잡는 걸 도와줌

type annotations를 사용해서 코드를 분석할 수 있음

오직 개발환경에서만 활성화됨

타입 스크립트와 성능 향상과는 관계가 없음

 

Typescript 사용하는 이유 ?

- 자바스크립트 코드를 단순화하여 더 쉽게 읽고 디버그 할 수 있도록 함

- 오픈소스임

- 정적 검사와 같음 js IDE 및 사례를 위한 매우 생산적인 개발 도구를 제공함

- 코드 이해가 쉬움

- ES6의 장점과 더 많은 생산성 제공

- 코드 유형 검사를 통해 자바스크립트를 작성할 때 개발자가 일반적으로 겪는 버그를 피하는데 도움이 될 수 있음

 

Type

그 value가 가지고 있는 프로퍼티나 함수를 추론할 수 있는 방법

"apple"	string 문자열
	이것은 value인데 문자열이 가지는 프로퍼티, 메소드를 가지고 있는 value

 

let string = "apple"

string.length 
// 5
// 프로퍼티
// 문자열의 속성인 문자열의 길이 제공, 문자열 자체에는 아무것도 하지 않음

string.toUpperrCase()
// APPLE
// 메소드
// 문자열을 대문자로 변환. 문자열에 작업을 수행한 다음 반환

 

타입스크립트는 자바스크립트에서 기본으로 제공하는 기본제공유형을 상속함

1. Primitive types

string	문자열
number	숫자 값
boolean	true or false
null	null이라는 하나의 값
undefined	undefined라는 하나의 값 초기화되지 않은 변수의 기본값
symbol	고유한 상수 값

 

2. Object types

function	함수
array	배열
classes	클래스
object	객체

 

Typescript 추가 제공 타입

1. any

어플리케이션을 만들 때 잘 알지 못하는 타입을 표현해야 할수 있음. 이 값들은 사용자로부터 받은 데이터나 서드 파티 라이브러리 같은 동적인 컨텐츠에서 올 수 있음. 이 경우에는 타입 검사를 하지 않고 그 값들이 컴파일 시간에 검사를 통과하길 원함
--> 이 때 사용
but 최대한 쓰지 않는 것이 좋음. nolmplicitAny 옵션을 주면 any 사용시 오류 발생하게 할 수 있음

let sth: any = "hello world"
sth = 23;
sth = true;

let arr: any[] = ["john",212, true];
arr.push("smith");
console.log(arr) // ['john', 212, true, 'smith'];

 

2. union

변수 또는 함수 매개변수에 대해 둘 이상의 데이터 유형을 사용하는 것

let code: (string|number);
code = 123;
code = "abc"
code = false // compile error

let empId: string | number
empId = 111
empId = true // compile error

 

3. enum

값들의 집합을 명령하고 이를 사용하도록 만듬

enumerated type(열거형)

 

erun PrintMedia {
	newspaper, // 0
    newsletter, // 1
    magazine, // 2
    book // 3
}

let mediaType: number = PrintMedia.book // 3

--> 별도의 값이 설정되지 않은 경우 기본적으로 0부터 시작

 

erun PrintMedia {
	newspaper = 1,
    newsletter = 50, 
    magazine = 55, 
    book
}

let mediaType: number = PrintMedia.book // 56

--> 값이 할당되지 않은 아이템은 이전 아이템의 값에 + 1된 값이 설정됨

 

let type: strinf = PrintMedia(55) // magazine

--> 숫자 값을 통해 enum의 값이 멤버 이름을 도출할 수 있음

 

export enum LanguageCode {
  korean = 'ko'
  english = 'en'
  japanese = 'ja'
  chinese = 'zh'
  spanish = 'es'
}
const code: LanguageCode = LanguageCode.english

--> 어떠한 언어 코드를 정의하는 코드를 사용할 때 언어의 집합을 만들때도 사용 가능 (가독성 향상)

 

cf. enum과 객체의 차이점

object은 코드 내에서 새로운 속성을 자유롭게 추가할 수 있디만, enum은 선언할 때 이외에는 변경 불가

onject의 속성 값은 js가 허용하는 모든 값이 올 수 있지만, enum의 속성값으로는 문자열 혹은 숫자만 허용

 

4. void

데이터가 없는 경우 사용됨

ex. 함수가 값을 반환하지 않으면 반환 유형으로 void 지정 가능

타입이 없는 상태, any와 반대의 의미

주로 함수의 리턴이 없을 때 사용

function sayHi(): void {
	console.log('hi')
}
let speech:void = sayHi;
console.log(speech) // undefined

 

5. never

절대 발생하지 않을 값을 나타내는 새 타입

어떤 일이 절대 일어나지 않을 것이라고 확신할 때 사용

일반적으로 함수 리턴 타입으로 사용됨

--> 항상 오류를 리턴하거나 리턴 값을 제대로 내보내지 않음을 의미함 = 무한 루프에 빠지는 것과 같음

 

void와 never의 차이점
void는 값으로 undefined나 null 값을 가질 수 있지만
never는 어떠한 값도 가질 수 없음

let sth: void = null;
let nth: never = null // error

 

 

type annotation

개발자가 타입을 타입스크립트에게 직접 말해주는 것

const rate: number = 5 // number 타입 사용

type inference

타입스크립트가 알아서 타입을 추론하는 것

const rate = 5 // 타입을 알아서 추론

 

타입을 추론하지 못해서 꼭 type annotation을 해줘야 하는 경우

1. any 타입을 리턴하는 경우

JSON.parse --> string을 object로 바꿔주는 것이라 개발자는 예상할 수 있지만

타입스크립트는 이를 지원하지 않음. 리턴 타입이 일정하지 않으므로 any를 리턴한다고 추론해버림

따라서 이 경우에는 type annotation을 해주어야 함 !

const json: string = '{"x": 4, "y": 7}'
const coordinates = JSON.parse(json) // json string -> object (타입스크립트은 지원 안함), any
console.log(coordinates)

 

 

2. 변수 선언을 먼저하고 나중에 초기화하는 경우

변수 선언과 동시에 초기화하면 타입을 추론하지만, 선언 먼저하고 나중에 초기화하는 경우 추론이 안됨

let greeting
greeting = 'hello' // let greeting: any

 

 

3. 변수에 대입될 값이 일정하지 않은 경우

여러 타입이 지정되어야 할 때에는 | 로 여러 타입을 annotation 해줌

let num = [-7, -2, 10]
let numAboveZero: boolean | number = false

for (let i = 0; i < num.length; i++) {
  if (num[i] > 0) {
	numAboveZero = num[i]
  }
}