Typescript - 시작

타입스크립트

- 자바스크립트를 기반으로 하는 프로그래밍 언어

- 코드를 실행하여 타입스크립트 코드를 자바스크립트로 컴파일하는 강력한 컴파일러

const button = document.querySelector("button");
const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;

const add = (num1: number, num2: number) => {
    return num1+num2;
}

button.addEventListener("click", () => {
    console.log(add( +input1.value, +input2.value));
});

- ! : 요소가 있음을 확신

- HTMLInputElement : input요소이기 때문에 형변환

 

- 타입스크립트는 보다 나은 깔끔하고 에러가 적은 코드를 작성할 수 있게 해준다.

 

1. 타입과 데이터를 추가

2. 차세대 자바스크립트 기능 사용 - 자바스크립트 코드로 컴파일되어 구형 브라우저에서도 작동

3. 인터페이스와 일반 기능과 같은 타입스크립트만 이해할 수 있는 특정한 기능들을 추가

4. 데코레이터와 특정 메타 프로그래밍 기능을 제공

5. 다양한 설정 옵션

6. 최신 도구(IDE)의 도움을 받을 수 있다.

 

 

타입 추론

: 특정 변수나 상수에 어떤 타입을 사용했는지 타입스크립트가 이해하는 것

 

- 타입스크립트 타입은 컴파일 중에 확인되는 반면, 자바스크립트 타입은 런타임 중에 확인된다.

 

number	1, 5.3, -10
string	'Hi', "Hi", `Hi`
boolean	true, false
object	{age:30}
Array	[1,2,3]
Tuple	[1,2]
Enum	enum { NEW, OLD }
Any	*

- 튜플은 배열같지만 2개만 들어갈 수 있음 ( 푸시는 예외적으로 튜플에서 허용 )

- any : 타입스크립트에서 할당할 수 있는 타입 중 가장 유연한 타입

    ㆍany타입을 사용하는 모든 위치에서는 타입스크립트 컴파일러가 작동 X

    ㆍ런타임 도중 특정 값을 수행하고자 하는 작업의 범위를 좁히기 위해 any를 사용

 

유니온타입

const combine = (input1: number | string ,input2: number | string) => {...}

- 두개 타입을 허용

 

리터럴 타입

const combine = (resultConversion: 'as-number'|'as-text') => {...}

- 내가 지정한 타입을 허용

 

타입알리어스

type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 }; // this works!

function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}

- 타입 별칭을 사용해서 타입을 직접 생성

 

함수 반환타입

- void : 값을 반환하지 않는 함수를 사용하는 경우

    ㆍ콜백함수는 자신이 전달되는 인수가 반환값을 기대하지 않는 경우(void)에도 값을 반환할 수 있다.

- undefined : 의도적으로 반환문이 없다는 것을 의미

 

 

- unknown : 어떤 사용자가 무엇을 입력할지 알 수 없다.

    ㆍany보다 좀 더 제한적

    ㆍ할 수 없는 작업을 알 수 있도록 타입검사를 수행

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = 'Max';
if(typeof userInput === 'string'){
    userName = userInput;
}
// userName = userInput;   // userInput에 현재 저장된 타입을 확인해야함

 

- never : 아무것도 반환하지 않고 기본적으로 스크립트나 스크립트의 일부를 충돌시키거나 망가트리기 위한 것임을 코드를 읽는 개발자가 알게 할 수 있다.

const generateError = (message: string, code: number): never => {
    throw {message: message, errorCode:code};
};