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 유형의 객체를 가진 배열

n.関数

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

void

voidは、返すべき内容がないことを示す.
nullとunfinedを表します.

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가 (올바른) 유형을 유추할 수 없는 경우에 필요하다.