typescript 기본

설치

npm install typescript
yarn add typescript

npx tsc 파일명(명령어, 컴파일러, typescript 파일을 js파일로 만들어줌.)

typescript는 브라우저에서 사용할 수 없다.
그래서 컴파일링을 통해 js로 바꿔서 사용을 해야한다!
확장자명은 ts다.

기본 문법

Primitives: number, string, boolean, boolean, null, undifined

function add(a: number, b: number) { //type을 정해준다. 그래서 오류를 방지.
  return a + b;
}

const result = add("2", "5"); // npx tsc with-typescript.ts로 컴파일링을 하면 type이 맞지 않아서 오류 발생.

console.log(result);

let age: number = 24;

age = "12"; //오류, 위에 number type으로 typescript가 지정을 해놓았는데 string type을 넣었기 때문에 오류임

age = 12; // 오류나지 않음.

null과 undefined는 다른 방식이므로, 보통 위의 방식으로 쓰지는 않는다.

More complex types: arrays, objects

let hobbies: string[]; //배열. 취미들을 넣어놓은 것은 배열일 것이기 때문에 이런 식으로 쓴다. hobbies 안에 문자열 배열을 넣고 싶다는 //number[], boolean[] 다 가능.

hobbies = ["Sports", "Cooking"]; // 오류나지 않음.

//let person: any; //모든 것이 가능하다. 일반적으로 잘 안 쓴다,

//let person: {}; //객체 타입을 사용하겠다고 정의하는 것
let person: {
  name: string;
  age: number; // 객체인데 이렇게 생긴 것만 사용하겠다는 뜻이다.
};

person = {
  name: "Max",
  age: 32,
}; // 오류나지 않는다.

let people: {
  name: string;
  age: number;
}[]; //이런 타입의 객체가 들어있는 배열을 정의하는 것이다.

유형추론

typescript는 변수에 다시 할당하려고 하거나 할 때, 유형추론을 이용하여 우리가 굳이 course: string이라고 안 해도 알아서 구분해서 오류를 내준다.

let course = "react the Complete Guide"; //둘 이상의 유형을 승인하고 싶을 때는 |를 사용!!

course = 12345; // 오류
course = "12345" // 오류가 나지 않는다.

let course: string | number = "react the Complete Guide"; //둘 이상의 유형을 승인하고 싶을 때는 |를 사용!!

course = 12345;

Alias - 중복 사용 방지

typescript만의 문법인 type이라는 키워드가 있다.

중복을 방지하는 것으로, 컴파일 되었을 때 js문법이 아니기 때문에 사라진다.

그냥 유형만 설정하는 것이다!

type Person = {
  name: string;
  age: number;
}; //Person이라는 것에 타입을 저장. 이름은 무엇이든 와도 된다.

let person: Person;

person = {
  name: "Max",
  age: 32,
}; //오류가 나지 않는다.

let people: Person[]; //Person 유형의 객체를 가진 배열

함수

function add(a: number, b: number): number | string {
  // 이렇게 뒤에 :를 쓰면 반환 유형을 지정할 수 있다. 하지만 typescript는 유형추론이 가능하기 때문에 특별한 것이 아니면 굳이 써 줄 필요가 없다.
  return a + b;
}

void

void는 리턴할 것이 없다는 뜻.
null과 undifined를 의미한다.

function print(value: any) {
  // 단순히 콘솔로그로 보여주는것이기 때문에 값의 유형은 중요하지 않다.
  console.log(value); //이 함수의 문제점은 자바스크립트에 print라는 함수가 기본적을 존재하기 때문에 충돌이 일어날 수 있다. 그래서 이름은 printOrOut 등 이런 식으로 바꿔주어야 한다.
} // 이 함수는 리턴으로 반환하는 값이 없기 때문에 print의 유형은 특수한 void라는 유형이다. void는 null과 undifined를 의미. 즉 리턴할 게 없다!

Generics

함수에 인자가 많아지고 함수를 재사용을 해야할 때 어떤 유형이 오든 typescript가 제대로 유형을 추론해야 하는데 못할 경우에 사용하는 문법.

