📍타입스크립트
- 필요 이유
- 자바스크립트 코드는 가독성이 떨어지고 코드의 스케일이 커지면 코드 관리 어려움
- TS의 경우 JS보다 버그를 줄일 수 있고, 유지보수가 쉬움
- 강력한 높은 퀄리티의 코드를 생산할 수 있음
- 타입스크립트 = 자바스크립트 + 타입 체크
- TS → (컴파일) → JS → 웹 브라우저
JS vs TS
// JS
function Plus(a,b){
return a + b;
}// TS
function Plus(a : number, b : number){ // 타입 지정(컴파일 타임 시 오류 체크)
return a + b;
}tsc
타입스크립트 컴파일 명령어- tsc —init
- tsconfig.json 설정 파일 설정값이 자동으로 생성
- tsc -w 파일명
- 해당 파일을 컴파일러가 계속 감시하며 변동사항 반영
데이터 타입 추론
- TS는 타입 추론 기능을 통해 변수의 타입 자동 판단 가능
- TS 컴파일러가 초기에 할당된 값을 바탕으로 타입 추론
let age = 30; // number로 타입 추론데이터 타입
-
기본 데이터 타입
- number
- string
- boolean
- null : 의도적으로 값이 없음을 나타냄
- undefined
-
객체 타입
- object
- array
- tuple
-
특수 타입
- any : 어떤 타입이든 할당될 수 있는 타입
- 타입이 모호한 경우 (임시)
- unknown : 타입을 미리 알 수 없는 경우
- any : 어떤 타입이든 할당될 수 있는 타입
타입 명시
- 변수를 선언할 떄 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정
- 타입 추론보다 더 명확하게 지정할 수 있음
let x : string = "string"; 함수 타입 명시
- 매개변수, 리턴 타입
function plue(a :number,b: number) : number { // <- 리턴 타입
return a + b;
}function plue(a :number,b: number) : void { // <- 리턴 값이 없을 경우
console.log( a + b );
}let stdId : number = 1;
let stdName : string = "Mike";
function getInfo(id : number) :{
}{
}인터페이스
- 사용자 정의 타입, ‘string’과 같이 데이터 타입으로 사용 가능
- 인터페이스 내에 메소드 선언 가능
- 상속받는 클래스는 반드시 메소드 오버라이딩 해야 함
- 인터페이스를 클래스에 상속할 수 있음
let stdId : number = 1;
let stdName : string = 'Mike';
let age : number = 17;
let gender : string = 'Male';
interface Student{
stdId : number;
stdName : string;
age : number;
gender : string;
// setName(name : string) : void;
setName : (name : string) => void; // 화살표 함수
}
class MyStudent implements Student{
stdId = 123456;
stdName = 'dev';
age = 17;
gender = 'Male';
setName(name : string) : void{
this.stdName = name;
console.log("이름 설정: " + this.stdName)
}
}
const myInstance = new MyStudent();
myInstance.setName('데브');
// 이름 설정 : 데브
function getInfo(id:number) : Student{
return { // return 값과 인터페이스 요소값이 같지 않으면 error
stdId : id,
stdName : 'dev',
age : 17,
gender : 'Male'
};
}
console.log(getInfo(5678));
// {
// stdId : 5678,
// stdName 'dev',
// age : 17,
// gender : 'Male'
// }선택적 프로퍼티
- 속성 값 뒤에 ? option을 붙이면 return 값이 없어도 됨
- optional이 시작되는 매개변수 뒤의 매개변수 또한 optional이어야 함
interface Student{
stdId : number;
stdName? : string;
}선택적 매개변수
- ? option을 붙으면 매개변수를 넣지 않아도 됨
function getInfo(id? : number) : Student{
return {
stdId : id,
stdName : 'dev'
};
}열거형 enum
- 사용자 정의 타입
- JS 변환된 코드에서는 GenderType이 열겨형으로 정의됨
- 첫 번째 요소 → 0
- 각각의 값에 직접 할당해서 문자열로 열거형도 가능
enum GenderType{ // 성별 범위 제한
Male,
Female
}
interface Student{
gender : GenderType
}
class MyStudent implements Student{
gender = GenderType.Male;
}
객체 리터럴
- male, female 외의 값은 들어올 수 없음
- 사용할 수 있는 값이 정해지므로 코드의 가독성이 높아짐
- 잘못된 값이 들어오는 것을 방지할 수 있음
enum GenderType{ // 성별 범위 제한
Male,
Female
}
interface Student{
gender : 'male' | 'female';
}
class MyStudent implements Student{
gender = GenderType.Male;
}
const user : {name : string, age : number} = {
name : 'a',
age : 20
// age : '25' (number가 아니므로 error 발생)
}any 타입
- 어떤 타입이 들어와도 상관 없기 때문에 오류나지 않음
- 타입을 지정할 수 없는 제한적인 경우에만 사용
- e.g. 외부 라이브러리로 값을 받아 타입을 알 수 없는 경우
let anyVal : any = 100;
anyVal = 'kim'; 유니온 타입
- 제한된 타입을 동시에 지정하고 싶을 때 사용
- | 기호를 사이에 두고 동시에 타입 지정
let anyVal : number | string;타입 별칭
- 반복되는 코드 재사용
type srtOrNum = number | string;
let num str : strOrNum = '100';타입 가드
- typeof 연산자를 이용하여 타입 검증 수행
function convertToString(val : strOrNum) :string{
if(typeof val === 'string'){
item = 0;
}
}Array
- 길이가 가변적, 동일한 타입의 요소로 구성
let numbers : number[] = [1,2,3,4,5];
let fruits : string[] = ['apple', 'banana','orange'];
let mixedArray : (number | string)[] = [1,'two',3];
let readOnlyArr : ReadonlyArray<number> = [1,2,3]; // 수정 안됨, read onlytuple
- 길이가 고정적, 각 요소의 타입이 정해져 있음
let greeting : [number, string, boolean] = [1, 'hello', true];
// 타입의 순서가 정해져 있음클래스
- 객체를 만들기 위한 설계도
- 속성과 함수 모두 가질 수 있음
- 멤버 변수 == 속성 == 프로퍼티
- 멤버함수 == 메소드
class Employee{
// 멤버 변수 ->
empName : string;
age : number;
empJob : string;
// 멤버 함수 ->
printEmp = () : void => {
console.log(this.empName +'의 나이는' + this.age +'이고, 직업은' + this.job +'입니다.');
// this 자기 자신의 객체
}
}
let emp1 = new Employee(); // 객체 생성
생성자
- TS에서는 constructor 메소드 사용함
class Employee{
empName : string;
age : number;
empJob : string;
// 생성자
constructor(mpName : string, age : number, empJob : string;){
this.empName = empName;
this.age = age;
this.empJob = empJob;
}
printEmp = () : void => {
console.log(this.empName +'의 나이는' + this.age +'이고, 직업은' + this.job +'입니다.');
}
}
let emp1 = new Employee('kim', 10, 'student'); // 객체 생성
// emp1 객체가 생성될 때 초기값을 넘겨주고 동시에 생성자 호츨
접근 지정자
- private 멤버 이름 앞에는 언더바를 붙이는 것이 일반적
class Employee{
constructor(
private _mpName : string,
private _age : number,
private _empJob : string;
){
}
// get set
get empName(){
return this._empName;
}
set empName(val : string){
this._empName = val;
}
printEmp = () : void => {
console.log(this._empName +'의 나이는' + this._age +'이고, 직업은' + this._job +'입니다.');
}
}
let emp1 = new Employee('kim', 10, 'student'); // 객체 생성
emp1.empName = 'lee'; // getter와 setter를 통해 변경
📍리액트란?
- 자바스크립트 라이브러리
- 사용자 인터페이스를 위해 페이스북(조던 워크)에서 개발
- 싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 가능
JSX
- 병렬 구조 안됨, 최상위 부모 테크로 감싸져 있어야 함
- if문 대신 삼항연산자 사용
클래스형 컴포넌트
import {Component} from "react";
class ClassCom extends Component{
render(){
return(
<div>
클래스형 컴포넌트
</div>
)
}
}
export defalut ClassCom;함수형 컴포넌트 (권장)
function FunCom(){
return(
<div>
함수형 컴포넌트
</div>
)
}
export defalut FunCom;const FunCom = () => {
return(
<div>
함수형 컴포넌트
</div>
)
}
export defalut FunCom;useState
import React, { useState } from 'react';
const TodoList : React.FC = () => {
const title : string = "오늘 할 일";
const [todos] = useState(['공부하기','자기','회의하기']);
return(
<div className='container'>
<h1>{title}</h1>
<ul>
<li>{todos[0]}</li>
<li>{todos[1]}</li>
<li>{todos[2]}</li>
</ul>
</div>
)
}
export default TodoList;구조 분해 할당
const colors = ['red', 'blue', 'pupple'];
cosnt [f, s, t] = colors;
const person = {
name : 'kim",
age : 18,
city : 'seoul'
}
const {name, age, city} = person;