Youngble_개발스토리

“strict” 이 옵션을 true 로 하면 아래 사진처럼 strict 아래 다른 옵션들을 하나하나 true로 한설정과 같은 결과이다. 아래를 일일이 설정하는경우는 분명히 false를 설정할때가 있기때문이다. 그러면 이 옵션은 무엇을 설정 하는것인가? “noImplicitAny” noImplicitAny는 더나은 코드를 작성하는데 도움을 주는 흥미로운 옵션이다. 다음과 같이 data를 인자로 받고 콘솔로그로 출력하는 함수를 만들었고 ‘The data’ 라는 string 문자열을 인수로 넘겨주었다. 하지만 다음과 같이 any type으로 에러가 뜨는걸 알수있는데 이게 noImplicitAny 옵션이다. 매개변수로 넘겨주는 값이 어떤 타입인지 명확히 알리지 않았기 때문에 타입스크립트가 어떤 정보인지 알수없어..

“allowJs” allowJs는 checkJs와 함께 타입스크립트가 자바스크립트 파일을 컴파일할수 있도록 해준다. 파일이 ts로 끝나지 않더래도 타입스크립트는 컴파일할수있다. “checkJs” checkJs는 타입스크립트가 컴파일을 수행하지 않더래도 구문을 검사하고 잠재적인 에러를 보고해준다. ts파일을 비롯된 js파일에 대해 컴파일을 두번 중복해서 수행할 필요가 없도록 한다. 그런데 만약 프로젝트가 타입스크립트를 전혀 사용하지않거나 바닐라자바스크립트 파일과 타입스크립트파일 병행해서 함께 검사하고 싶은 경우 사용하면 된다. “declaration” .d.ts 파일은 프로젝트를 라이브러리로 배포할때 중요한 고급 개념이다. 프로젝트의 모든 타입을 설명하는 manifest 파일이 필요한데 이것이 d.ts 파..

매번 해당 ts 파일을 tsc ~~.ts 한다면 큰 프로젝트일 경우 여러 업데이트된 ts 파일을 일일이 하기 번거롭다 따라서 편의성을 위한 컴파일 기능을 설명하고자한다. npm start 을 통해 자동으로 변경된 사항을 로컬3000에 불러온다지만 여전히 tsc 로 커맨드를 입력해야한다. 이럴때 사용하는것이 관찰(watch)모드이다. 관찰모드(Watch) 타입스크립트가 파일을 관찰하고 파일에 변경된 사항이 있을때마다 다시 컴파일하게 된다. 처음 커맨드 입력 방법은 tsc ~~.ts --watch 또는 tsc ~~.ts -w 입력하여 해당 ts파일을 관찰모드로 진입한다. 이때 끄는 방법은 기존과 똑같이 control+C 를 눌르면된다. 하지만 이러한 관찰모드역시 파일을 직접적으로 지정해야 한다는것이다. 따라..

타입스크립트는 컴파일 과정에서 에러를 잡아내기 때문에, 기존에 런타임에서 발생하던 에러를 개발단계에서 핸들링 할 수 있게 된다. (자바스크립트 사용시에는 런타임 환경에서 실행전까지는 에러 확인할 수 없는데..) 또한 생각해보면 새로운 개발자가 합류하거나 기존의 팀에서 코드수정을 하기위해서 코드를 볼때 타입이 결정되어있어서 코드리뷰를 할때 좀더 직관적으로 어떤 변수,함수 인지 정확히 알수있다는것이다. 만약 다른사람이 잘못쓰더래도 바로 컴파일에러로 보여주기때문에 코드 수정이나 fix 하기가 자바스크립트보다 훨씬 좋다는것이다. 사용자정의 타입 사용자가 임의로 타입을 변수에 담아 만들어놀수있다. type Combinable = number | string; type num = number; type str = ..

void -> return 이 없기때문에 void, printResult 함수호출로 콘솔로그 찍히는건 별개로 console.log(printResult(5,12)) 식으로 쓰면 undefined 출력 return이 없기때문 -> return; 을 넣어줘도 에러없이 잘됨 number string -> Undefined 도 타입중 하나로 위 처럼 someValue 변수를 명시적 타입을 정하면 영원히 undefined 타입이다. 만약 위의 반환 return이 없어 void 로 정해진것이 출력해보면 undefined 라고해서 : undefined 라고하면 undefined도 타입이기때문에 return 이 있다고 타입스크립트는 해석하게된다.

Tuple 타입 = 자바스크립트에는 없는 타입스크립트에 있는 새로운 기능으로 고정된 길이를 갖는 배열 타입을 의미 Enum 타입 = 자바스크립트에는 없는 타입스크립트에 있는 새로운 기능으로 열거형으로 이름이 있는 상수들의 집합을 정의할 수 있다, 열거형 Union 타입 = string | number | boolean 등 한가지가 아닌 여러개의 다른 타입을 받을때 파이프기호(|) 사용 => 타입스크립트를 좀더 flexible 하게 만들어주기위해서 사용 리터럴(literal) 타입 = 리터럴 타입은 변수 혹은 매개변수 등이 string이나 number 처럼 어떠한 포괄적인 타입을 가지는 것이 아니라 변수나 매개변수에 정확한 값을 설정하는 것을 의미, TypeScript에는 문자열과 숫자, boolean 세..

타입스크립트 강의를 듣는데 재미있구만 resultPhrase 라는 string 값을 만들고 console.log 에서 n1과 n2를 같이 더한걸 출력하기로 했다. 그런데 자바스크립트의 동적타입 특성이 적용되는데 결과가 이런식으로 원하지않던 52.8 값이 나와버렸다.. 이것을 막기위해서 미리 숫자형끼리 n1+n2 더하여 result에 넣었다. 타입스크립트는 타입을 추론할 수 있다(따라서 “:number”를 생략할 수 있음) 위 코드처럼 let number1 라고 했을때 : 을 써서 number 라고 지정해줄수있다 하지만 이렇게 되면 add 함수에 쓰이는 파라미터와 중복되기도 하고 타입스크립트가 :number를 안쓰더라도 5가 초기화되어있기때문에 인식하여 number형태로 와야한다는걸 추론하기 때문에 굳이 ..

npm install --save-dev lite-server -> lite-server는 package.json에서 "script"부분에 "start"를 추가하여 "lite-server"를 넣고 이 lite-server는 index.html을 제공, npm start 하면 이런식으로 작동하게되고 localhost:3000으로 작동된다.