'📃 Front-End/TypeScript' 카테고리의 글 목록 (2 Page)

Union Type ( 유니온 타입 ) 과 Intersection Type

2022.10.22

파라미터 또는 변수에 하나의 타입 이상을 사용할 수 있게 해주는 것 입니다. Union Type 예시 function logMessage(value: string){ console.log(value) } logMessage('hello'); logMessage(100); // number 타입이 들어오기에 오류 // 숫자를 포함시키고 싶으면 string -> any 로 바꾸면 된다.

📃 Front-End/TypeScript

Type Aliases ( 타입 별칭 )

2022.10.22

타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다. ✔ 사용하는 방법 // string 타입을 사용할 때 const name: string = 'capt'; // 타입 별칭을 사용할 때 type MyName = string; const name: MyName = 'capt'; ✔ 타입 별칭의 특징 ( 인터페이스와 비교 ) interface Person{ name: string; age: number; } type Person = { name: string; age: number; } let seho: Person ={ name: '세호', age: 30 } 타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는..

📃 Front-End/TypeScript

Interface ( 인터페이스 )

2022.10.22

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서 반복되는 타입들을 모아서 하나의 인터페이스로 정의를 하여 사용 합니다. ✔ 변수에 활용한 인터페이스 사용할 때 반드시 인터페이스에 있는 속성을 정의해야 합니다. // 인터페이스 선언 interface User { age: number; name: string; } let hyunho: User = { age: 26, name: '현호' } ✔ 함수에 활용한 인터페이스 인자에 인터페이스를 적용 -> 특정 형식을 준수하는 데이터만 받겠다고 정의 합니다. interface User { age: number; name: string; } function getUser(user: User){ console.log(user); } cons..

📃 Front-End/TypeScript

타입스크립트의 함수

2022.10.22

✔ 함수의 파라미터(매개변수) 타입 function sum(a: number, b: number){ return a + b; } sum(10,20); ✔ 함수의 반환 값 에 타입을 정의하는 방식 function add(): number{ return 10; } ✔ 함수의 기본적인 타입 선언 // JS function sum(a, b) { return a + b; } // TS function sum(a: number, b: number): number { return a + b; } ✔ 함수의 옵셔널 파라미터 (선택적 파라미터) 타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주합니다. 즉, 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다는 의미입니다. 하지만 필요에 따라서 선택적으로..

📃 Front-End/TypeScript

타입스크립트 기본 타입

2022.10.22

타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다. ✔ 타입 표기(Type Annotation) : 를 이용하여 자바스크립트 코드에 타입을 정의하는 방식 ✔ String // 기본 JS 선언 const str = 'hello'; // TS 문자열 선언 const str: string = 'hello'; ✔ Number let num: number = 10; ✔ Array let arr: Array = [1,2,3]; let heroes: Array = ['captin','thor','hulk'] // 숫자를 넣으면 에러 let items : number[] = [1,2,3]; ✔ Tuple 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식 입니다. let a..

📃 Front-End/TypeScript

TypeScript

2022.10.22

타입스크립트란 ❓ 자바스크립트의 확장된 언어라고 볼 수 있으며, 자바스크립트에 타입을 부여한 언어 입니다. 브라우저에서는 타입스크립트를 실행 할 수 없기 때문에 컴파일(complile) 과정을 거쳐야 합니다. TypeScript vs JavaScript ❓ TypeScript JavaScript 동적타입 언어 정적타입 언어 인터프리터 언어 컴파일 언어 자바스크립트에 의존적임 독립적으로 사용 가능 더 나은 구조와 간결함, 일관성, 재사용성 좀 더 유연함 (타입에 제한을 받지 않으므로) .ts 확장자 .js 확장자 복잡한 프로젝트에 적합함 작고 간단한 프로젝트에 적합함 타입스크립트 쓰는 이유 ❓ ✔ 에러의 사전 방지 // math.js function sum(a, b) { return a + b; } // ..

Union Type ( 유니온 타입 ) 과 Intersection Type

Type Aliases ( 타입 별칭 )

Interface ( 인터페이스 )

타입스크립트의 함수

타입스크립트 기본 타입

TypeScript

티스토리툴바