TS/TS(애플코딩)6 함수와 methods에 type alias 지정하는 법과 타입스크립트로 HTML 변경과 조작할 때 주의점 함수와 methods에 type alias 지정하는 법 function type도 저장가능 함수 타입도 type alias로 저장해서 쓸 수 있음 예를 들어 숫자 두개를 파라미터로 입력하고 숫자를 return 하는 함수를 별명을 지어서 사용한다면 type NumOut = (x : number, y : number ) => number ; 이것을 함수 만들때 사용하려면 function 함수이름: NumOut(){} 식은 불가능함 function 키워드에서는 ()랑 오른쪽 타입지정만 가능하기 때문에 type NumOut = (x : number, y : number ) => number let ABC :NumOut = function(x,y){ return x + y } 함수를 만들 때 let 함수명 = f.. 2023. 8. 6. 변수에 담은 타입과 Literal Types으로 만드는 const 변수 유사품 타입도 변수에 담아쓰세요 type 키워드 써서 & readonly 타입 정의가 너무 길면 Type Aliases(별칭) let 동물 :string | number | undefined; 길고 복잡하게 타입을 나열하는 경우가 있음 길고 복잡해 보이는 것이 싫거나 나중에 또 사용하고 싶다면 변수에 담아 쓰면 됨 변수 만드는 것처럼 type이라는 키워드를 사용 type 키워드를 사용하는 것을 type alias라고 함 alias를 번역하면 별칭인데 이 강의에서는 쉽게 변수라고 부름 type Animal = string | number | undefined; let 동물 :Animal; type 타입변수명 = 타입종류 타입을 변수처럼 만들어서 쓰는 alias 문법 관습적으로 대문자로 시작함 일반 자바스크립트 변.. 2023. 8. 6. 함수에 타입 지정하기와 타입 확정하기 함수에 타입 지정하는 법 함수 짚어보기 function 내함수(x){ return x * 2 } 내함수(2); // 4 소괄호 안에 들어가는 x같은 자료들을 파라미터라고 부르고 return 오른쪽에 있는 자료들을 리턴값으로 부름 파라미터를 작명해주면 함수를 사용할 때 ( ) 소괄호 안에 아무 자료나 집어넣을 수 있게됨 리턴값은 함수가 사용되고나서 그 자리에 남는 값 함수 타입 지정 함수는 총 두 군데 타입지정이 가능함 함수로 들어오는 자료 (파라미터) 함수에서 나가는 자료 (return) function 내함수(x :number) :number { return x * 2 } 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적으면 됨 파라미터에 타입을 지정하면 필수 파라미터가 됨 함수가 실행된 후 남는 .. 2023. 8. 6. 타입스크립트 타입 정리 타입스크립트 타입 정리(primitive types) 변수 만들때 타입 정하기 타입스크립트는 변수만들 때 변수의 타입을 지정가능함 let 이름: string = 'kim' 변수명:타입으로 정하면 됨 이름이라는 변수는 string 타입이 되며 다른 타입을 할당하려고 하면 에러가 남 여러가지 타입 자주 쓰는 primitive types string number boolean let 이름 :string = 'kim'; let 나이 :number = 20; let 결혼했니 :boolean = false; 추가로 null, undefined도 있지만 사용하지 않음 array 또는 object 자료 안에도 타입 지정 가능 여러 자료를 한 곳에 저장하고 싶을 때 array 또는 object 자료형을 사용 그 안에 들.. 2023. 8. 6. Typescript 컴파일시 세부설정 (tsconfig.json) tsconfig 파일 생성하기 프로젝트 폴더에 tsconfig.json 이라는 파일을 생성 여기엔 타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정이 가능함 리액트 쓰면 만들어져 있을 수 있음 # tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", } } target은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분 es5로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환) 해줌(신버전을 원하면 es2016, esnext) module은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳 commonjs는 require 문법을 es2015, .. 2023. 8. 6. TypeScript 필수문법 10분 정리와 설치 셋팅 타입스크립트(TS)를 쓰는 이유 TS는 JS의 타입부분을 업그레이드해서 사용하고싶을 때 설치해서 쓰는 일종의 자바스크립트의 대용품 완전 다른 언어는 아니라 자바스크립트 문법 그대로 이용가능한데 타입문법을 업그레이드해서 쓸 수 있음 자바스크립트는 타입에 관대하기 때문에 타입을 이상하게 연산해도 아무런 제지가 없음 알아서 타입을 바꾸어주기 때문에(자바스크립트는 Dynamic typing 을 지원하는 언어) 하지만 타입스크립트는 이러한 에러를 전부 잡아주어 타입스크립트를 사용하는 것 또한 타입스크립트를 쓰면 에러메세지도 더 정확해짐 JS같은 애매한 에러메세지가 많은데 TS는 엄격한 타입룰 덕분에 에러메세지를 더 친절하게 알려줌 일반 HTML CSS JS 웹개발시 TS 사용하기 이미 있는 React 프로젝트에 .. 2023. 8. 3. 이전 1 다음
