Front-End/TypeScript5 타입스크립트 기본 내용과 헷갈리는 부분 정리 타입 스크립트 기본 let 변수명 :타입지정 = let 변수명:string[] let 변수명:{key:string} let 변수명: string | number type 키워드를 사용하면 타입을 변수처럼 사용 가능하다, type 변수타입 = string let 변수명: 변수타입 = 'hello-kk' 내가 만든 타입도 가능한데, 이 경우에는 타입으로 넣어준 값만 대입 가능하다. type helloType = 'hello-kk' let 변수명: helloType = 'hello-kk' 함수 타입 function 함수명(x :string) :void{ console.log(x) } 함수에서 타입이 확실하지 않은 경우, narrowing 또는 assertion 문법을 사용해야 오류가 없다. if (typeof.. 2023. 3. 28. event Type const handleButton = (e:React.MouseEvent) => { // e.currentTarget.value } const handleInput = (e: React.ChangeEvent) => { // e.currentTarget.value }; const handleSelectOption = (e: React.ChangeEvent) => { // e.currentTarget.value }; 2023. 3. 15. 제네릭<T> 와 제네릭 설명 듣고 정말 대박이다를 외쳤음 책으로 읽을때 제네릭 부분을 제대로 이해하질 못했다. (졸려서? ㅎㅎ) '도대체 왜 쓰는거지? 인자에 타입을 지정해주는건 알겠고, 반환값에도 타입을 지정해주는 자리가 어디인진 알겠는데, 도대체 제네릭은 뭐지? 기호도 처음보고, 위치도.. 왜 ..' 납득이 잘 안갔다.. 다른분들 코드를 볼때도 가 있으면 너무 헷갈렸는데 function hello(name: T): T { return name } function helloV2(name: Type): Type { return name } 도대체 T 는 뭘까 왜 저 위치에 있는거지? (위의 예시에서 T와 Type는 하는 역할이 완전히 동일하다.) 너무 헷갈렸다. (이해하고 나니까, 저 예제는 인자와 반환 타입에서 사.. 2023. 3. 15. TypeScript 제네릭 (arg: T):T 여기서 는 Type의 약자로 제네릭을 선언할 때 T를 관용적으로 사용한다. 여기에서 다이아몬드 연산자 안에 있는 T는 타입변수라고 한다. 이제 이 identify 함수는 T라는 타입 변수를 갖게 된다. 그리고 argument와 return의 type은 T라는 타입 변수로 동일하다. async-await은 Promise를 자동으로 만들어주고 Promise를 해체해서 결과만을 반환해줌. 이때 반환형이 Promise였다면 T타입 형태로 반환 const c = new someClass(...) someFunction(...); 컴파일 될 때 자리에 이 들어가게 됨. 이 경우, someFunction(..)이라면 T 타입이 인자, 본문, 반환형에 모두 써줄 수 있음 https://heropy... 2023. 2. 23. (책) 알아서 잘 딱 깔끔하고 센스있게 정리하는 TypeScript 핵심 개념 2023/01/19(목) 1. TypeScript란? - 알고있던 내용 1. JavaScript 변수에 타입을 설정해주는 것 2. (사용 경험) interface로 객체타입을 설정해주거나, 매개변수(props등)에 타입을 미리 넣어준다. - 궁금한 내용 1. 타입스크립트와 자바스크립트의 차이, 혹은 관계? 2. 타입 체크 3. tsc를 해서 컴파일 하는 이유 4. 자동으로 타입스크립트 파일을 자바스크립트 파일로 전환하는 방법 - 이해한 내용 1. 타입스크립트는 JavaScript에 정적 타입이 추가된 언어이다. 2. 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사)를 진행합니다. 3. tsc란 타입스크립트 파일을 자바스크립트 파일로 컴파일해 줍니다. => 이유: 브라우저는 타입스.. 2023. 1. 19. 이전 1 다음
