TypeScript
TypeScript란?
TypeScript
타입이 필요한 이유
- 개발자
function makePerson(name, age) { }- 사용자
makePerson("soo", "20")
- 개발자
function makePerson(name:string, age:number) { } - 사용자
makePerson("soo", "20")
특징
- 변수 값에 데이터 타입 지정 가능
- 예측 가능한 코드 작성 가능
- 디버깅 편리
- 객체지향 프로그래밍 가능
- 클래스 기능 제공
동작 과정
- 컴파일: 특정 언어의 코드를 다른 언어로 바꿔주는 과정
- 브라우저는 타입스크립트 언어를 이해할 수 없기 때문에 자바스크립트로 변환
프로젝트 생성
TypeScript 설치
- TypeScript 컴파일러 설치
$ npm install -g typescript- 버전 확인
$ tsc --versionReact + TypeScript 프로젝트 생성
$ npx create-react-app type-app --template typescript
App.tsx
- 필요 없는 코드 제거
function App() {
return <div></div>;
}
export default App;- App.tsx
function App() {
const name = "TypeScript";
return <h1>{name}</h1>;
}
export default App;- 실행
$ npm startTypeScript 문법
타입스크립트 기본 타입
| 유형 | 자바스크립트 타입 | 타입스크립트 타입 |
|---|---|---|
| 숫자 타입 | Number | number |
| 불리언 타입 | Boolean | boolean |
| 문자열 타입 | String | string |
| 객체 타입 | Object | object |
변수 선언 방법
- let 키워드
let 변수이름
let 변수이름 = 초기값- const 키워드
const 변수이름 = 초기값타입 주석(type annotation)
- 변수 이름 뒤에 콜론(:)과 타입을 붙임
let 변수이름: 타입
let 변수이름: 타입 = 초기값
const 변수이름: 타입 = 초기값- 예시
let a: number = 1
let b: string = "hello"
let c: boolean = true
let d: object = {}타입 추론(type inference)
- 변수 선언문에 타입 주석을 명시하지 않은 경우
-
대입 연산자(=)의 오른쪽 값을 분석해 왼쪽 변수의 타입을 결정
-
이후 각 변수에는 해당 타입의 값만 저장 가능
let a = 1 // a의 타입을 number로 판단 let b = "hello" // b의 타입을 string으로 판단 let c = true // c의 타입을 boolean으로 판단 let d = {} // d의 타입을 object로 판단
-
any 타입
- 값의 타입과 무관하게 어떤 종류의 값도 저장할 수 있음
- 잘 사용하지는 않음
let a: any = 0
a = "hello"
a = true
a = {}union 타입
- 하나의 변수에 여러 개의 타입을 지정할 수 있음
let a: string | number;
a = "10"; // string 값 저장
a = 20; //number 값 저장타입 가드(Type Guard)
- union 타입을 사용할 경우, 자바스크립트의 typeof 연산자를 이용하여 코드 검증을 수행하는 것을 의미
- typeof 연산자
- 변수의 데이터 타입을 반환하는 연산자
열거형(Enum)
- 서로 연관된 아이템들을 함께 묶어서 표현하는 자료형
- 요일(월~일)
- 계절(봄, 여름, 가을, 겨울)
- 성별(여자, 남자)
- 열거형 타입
enum GenderType {
Male,
Female
}타입 별칭(Type Aliases)
- 기존에 존재하는 복잡한 타입을 저장하여 새로운 타입으로 생성하는 기능
- 사용 방법
type 새로운타입 = 기존타입템플릿 문자열
- 변수에 담긴 값을 조합해 문자열을 만드는 방식 제공
- 사용 방법
`${변수이름}`- 예시
let name: string = "Sooa";
let result = `My name is ${name}`;
console.log(result);함수
함수
함수 선언문
function 함수이름(매개변수1: 타입1, 매개변수2: 타입2): 반환값_타입 {
// 작업
}반환값이 숫자 타입인 함수
function add(a: number, b: number): number {
return a + b;
}
let result = add(1, 2);
console.log(result);반환값이 문자열 타입인 함수
function add(a: string, b: string): string {
return a + b;
}
let result = add("Hello", "SOOA");
console.log(result);반환값이 문자열 배열 타입인 함수
function add(a: string, b: string): string[] {
return [a, b];
}
let result = add("Hello", "SOOA");
console.log(result);반환값이 없는 함수
function add(a: string, b: string): void {
console.log(a, b);
}
add("Hello", "SOOA");- void 타입
- 아무것도 반환하지 않는 함수의 반환 값으로만 사용되는 타입
void 타입
- return 값이 없는 함수의 반환 타입
function printValue(a: number, b: string): void {
console.log(`a : ${a}, b : ${b}`)
}선택적 매개 변수
선택적 매개 변수
- 필수 매개변수가 아닌 경우
- 매개변수 이름 뒤에 물음표(?) 기호를 붙임
- 함수 뿐만 아니라 객체 등에서도 다양하게 사용할 수 있음
function add(a: string, b: string): void {
console.log(a, b);
}
// add()에 매개변수를 한 개만 전달
add("Hello"); // 에러 발생- 수정
function add(a: string, b**?**: string): void {
console.log(a, b);
}
// add()에 매개변수를 한 개만 전달
add("Hello"); // 정상 실행주의 사항
기본 매개변수
기본 매개변수
- 매개변수에 값이 전달되지 않았을 때, 기본값으로 지정
function 함수이름(매개변수: 타입 = 기본값): 반환값_타입 {
// 작업
}새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅
