react ( Udemy강의 ) - 13. TypeScript

TypeScript

- 타입스크립트는 자바스크립트의 superset 언어이다.

- 자바스크립트 문법에 타입 표기 구문이 추가

- 타입스크립트 코드가 브라우저에서 실행되지 않기 때문에 JS형태로 컴파일 -> 타입표기 모두 삭제

 

Primitives : number, string, boolean

// 1. Primitives
let age: number = 12;
let userName: string = 'max';
let isInstructor: boolean = true;

 

More complex types : arrays, objects

// 2. More complex types
let hobbies: string[];
hobbies = ['Sports', 'Cooking'];

let person1: any;    // 어떤 값이든 저장
let person: {
    name: string;
    age:number;
};

person = {
    name:'Max',
    age:32
}

// person = {
//     isEmployee: true
// }

// 객체 배열
let people: {
    name: string;
    age:number;
}[];

---

타입 추론 ( type inference )

- 기본적으로 타입스크립트는 가능한 많은 타입을 유추하려고 한다.

  어떤 타입을 어디에 사용해야 할지 알아내려고 한다, 명시적인 타입 표기가 없어도

- 변수를 만들고 바로 초기화하면 타입스크립트는 할당된 값의 자료형으로 볼 것!

- 타입 추론 기능을 활용해서 코드를 작성하는 게 권장되는 방식

let course = 'React - The Complete Guide';
// course는 string타입

 

유니온( union ) 타입

- 한 개 이상의 타입을 지정해주는 기능

- 값의 타입을 좀 더 유연하게 정의

let course: string | number = 'React - The Complete Guide';
course = 12345;

let userNmae: string | string[];

 

Type Alias ( 타입 별칭 )

- 직접 기본(Base) 타입을 만들어 복잡한 타입을 정의하고 그 타입 별칭을 사용

- ts만의 type 키워드 사용!

type Person = {
    name: string;
    age: number;
}

let person: Person;

let people: Person[];

---

Functions & types

- 함수 사용시 타입을 지정하는 위치가 존재

- 함수에서 타입을 사용할 떄는 매개변수의 타입뿐만 아니라 반환 값의 타입도 생각해야한다!

// Functions && types
function add(a: number, b: number): number {
    return a+b;
}

- return이 없다면 함수는 void타입 ( void는 함수에만 있는 특수한 타입, 함수의 반환 타입 )

 

Generics Type ( 제네릭 타입 )

- 제네릭 타입으로 타입스크립트에게 타입을 알려줌

// Generics
function insertAtBeginning<T>(array: T[], value: T) {
  const newArray = [value,...array];
  return newArray;
}

const demoArray = [ 1,2,3 ];
const updatedArray = insertAtBeginning(demoArray, -1);  // [-1,1,2,3]
updatedArray[0].split(''); // 오류