TypeScript?
타입스크립트는 자바스크립트의 상위 집합(superset)으로,
자바스크립트에 정적 타입 시스템을 추가한 언어.
장점
정적 타입 시스템
- 자바스크립트는 동적 타입 언어이기 때문에
개발 과정에서 타입 관련 오류를 쉽게 발견하기 어려움.
타입스크립트는 정적 타입 시스템을 통해 이러한 문제를 해결
코드 가독성 및 유지보수성 향상
- 정적 타입 시스템은 코드의 가독성과 유지보수성을 높여줍니다.
개발자는 변수, 함수, 객체 등의 타입을 명시적으로 선언할 수 있어
코드의 의도를 더 명확히 파악할 수 있습니다.
대규모 프로젝트 지원
- 자바스크립트는 대규모 프로젝트에서 타입 관련 이슈로 인한 문제가 발생할 수 있음.
타입스크립트는 이러한 문제를 해결하고,
대규모 프로젝트에서도 효과적으로 사용될 수 있도록 설계.
IDE 지원 및 생산성 향상
- 타입스크립트는 강력한 IDE 지원을 제공.
코드 자동 완성, 리팩토링, 오류 검사 등의 기능을 통해
개발자의 생산성을 높일 수 있음.
설치방법
1. Node.js 설치
- Node.js 공식 웹사이트(https://nodejs.org)에서
최신 버전의 Node.js를 다운로드하여 설치.
2. npm을 통한 타입스크립트 설치
- 터미널이나 명령 프롬프트에서 다음 명령어를 실행하여 타입스크립트를 전역적으로 설치
npm install -g typescript
3. IDE 설치 및 설정
- Visual Studio Code, WebStorm, IntelliJ IDEA 등의 IDE를 설치
이러한 IDE들은 타입스크립트 지원 기능을 제공하므로,
개발 환경을 보다 효율적으로 구축 가능.
IDE에 따라 타입스크립트 지원을 위한 추가 설정이 필요
4. 프로젝트 초기화
타입스크립트 프로젝트를 시작할 때는 다음 명령어를 실행하여
tsconfig.json 파일을 생성할 수 있습니다
tsc --init
6/30 추가
원시값중 unKnown 은 어떤값이 들어올지 모를때
타입검사후 사용가능 이프문으로 typeof xxx = "타입" 이런식으로
배열명 : 타입[ ] = [ ]
튜플? 타입과순서를 정확히 지정
=>배열 : [string , number] = ["123",123]
유니온? 섞여있는경우 어떻게 순서가 들어올지 모를때
=>배열: (string | number)[ ] = ["123",123 ,123,123,"123",123]
자바스크립트 문법 or =>|| 인데 요기는 한개만 |
객체는 타입추론 알아서해줌 하지만 일단 명시적으로 지정하기로
객체명 : 타입{ 키:타입, 키:타입, 키:타입} = { }
프로퍼티가 많아 질경우 따로 타입알리어스 로 빼줌
type 타입변수명 = { 키:타입; 키:타입; 키:타입}
객체명 : 타입변수명 = { }
interface 타입변수명 { 키:타입; 키:타입; 키:타입 } 도 타입이랑 똑같음 .다만 타입알리어스 좀더 요즘추세
인터페이스는 객체지향적일때 쓰는 class 쓸때
중첩 객체
인터섹션 합칠수있음
type 타입변수명1 = 타입변수명2 & { 프로퍼티 : 타입변수명3 }
=> type 타입변수명1 = {타입변수명2 프로퍼티들 ; 프로퍼티: 타입변수명3}
=> 객채명 : 타입변수명1 ={타입변수명2 프로퍼티들, 프로퍼티: 타입변수명3들 }
함수
함수선언문
function 함수명 (매개변수:타입) : 타입 { }
매개변수 뒤 :타입은 함수의 리턴값 << 없어도 타입추론해주지만 명시하는 습관들이기
자바스크립트에서 리턴키워드 없는 함수는 뭘리턴? 언디파인
하지만 타입스크립트에서는 리턴값이 없는 함수는 void라는 타입을 명시해줌
화살표함수 > 함수표현식 : 값으로 평가되는 문장 , 변수에 담을수있냐없냐
함수명 = ( 매개변수 : 타입) : void => { } or
함수명 : (매개변수 : 타입) => void = (매개변수) => { } or
type 타입명 = (매개변수 : 타입) =>void;
함수명 : 타입명 = (매개변수 ) => { }
async함수 리턴타입 항상프로미스
함수명 = async (): promise<타입[ ]> => { }
타입전용 매개변수 => 제네릭(Generic)
type 타입명 = { value : T }
안의 이름은 자유지만 타입의약자로 t많이씀
안에 문자가 들어오면 벨류도 문자 , 숫자가 들어오면 숫자
type Todo = { }
const getTodos = async (): Promise<Todo[]> => {
const response = await axios.get<Todo[]>("http://localhost:4000/todos");
return response.data;
}
서버로 부터 값을 받아오고 => 타입폴더에 관련 타입파일 생성 => 받아온값을 파일에서 타입정의
=> 특정값이 각각의 데이터에 있기도 하고 없기도 할때 옵셔널체이닝(Optional Chaining) ?
=> 특정값에 뭐가 들어올지 모르는상황 => 인덱스시그니쳐
객체 타입의 모든 프로퍼티가 특정 타입의 키와 특정 타입의 값을 가져야 한다고 명시
type 타입이름= {
};
useState<타입>
axios로 데이터 불러올때
[error,setError] =useState <null | AxiosError>(null)
catch (err){if(err instanceof AxiosError){ setError(err)}else{console.error(err) } }
[data,setData] = useState<Todo[]>([]);
함수컴포넌트의 props만 interface로 정의
함수컴포넌트의 interface 레퍼런스가 훨씬 많음. 객체타읩의 정의만 인터페이스로하고 나머지 타입
interface ChildProps {
message: string;
}
const Child = ({ message }: ChildProps) => {}
event 타입지정
const 함수명 : 함수타입 = (e) =>{ setTitle(e.target.value) }
const 함수명 = (e:매개변수타입):리턴타입 =>{ setTitle(e.target.value) }
event 타입확인은 onChange 에 할당된 이벤트핸들러의 매개변수에 해당하는 event에 마우스오버 시 확인
완료취소 isDone 값없을때 type파일에서 인터섹션으로 추가해줌
type 타입명1 = 합치고자하는타입명 & {isDone:boolean;}; 하고나소 익스포트
서버에서 한번만 값을 가져오고 클라이언트에서 작업
api에서 데이터 받아온걸 맵으로 돌려서 isdone프로퍼티도 추가해줌
ui조작은 타입파일에 추가한걸로 조작
