반응형
# TypeScript
## 타입스크립트 기초_변수와 함수 타입 정의하기
TS 문자열, 숫자, 배열은 아래와 같이 선언.
1. 문자열
// JS 문자열 선언
var str1 = 'hello';
// TS 문자열 선언
// TS 사용 시 대부분 ES6 사용으므 var 보다는 let, const 사용.
let str2: string = 'hello';
2. 숫자
// TS 숫자
let num: number = 10;
3. 배열
// TS 배열
let arr: Array<number> = [1, 2, 3];
let heroes: Array<string> = ['Capt', 'Thor', 10]; // tslint 설치 된 경우 변수타입에 어긋나는 경우 밑줄표시됨.
let items: number[] = [1, 2, 3];
TS 튜플, 객체, 진위값은 아래와 같이 선언.
1. 튜플
// TS 튜플 : 배열의 특정 순서(인덱스)의 타입까지 정의하는 것.
let address: [string, number]= ['gangnam', 15];
2. 객체
// TS 객체
let obj: object = {};
let person1: object = {
name: 'capt',
age: 100
};
let person2: { name: string, age: number } = {
name:'capt',
age: 150
};
3. 진위값
// TS 진위값
let show: boolean = true;
TS 함수 타입 (파라미터, 반환값)은 아래와 같이 선언.
1. 함수_파라미터 타입 정의
// 함수의 파라미터 타입을 정의.
function sum(a: number, b: number) { // 파라미터 타입 정의.
return a + b;
}
sum(10, 20);
2. 함수_반환 값 정의.
// 함수의 반환 값 정의.
function add(): number { // 반환 값 정의.
return 10;
}
3. 함수_타입 정의(기본)
// 함수에 타입을 정의.
function sum2(a: number, b: number): number {
return a + b;
}
TS 함수 타입 (파라미터 제한하는 특성)
- 자바스크립트의 경우 아래와 같음.
function sum(a, b) {
return a + b;
}
sum(10, 20, 30, 40, 50); // JS의 경우 정해진 인자 외에 추가로 인자를 넘길수 있음, 단 정해진 a, b만 반응.
- TS의 경우 아래와 같음.
function sum(a: number, b: number): number {
return a + b;
}
sum(10, 20, 30, 40); // TS의 경우 엄격하게 체크. (추가로 인자 넘기면 밑줄표시됨.)
TS 함수 (옵셔널 파라미터)
// 함수의 옵셔널 파라미터 (선택적 파라미터) - 옵셔널 파라미터에는 ? 사용.
function log(a: string, b?: string, c?: string) {
}
// 필요에 따라 다른 인자를 넘겨서 반환 받고 싶을때.
log('hello world');
log('hello ts', 'abc');
반응형
'인프런 강의 학습 > TypeScript' 카테고리의 다른 글
TypeScript 6일차_타입 별칭 (0) | 2022.03.19 |
---|---|
TypeScript 5일차_인터페이스 (0) | 2022.03.19 |
TypeScript 4일차_할 일 관리 애플리케이션 TS 변환 (0) | 2022.03.18 |
TypeScript 2일차_타입스크립트 시작하기 (0) | 2022.03.15 |
TypeScript 1일차_타입스크립트 개발환경 구성 (0) | 2022.03.14 |