1. TypeScript
2. TypeScript 함수
Type이 필요한 이유
- 개발자는 age 변수에 숫자 값이 저장되길 원함
- 사용자는 age 변수에 숫자 값이 저장되는지 모름
- 숫자 값을 저장하는 변수에 문자열을 저장함
특징
- 변수 값에 데이터 타입 지정 가능(예측 가능, 디버깅 편리)
- 객체지향 프로그래밍 가능(클래스 기능 제공)
동작 과정
기존에는 별도의 변환 과정 필요❌
타입스크립트는 자바스크립트로 변환을 시켜줘야함
*컴파일 : 특정 언어의 코드를 다른 언어로 바꿔주는 과정
TypeScript 문법
| 유형 |
자바스크립트 타입 |
타입스크립트 타입 |
| 숫자 타입 |
Number |
number |
| 불리언 타입 |
Boolean |
boolean |
| 문자열 타입 |
String |
string |
| 객체 타입 |
Object |
object |
변수 선언 방법
- let 키워드
let 변수이름
let 변수이름 = 초기값
- const 키워드
const 변수이름 = 초기값
타입 주석(type annotation)
let 변수이름: 타입
let 변수이름: 타입 = 초기값
const 변수이름: 타입 = 초기값
기존의 자바스크립트면 에러 ❌
달아준 타입과 일치하지 않아, 오류 지렁이!
〰〰〰〰
타입 추론(type inference)
any 타입 : 값의 타입과 무관하게 어떤 종류의 값도 저장할 수 있음
let a: any = 0;
a = "hello";
a = true;
a = {};
➡ 오류 안남! 하지만 추천은 ❌
union 타입 : 하나의 변수에 여러 개의 타입을 지정할 수 있음
타입 가드(Type Guard)
- union 타입을 사용할 경우, 자바스크립트의 typeof 연산자를 이용하여 코드 검증을 수행하는 것을 의미
- typeof 연산자 : 변수의 데이터 타입을 반환하는 연산자
오류 발생
수정
타입 별칭(Type Aliases)
- 기존에 존재하는 복잡한 타입을 저장하여 새로운 타입으로 생성하는 기능
➡ TypeAliases.tsx
const TypeAliases = () => {
let people: {
name: string;
age: number;
};
type personType = {
name: string;
age: number;
};
return <div></div>;
};
수정
const TypeAliases = () => {
type personType = {
name: string;
age: number;
};
let people1: personType;
let people2: personType;
별칭 쵝오~😊
열거형(Enum)
- 서로 연관된 아이템들을 함께 묶어서 표현하는 자료형
ex) 요일, 계절, 성별
enum GenderType {
Male,
Female,
}
let person: {
name: string;
age: number;
gender: GenderType;
};
person = {
name: "gan",
age: 20,
gender: GenderType.FeMale,
};
let person: {
name: string;
age: number;
gender: "Male" | "Female";
};
person = {
name: "gan",
age: 20,
gender: "Female",
};
템플릿 문자열
`${변수이름}`
함수
함수 선언문
const App = () => {
function add(a: number, b: number): number {
return a + b;
}
let result = add(1, 2);
console.log(result);
return <div></div>;
};
결과는 3!
반환값이 문자열 타입인 함수
function add(a: string, b: string): string {
return a + b;
}
let result = add("Hello", "gan"); // 결과 Hellogan
console.log(result);
반환값이 문자열 배열 타입인 함수
const App = () => {
function add(a: string, b: string): string[] {
return [a + b];
}
let result = add("Hello", "gan"); // 결과 ['Hellogan']
console.log(result);
return <div></div>;
};
반환값이 없는 함수
const App = () => {
function add(a: string, b: string): void {
console.log(a, b);
}
add("Hello", "gan"); // 결과 Hello gan
* void 타입 : 아무것도 반환하지 않는 함수의 반환 값으로만 사용되는 타입
선택적 매개변수
- 필수 매개변수가 아닌 경우
- 매개변수 이름 뒤에 물음표(?) 기호를 붙임
function add(a: string, b: string): void {
console.log(a, b);
}
add("Hello");
➡ 에러 발생
function add(a: string, b?: string): void {
console.log(a, b);
}
add("Hello"); // 정상 실행
⭐ 주의사항 ⭐
function setUser(
id: string,
name: string,
age?: number,
address?: string
): void {
console.log(`ID:${id}`);
console.log(`NAME:${name}`);
console.log(`AGE:${age}`);
console.log(`ADDRESS:${address}`);
console.log(`------------------`);
}
// setUser("admin"); 에러발생
setUser("admin", "gan");
setUser("admin", "gan", 20);
setUser("admin", "gan", 20, "seoul");
기본 매개변수
function setUser(
id: string,
name: string,
age: number = 20,
address: string = "seoul"
): void {
console.log(`ID:${id}`);
console.log(`NAME:${name}`);
console.log(`AGE:${age}`);
console.log(`ADDRESS:${address}`);
console.log(`------------------`);
}
setUser("admin", "gan");
setUser("admin", "gan", 30);
setUser("admin", "gan", 40, "jeju");
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅
