개발공부/개념정리 | TypeScript 6

제네릭

정의 함수를 파라미터처럼 사용하는 것. 기본 문법 function logText(text: T): T { console.log(text); return text; } logText('hi'); ❗️유니온 방식을 이용한 제네릭 타입의 문제점 function logText(text: string | number) { console.log(text); return text; } const a = logText('hi'); a.split(''); logText(10); 코드를 위와 같이 작성했을때 split은 에러가 난다. 에러코드를 살펴보자면 아래와 같이 string에서는 가능하지만 number 형식에서는 사용이 불가능하다는 문구가 나타나게된다. 제네릭의 타입추론에서의 이점 확실하게 어떤 타입인지 선언해주기때..

이넘(Enums)

❓이넘 특정값들의 집합을 의미하는 자료형. 숫자형 이넘 초기값을 주지않으면 0부터 시작한다. enum Shoes { Nike, Adidas } var myShoes = Shoes.Nike; console.log(myShoes) //0 초기값을 주게 된다면 초기값부터 차례대로 1씩 증가하게 된다. enum Shoes { Nike = 10, Adidas } var myShoes = Shoes.Nike; console.log(myShoes) //0 문자형 이넘 문자형은 숫자형과 다르게 auto-incrementing이 없으므로 모든 값에 특정문자 또는 다른 이넘 값으로 초기화 시켜주어야 한다. enum Shoes { Nike = '나이키', Adidas= '아디다스' } var myShoes = Shoes.N..

Union type | intersection type

Union type function logMessage(value: string | number) { console.log(value); } logMessage('hello'); logMessage(100); 타입가드 조건문에서 객체의 타입을 좁혀나갈 수 있다. 참고링크 var jong: string | number | boolean; function logMessage(value: string | number) { if(typeof value === 'number') { value.toLocaleString(); } if(typeof value === 'string'){ value.toString(); } throw new TypeError('value must be string of nubmer') ..

인터페이스 / 타입 별칭

* 인터페이스는 타입을 정의하는 것. * 타입을 정의해 놓은걸 똑같이 반복해서 쓰고 싶지않으면 extends를 써서 확장으로 쓰면 된다. 인터페이스 interface User { age: number; name: string; } //변수에 인터페이스 활용 var seho: User = { age: 33, name: 'seho' } //함수에 인터페이스 활용 function getUser(user: User){ console.log(user); } const capt = { name: 'captine', age: 100 } getUser(capt); //함수의 스펙(구조)에 인터페이스를 활용 interface SumFunction{ (a: number, b: number): number; } var su..

기본 타입 && 함수타입

기본타입 //TS 문자열 선언 let str: string = 'hello'; //TS 숫자 let num: number = 10; //TS 배열 let arr: Array = [1, 2, 3]; let items: number[] = [1, 2, 3]; //11번째줄과 같은 선언 let heroes: Array = ['Capt', 'Thor', 'Hulk']; //TS 튜플 let addr: [string, number] = ['gangnam', 13069]; // TS 객체 let obj: object = {}; let person: object = { name: 'capt', age: 100 }; let people: {name: string, age: number} = { name: 'thor',..

기초설정

🔥처음 시작할 때, 인스톨 먼저 시켜주고 시작한다. npm i typescript -g ❓만약 ts로 작성한 파일을 js파일로 만들고 싶다면 tsc 다음 파일명을 써주면된다! ※ 플레이그라운드에서 tsc를 돌렸을 때의 결과물을 볼 수 있다. 타입스크립트 플레이그라운드 tsc index.ts 🚧 설정 파일 만들기( tsconfig.json ) { "compilerOptions": { "allowJs": true, "checkJs": true, //js에서 @ts-check 를 썼던 것과 같은 역할 "noImplicitAny": true } } 우선 설정은 간단하게 세개만 했는데 기타 설정들을 참고하려면 공식문서를 참고해서 추가하면 된다.