function insertAtBeginning(array: any[], value: any) {
  const newArray = [value, ...array];
  return newArray; // 단순히 원본이 변하지 않는 새로운 배열을 만들어주는 배열(기존 것)
}

const demoArray = [1, 2, 3];
const updatedArray = insertAtBeginning(demoArray, -1); // [-1, 1, 2, 3]
updatedArray[0].split(""); // 오류가 나지 않는다. 이유는 위에 updatedArray에서 보면 typescript가 any로 유형을 추론하고 있기 때문이다. 하지만 insertAtBeginning에서 array 유형을 any가 아닌 number로 바꾸면 다른 유형에서 다시 쓸 수가 없기 때문에 지정이 불가능하다. 그러므로 이럴 경우에 updatedArray의 오류를 수정하기 위해서 쓰는 문법이 //!Generics다!

function insertAtBeginning<T>(array: T[], value: T) { //typescript에만 있는 문법으로, T를 이런식으로 넣으면 typescript는 array와 value의 유형이 일치해야한다는 것을 인식하고 더 자세하게 보게 된다. 그래서 원래는 updateAarray가 any로 인식을 하여 split을 오류처리를 안 했지만, Generics를 사용하여 이 두 가지가 숫자 타입이라는 것을 인식하여 제대로 인식을 한다.
  const newArray = [value, ...array];
  return newArray; 
}
const demoArray = [1, 2, 3];
const stringArray = insertAtBeginning(['a', 'b', 'c'], 'd')//type을 string으로 잘 받아들인다.
const updatedArray = insertAtBeginning(demoArray, -1); // [-1, 1, 2, 3]
updatedArray[0].split(""); // type을 다 제대로 보기 때문에 오류가 난다.

<T>를 명시적으로 쓸 수 있다.
const stringArray = insertAtBeginning<string>(["a", "b", "c"], "d");

제네릭 자세히 살펴보기

다음 예제 배열을 보자.

let numbers = [1, 2, 3];
여기서 유형이 유추되지만 명시적으로 할당하면 다음과 같이 할 수 있다.

let numbers: number[] = [1, 2, 3];
number[] 는 TypeScript 표기법으로써 "이것은 숫자의 배열입니다" 라고 정의하는 것.

그러나 실제로, number[]는 문법적 설탕이다.

실제 유형은 Array이다. 모든 배열은 Array 유형이다.

그러나 배열 유형은 배열의 항목 유형도 설명하는 경우에만 의미가 있으므로 Array 은 실제로는 제네릭 유형이다.(?????)

위의 예를 다음과 같이 작성할 수도 있다.

let numbers: Array<number> = [1, 2, 3];
여기에 다시 꺾쇠 괄호(<>)가 있다! 
그러나 이번에는 우리 자신의 유형을 만드는 것이 아니라 TypeScript에 실제 유형이 "generic type placeholder"에 사용되야 한다고 하는 것이다. (T).

TypeScript는 이것을 추론할 수도 있다. 
우리는 다음과 같이 작성할 때 그것에 의존한다.

let numbers = [1, 2, 3];
그러나 명시적으로 유형을 설정하려면 다음과 같이 할 수 있다.

let numbers: Array<number> = [1, 2, 3];

물론 이 길고 투박한 유형을 작성하는 것은 약간 성가실 수 있다. 
그래서 배열에 대해 다음과 같은 대안(문법적 설탕)이 있다.

let numbers: number[] = [1, 2, 3];
예를 들면 자리 표시자에 대한 구체적인 유형을 설정할 수도 있습니다. T.명시적으로.

const stringArray = insertAtBeginning<string>(['a', 'b', 'c'], 'd');
따라서 꺾쇠 괄호를 사용하여 제네릭 유형을 정의할 수 있을 뿐만 아니라 제네릭 유형을 사용하고 사용해야 하는 자리 표시자 유형을 명시적으로 설정할 수도 있다. 
때로는 TypeScript가 (올바른) 유형을 유추할 수 없는 경우에 필요하다.