front-end/TypeScript
-
Typescript interfacefront-end/TypeScript 2024. 2. 23. 10:41
1. interface 1. type과 유사한 기능을 가지고 있습니다. // type Square = { color: string, width: number } interface Square { color: string, width: number } let test: Square = { color: 'red', width: 100 } 2. extends 기능이 존재합니다. interface Student { name: string, } interface Teacher extends Student { age: number } 3. & 기호로도 가능합니다. - & 기호쓰는 방식을 intersection이라고 부르는데 extends 와 유사하게 사용가능합니다. interface Student { name :s..
-
Typescript class 타입 지정 constructor, prototypefront-end/TypeScript 2024. 2. 23. 10:09
1. 필드값 타입 지정하기 1. class 내부에는 모든 자식 object에게 속성을 만들수있습니다. 2. class 내부 중괄호 안에 변수 처럼 작성하면 됩니다. 3. 타입스크립트로 인한 타입을 지정이 가능합니다. class electronics { name :string = 'TV'; model :number = 20240223 } let home = new electronics(); console.log(home); //model:20240223 //name:"TV" 2. constructor 타입지정 1. 필드 값을 설정해야 됩니다. class electronics { constructor() { this.name = name; this.model = model; } } // 에러 발생 Error..
-
Typescript 함수 methods에 type alias 사용법front-end/TypeScript 2024. 2. 22. 10:52
1. methods 안에 타입지정하기 1. Meber 타입 지정하기 - name: 문자열(string) 타입 - age: 숫자(number) 타입 - plusOne: 함수 타입으로, 입력값으로 숫자를 받아들이고 숫자를 반환합니다. - changeName: 함수 타입으로, 인자를 받지 않고 반환값이 없습니다. 2. 함수 설정 방법 - function changeName() { console.log('안녕'); }: 일반적인 함수 선언입니다. - changeName: function() { console.log('안녕') }: 객체 리터럴 내에서의 메서드 선언입니다. - changeName: () => { console.log('안녕') }: 화살표 함수를 이용한 객체 내 메서드 선언입니다. type Mem..
-
Typescript Aliases, readonly, Literal, as constfront-end/TypeScript 2024. 2. 22. 09:30
1. Aliases 1. type 타입변수명 = 타입종류 - 타입을 변수 처럼 만들어 쓰는 문법입니다. type home = string | number | undefined; let 집 :home; 2. object 타입도 가능합니다. type home = { name : string, modelnum : number, } let teacher :home = { name : 'TV', modelnum : 20240222 } 3. type 키워드는 재정의가 불가능합니다. type name = string; type name = number; // 불가능 4. type은 합치는 게 가능합니다. type name = string; type age = number; type newOne = name | age..
-
Typescript Narrowing & Assertionfront-end/TypeScript 2024. 2. 21. 11:00
1. Type Narrowing 1. if문을 활용하여 타입을 정해주는 것을 말합니다. - typeof 를 사용합니다.( in, instanceof 등 타입을 확정하는 코드면 어떤 것이라도 가능 합니다) function num(x :number | string){ if (typeof x === 'number') { return x + 1 } else if (typeof x === 'string') { return x + 1 } else { return 0 } } 2. Type Assertion 1. 타입을 간단하게 assert 할 수 있습니다. - 변수에 'as type'으로 변경해주는 역할을 합니다. function test(x :number | string){ return (x as number) +..
-
Typescript 함수에 타입 지정하기front-end/TypeScript 2024. 2. 21. 10:44
1. 함수 만들기 1. 일반적인 함수입니다. function twice(x){ return x * 2 } 2. 함수에 타입이 지정 가능 합니다. - 입력되는 값(파라미터) - 출력되는 값(return) function twice(x :number) :number { return x * 2 } 3. 파라미터 옵션 지정 - ? 로 인하여 x : number | undefined 똑같습니다. function test(x? :number) { } 2. void(공허) 타입 1. 반환값이 없습니다. 2. return할 자료가 없는 함수의 타입으로 사용가능합니다. function happy(x :number) :void { console.log('그런거 없어'); }
-
Typescript 타입 정리front-end/TypeScript 2024. 2. 21. 10:26
1. primitive types 1. 변수에 타입이 지정 가능합니다. let name: string = 'hoon' let age :number = 32; let marry :boolean = false; 2. array 또는 object 자료 안에도 타입 지정 가능합니다. let home :string[] = ['TV', '냉장고', '노트북'] let my : { age : number } = { age : 32 } 3. 지정된 타입 외의 변경시 오류가 발생합니다. let name : string = 'hoon'; name = 32; // Type 'number' is not assignable to type 'string'.(2322) 4. 자동으로 타입이 지정이 됩니다. 2. union type..
-
react Typescript 설치하기(tsconfig 세부 설정)front-end/TypeScript 2024. 2. 21. 09:36
1. 존재하는 react 프로젝트 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 2. 신규 react 프로젝트 npx create-react-app my-app --template typescript 3. 세부설정 내용 { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능 "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext' "allowJs": true, // js 파일들 ts에..