TS

ts는 js의 슈퍼셋 언어이다.
js의 기본적인 문법과 코드작성법을 그대로 사용하기 때문에.
그리고 라이브러리가 아니기 때문에 js의 기존 기능을 기반으로 새로운 기능을 만들거나 기능을 확장하지 않는다. 대신 확장된 문법을 가진다.
그리고 브라우저에서 실행되지 않는다.
그래서 ‘npx tsc’ 명령어를 실행해야 한다.

정적타입

ts는 정적 타입이다.
함수선언시에 자료형을 특정짓는다.
js는 동적타입.

기본형 타입

숫자 문자 boolean이 있다.

기본형 타입 지정

//숫자일 경우
let age: number; // 변수선언. 값을 할당할때는 숫자형이면 ok(소수float포함)

age = 12; 

let age: number = 12 // 값을 바로 할당할 수도 있다. 

//문자일경우

let userName: string;

userName = ‘me’;

//boolean일 경우

let isInstructor: boolean; 

isInstructor = true ;

대문자로 사용하면 안된다. 오류가 발생하진 않지만 대문자로 쓰면 js의 Number 객체를 가리키게 된다. 우리가 원하는건 기본형 number타입 ** 이다.

자료형 타입

배열과 객체가 있다.

자료형 타입 지정

// 배열일 경우
let hobbies: string[]; // 배열에 문자만 들어가는 배열일 경우. 중요한건 뒤의 ‘[]’ 이다.

//객체일 경우
let person: {
   name: string;
   age: number;
};

person = {
   name: ‘me’
   age: 32
}; 
//이때, 타입을 지정외 속성을 넣으려고 하면 오류가 발생한다 

//배열과 객체를 합칠경우

let people:  {
   name: string;
   age: number;
}[];

타입추론

ts는 명시적인 타입표기가 없어도 알아서 유추한다.
그래서 작성할 코드 양이 줄어든다.
배운대로 타입을 지정할 수도 있지만 불필요하게 된다. 그러니 왠만하면 쓰지 말 것~!

유니온 유형

하나의 식별자에 두개의 타입을 지정해야 할때.

//숫자와 문자 타입을 동시에 주고싶을때
let course: string | number = ‘스트링’;

course = 1234; //유니온 타입을 지정하지 않으면 오류가 난다. 

//문자와 문자배열을 주고싶을때 
let userName: string | string[];

유니온타입 사용시 필요한만큼 추가할 수 있다.

Type Aliases

동일한 타입을 반복해서 정의하게 될 때.
우리가 기본 타입을 만들어서 거기에 타입을 정의하고, 그 타입 별칭을 사용하는 것이다.

//Before

let person: {
   name: string;
   age: number;
};

let people:  {
   name: string;
   age: number;
}[];

//배열 형태는 아니지만 객체 타입은 동일하다. 

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

let person: Person;
let people: Person[];

함수일 경우

타입을 가진 함수

함수는 타입을 지정하는 위치가 따로 있다.
왜냐하면 함수는 반환 값이 갖는 타입을 통해 함수 타입을 추론하기 때문이다.
그러니까 타입 지정시 매개변수와 반환값까지 생각해야 된다.

function add(a: number, b: number ) : string {
   return a+b;
}

void는 함수일때만 사용하고, 반환값이 없을때 사용한다.

제네릭 타입

함수의 매개변수에 타입을 앞서 지정해주면 반환값도 매개변수에 맞추어 추론을 한다.
만약 반환값이 내가 지정한 타입과 다르게 된다면 이는 심각한 오류가 발생한다.

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] 숫자만 있어도 타입은 any로 나온다. 

updatedArray[0].split(‘’);
//이 때, ts에서 타입을 any로 정해주었기 때문에 split이 작동되는 끔찍한 오류를 범할 수 있다.

제너럴 타입은 대명사 같은 역할을 한다.
ts에게 any타입이 아니라는것 알 수 있고, 그렇다고 내가 타입을 정해놓아서 생기는 오류를 막는다.
인수로 들어가는 타입이 한가지가 아닐때 쓰기 좋을것 같다.
=> 함수의 타입 안정성과 유연성을줌

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

const demoArray = [1,2,3]; 
const updatedArray = insertAtBeginning(demoArray, -1); 
//인수로 들어오는 demoArray의 타입을 number로 추론한다.

const stringArray = insertAtBeginning([‘a’, ‘b’, ‘c’], ‘d’)
//인수로 들어오는 타입을 string으로 추론한다. 

updatedArray[0].split(‘’);