front-end

[typescript] tsconfig.json 설명

이 파일은 특정 프로젝트에 추가할 수 있다. 타입 스크립트를 자바스크립트로 컴파일을 할 때 사용된다. 컴파일러는 개발서버를 구독하거나 프로젝트를 빌드할 때 자동으로 호출된다. 컴파일은 백그라운드에서 실행된다. { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "..

2024. 2. 11. 18:59

front-end

[typescript] 유틸리티 타입

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다. keyof 키 값을 유니온 형태로 받을 수 있다. interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender //const uk: UserKey = ""; // 오류 const uk: UserKey = "id"; // 정상 위에서 keyof User를 하면 'id' | 'name' | 'age' | 'gender와 동일하다. Partial partial은 프..

2023. 11. 27. 06:50

front-end

[typescript] 제네릭

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다. 제네릭 필요성 제네릭을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 지정할 수 있다. function getSize(arr: number[]): number { return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); // 3 숫자 배열을 넘기면 길이를 가져오는 함수이다. 다음은 문자열을 넘기는 함수를 만들어보자. function getSize(arr: number[] | string[]): number { return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); // 3 const arr2 = ["1", "2", "3"]; getSi..

2023. 11. 27. 06:49

front-end

[typescript] 클래스

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다. 타입스크립트 클래스 Car 클래스를 하나 만든다. class Car { constructor(color) { this.color = color; } start() { console.log("start") } } const bmw = new Car("red"); 이 코드는 javascript에서는 문제가 없다. 하지만 typescript에서는 오류가 발생한다. typescript에서 클래스를 만들 때 멤버변수는 미리 선언해줘야 한다. class Car { color: string; constructor(color: string) { this.color = color; } start() { console.log("start") } } const ..

2023. 11. 27. 06:48

front-end

[typescript] 리터럴

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다. 변수 선언 변수를 선언할 때 const와 let을 사용할 수 있다. const는 변하지 않는 값을, let은 변할 수 있는 값을 사용할 수 있다. const userName1 = "Bob"; let userName2 = "Tom"; 이때 userName1은 Bob 타입을 userName2는 string 타입으로 지정을 하게 된다. userName1은 Bob 타입 외에 변할 수 없고 userName2는 string 타입으로 다른 값으로 변경이 가능하다는 의미다. userName2 = 3; // 오류 userName2는 string 타입이므로 number인 3을 넣을 수 없다. 만일 3과 같은 number를 넣을 수 있게 하려면 아래와 같이 명시..

2023. 11. 27. 06:48

front-end

[typescript] 함수

내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다. 함수 리턴타입 함수는 매개변수의 타입과 리턴타입을 지정해야 한다. function add(num1: number, num2: number): void { console.log(num1 + num2); } 리턴타입이 없을 경우는 void를 사용하고 function add(num1: number, num2: number): numbr { return num1 + num2; } 리턴타입이 있을 경우 리턴타입(number)을 지정하면 된다. function isAdult(age: number): boolean { return age > 19; } isAdult도 이렇게 지정할 수 있다. 선택적 매개변수 인터페이스 처럼 함수의 매개변수도 optional로..

2023. 11. 27. 06:47

front-end

[typescript] 인터페이스

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다. object 속성 let user:object; user = { name: 'xx', age: 30 } user를 object 타입으로 정의를 하고 콘솔에서 name을 찍어보면 에러가 발생한다. console.log(user.name); // 에러 발생 object에는 특정 속성값에 대한 정보가 없기 때문이다. 이렇듯 property를 정의해서 나타낼 때는 인터페이스를 사용한다. 인터페이스 정의 interface User { name : string; age : number; } let user : User = { name : 'xx', age : 30 } User 인터페이스를 정의하고 user 값을 사용해 보자...

2023. 11. 27. 06:46

front-end

[typescript] 기본타입

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다. 문자열 타입 let car:string = 'bmw'; car = 'benz'; car는 문자열이다. 문자열에는 string으로 타입을 지정할 수 있다. let car:string = 'bmw'; car = 1; // 오류 car에 숫자로 된 값을 넣으면 에러가 발생하는 것을 알 수 있다. 타입 추론 타입스크립트는 타입을 지정하지 않으면 값을 가지고 예측을 한다. //예) let car = 'bmw'; // car는 string으로 지정 //예) let car = 123; // car는 number로 지정 다른 타입 let age:number = 30; // number로 지정 let ..

2023. 11. 27. 06:46

front-end

[typescript] 타입스크립트를 쓰는 이유

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다. 우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못한다. 자바스크립트로 변환해서 실행해야 한다. 그러면 어떤 장점이 있어 타입스크립트를 사용하는걸까? add 함수를 하나 만들어보자. function add(num1, num2) { console.log(num1 + num2); } 이를 사용하는 함수를 하나 호출해보자. add(); // 오류가 나지 않음 add(1); // 오류가 나지 않음 add(2, 3); // 5로 리턴 add(3, 4, 5); // 12로 예상하지만 7로 리턴 add('hello', 'world'); // hello world로 리턴 위의 함수를 사용하는 개발자는 어디서 문제가 발생했는지..

2023. 11. 27. 06:45