[TypeScript] 타입스크립트 공부하기

let age: number

age= 12;
age = 'a' // 오류 발생(위에서 명시한 건 number, 하지만 문자로 썼음)



let userName : string;

userName='heewon'




let isInstructor : boolean;

isInstructor=true;

 

number 과 같은 타입은 소문자로 작성한다.

 

---

 

 

more complex types

let hobbies : string[]
// let hobbies : number[]
// let hobbies : boolean[]
hobbies = ['sports', 'cooking', 122] // 오류 발생 (뜬금없이 숫자열이 껴있다)
hobbies = ['sports', 'cooking']

 

 

 ** any

: 기본값으로 아무 타입이 와도 상관없다. 하지만 그렇게 되면 js랑 별반 다를 게 없어지는 것이니 되도록 사용하지 않기로! 

 

 

type Person ={
person:
   name:string;
    age:number;
    
    
let person: Person

 

type을 정의해서 사용할 수 있다

그리고 변수처럼 사용 가능

 

---

 

 

Type inference (타입 추론)

 

let course = 'React - The Complete Guide'

course = 1234; // 오류 발생

 

우리는 문자열이라고 타입을 지정하지 않았지만

ts 가 추론하여 비교하고 오류를 발생시켜준다 !

 

 

---

 

다양한 타입을 여러 개 지정하고 싶다면! 

  ==> union 타입을 사용하자 

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

course = 1234; // 오류가 사라짐

 

 string 과 number 두 타입 다 사용 가능!

 

---

 

 

Functions & types

 

매개변수 뒤에 :number를 써서 타입을 나타낼 수 있다

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

 

 

 

함수에 반환 값이 없다면!

 --> void 를 사용하자

 

function printOutPut(value : any) {
    console.log(value); // 이 함수는 아무것도 반환하지 않는다
}

 

 

---

 

제네릭 (Generics)

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Generic-%ED%83%80%EC%9E%85-%EC%A0%95%EB%B3%B5%ED%95%98%EA%B8%B0

📘 타입스크립트 Generic 타입 정복하기

 

 

const newArray = [value, ...array];
   return newArray;
}

const demoArray = [1,2,3];
// ts는 숫자로 인식하지 않는다(숫자라는 걸 모름 ;) 왜냐면 위에서 any type이라고 명시해주어야 하기 때문!
const updatedArray = insertAtBeginning(demoArray, -1 ) // updatedArray any로 나옴!
// [-1, 1, 2, 3]


updatedArray[0].split(''); // 실행하면 오류가 발생할거임. 숫자 값에는 split()을 호출할 수 없다

 

 

 

 

!! 그래서 제네릭이 필요한 것이다 !!

  --> 타입의 안정성과 유연성

 

 

function insertAtBeginning<T>(array: T[], value:T) { // 배열의 값과 value는 같은 타입! (이건 이주 중요한 정보)
    const newArray = [value, ...array];
    return newArray;
}

//const demoArray = [1,2,3]; 
//const updatedArray = insertAtBeginning(demoArray, -1 ) // 타입이 number로 바뀜
// [-1, 1, 2, 3]
const stringArray = insertAtBeginning(['a','b','c'],'d') // 타입이 string 바뀜
//  ==> array와 value는 같은 타입이라고 위에서 명시해줬기 때문에 알아서 string으로 바뀐다


stringArray[0].split(''); // 오류 안남

 

 

 

 

 

 

 

---