쵸코쿠키의 연습장

// Function parameter type annotations: const doSomething = (person: string, age: number, isFunny: boolean) => {}; // Return type annotation: function greet(person: string = "stranger"): string { return `Hi there, ${person}!`; } function square(num: number): number { return num * num; } square(3); greet("Tonya Harding"); doSomething("ChickenFace", 78, true); 함수 파라미터 어노테이션 이전 강의에서 제대로 언급하지 않은 것이 ..

함수 파라미터 애노테이션 타입 애너테이션을 변수에 추가하는 법을 알아봤습니다. 암시적 타입 변환(implicit typing) 때문에 이건 흔히 쓰이진 않습니다. 이제 타입을 이용해서 함수 파라미터와 반환값에 할당하는 법을 살펴보겠습니다. function square(num: number): number { return num * num; } square(3); TypeScript에 함수를 작성할 때는 이전의 함수 구문과 같습니다. square라는 함수를 작성한다고 해봅니다. 숫자를 입력하니 num이라고 쓰고 num * num로 반환합니다. 3을 입력하면 3 곱하기 3이니까 반환값은 9가 됩니다. num에 마우스를 올리면 이 파라미터 num은 any 타입이 기본값으로 설정된다고 나옵니다. 이 말은 제가 ..

지연 초기화와 암묵적 Any 타입 애너테이션이 필요하거나 유용한 경우에 대해 다뤄보겠습니다. 초기화와 별도로 변수를 선언하는 경우입니다. 이미 이런 경우를 보셨거나 직접 마주하셨을 수도 있습니다. const movies = ["Arrival", "The Thing", "Aliens", "Amadeus"]; let foundMovie: string; for (let movie of movies) { if (movie === "Amadeus") { foundMovie = "Amadeus"; } } 예시 영화의 목록을 검색하는 변수가 하나 있다고 해봅시다. movies라는 변수를 만들고 여기에 문자열을 배열로 추가해 줍니다. 이전에 사용한 Arrival부터 The Thing과 Aliens 그리고 진짜 명작인 ..

Any 타입 JavaScript에는 없고 TypeScript에만 있는 any 타입에 대해 알아보겠습니다. any 타입은 말 그대로 어떤 타입도 받을 수 있습니다. TypeScript의 기본적으로 타입 확인 없이 쓸 수 있습니다. 어찌 보면 TypeScript을 사용하는 목적과 멀기 때문에 일반적으로는 잘 사용하지 않겠지만 하지만 살다 보면 any 타입을 사용해야 할 때가 있습니다. 우선 any 타입은 모두 소문자여야 합니다. // the any type let thing: any = "hello"; //This is not a great idea! thing = 1; thing = false; thing(); thing.toUpperCase(); const movies = ["Arrival", "The ..

타입 이제 TypeScript에 다양한 타입이 존재합니다. 가장 먼저 볼 거는 TypeScript 코드 어디에서 타입을 사용하는지입니다. 기본적으로 함수에서부터 여러 상황들이 존재하는데 예시가 있습니다. 어떤 함수는 불리언 값이어야 하는 경우가 있습니다. 단일 불리언 값이나 불리언 배열 혹은 문자열이 될 수도 있습니다. 또 어떤 함수는 숫자 두 개를 인수로 받고 하나의 숫자만 반환하는 경우도 있습니다. 또, 패턴이나 객체의 형태도 특정할 수 있습니다. 어떤 객체가 colors이라는 특정 프로퍼티를 갖고 프로퍼티가 문자열의 배열이어야 한다고 지정할 수 있습니다. 아니면 매우 간단하게 설정할 수도 있는데 TypeScript의 타입을 변수로 지정할 수도 있습니다. 가변 타입 예를 들어 영화 제목이라고 부르는 ..

타입 추론 지금까지 사용한 타입 애너테이션이 대부분의 경우는 필요 없다는 사실에 대해 알려드리려고 합니다. 애너테이션은 타입과 구문의 기초를 배울 때는 좋은 도구이지만 실제로 변수를 작성할 때는 타입 추론(Inference)을 사용하면 됩니다. TypeScript는 꽤 똑똑하기 때문에 변수 선언을 보면 어떤 값에 할당되는지 파악합니다. 지금 보시는 경우에는 27이 x에 할당되었는데 TypeScript은 이를 보고 27이 숫자이기 때문에 x가 숫자 타입이라는 걸 추론합니다. 그러고 나서 x 값에 숫자가 아닌 문자열이나 불리언 타입을 넣으면 오류라고 표시합니다. // Type Inference let tvShow = "Olive Kitteridge"; tvShow = "The Other Two"; tvSho..

TypeScript을 사용하는 핵심은 JavaScript로 컴파일링하는 것입니다. 끝에는 JavaScript로 컴파일링해야 합니다. 터미널에서 파일 위치 디렉터리만 지정하시면 됩니다. 터미널에서 하는 게 익숙하지 않으시면 간단하게 VS Code의 파일명에 마우스 오른쪽 버튼을 누르고 Open in Integrated Terminal을 클릭하시면 됩니다. 그리고 tsc와 .ts로 끝나는 파일명을 입력합니다. // String Variable With Explicit Annotation let movieTitle: string = "Amadeus"; movieTitle = "Arrival"; movieTitle = 9; //This results in an error! movieTitle.toUpperCas..

첫 번째는 숫자(number) 타입으로 JavaScript와 동일합니다. 정수형과 부동수형으로 나누진 않고 동일하게 숫자 타입으로 지정합니다. 변수 뒤에 콜론(:)과 number로 TypeScript에 타입을 지정하면 됩니다. 두 번째로는 불리언이 있습니다 주의할 점은 모두 소문자로 표시해야 됩니다. boolean으로 b를 소문자로 써야 합니다. 아시겠지만 불리언은 참 혹은 거짓 값을 의미하고 그래서 불리언 타입에는 변수의 옵션이 두 개밖에 없습니다. // String Variable With Explicit Annotation let movieTitle: string = "Amadeus"; movieTitle = "Arrival"; movieTitle = 9; //This results in an er..

그럼 TypeScript를 실행하고 기본 워크플로우를 익혀보겠습니다. 첫 번째로 TypeScript을 작성할 파일을 생성해야 합니다. 온라인 편집기 TS Playground를 사용하시면 안 하셔도 됩니다. 로컬 환경에서 실행하시면 파일 생성이 꼭 필요합니다. 파일 확장자는 .ts여야 합니다 그럼 basics.ts라는 파일을 만들어 보겠습니다. 이름은 아무렇게나 하셔도 됩니다. .ts라는 확장자는 VS Code에 이 파일이 TypeScript라는 걸 알려줍니다. .tsx 확장자도 있는데, 이 부분은 React를 다룰 때 알려드리겠습니다. 앞서 말했듯 React 부분은 강의에서 핵심 내용이 아닙니다. 간단히 말하면 .tsx는 TypeScript에 jsx 파일을 더하는 건데 TypeScript으로 jsx 구문..

TypeScript Playground을 함께 살펴보겠습니다. 브라우저 기반 환경입니다. 아무것도 설치하지 않고 바로 TypeScript를 작성할 수 있습니다. 이걸 보는 이유는 두 가지입니다. 하나는 설치가 힘든 분들도 있습니다. 뭔가를 설치하면 안되는 컴퓨터를 쓰실 수도 있습니다. 그렇다면 TypeScript Playground를 사용하면 됩니다. 공식 문서로 가서 Playground를 누르면 나옵니다. 컴퓨터에 TypeScript를 설치할 수 없는 분을 위한 게 첫 번째 이유였습니다. 두 번째는 이것저것 시도하기가 좋습니다. 공식 문서를 보고 시도해보고 싶은데 프로젝트를 만들기 귀찮을 때 TS Playground에서 다 해볼 수 있습니다. 그림 왼쪽이 TypeScript이고 오른쪽이 컴파일링된 Ja..

TypeScript 설치 typescriptlang.org에서 TypeScript 공식 문서를 봅니다. 검색창에 TypeScript를 검색해서 들어가셔도 됩니다. Download를 누르면 방법이 여럿 나옵니다. 가장 쉬운 방법은 npm을 사용하는 겁니다. npm을 쓰려면 당연히 NodeJS와 npm을 설치합니다. npm을 써본 경험이 있으면 도움이 됩니다. npm 명령어로 TypeScript를 설치합니다. 그전에 npm -v 명령어로 npm이 설치되었는지 확인합니다. npm -v 확인해서 아직 설치 전이라면 설치하면 됩니다. nodejs.org에서 설치할 수 있습니다. 여러분 컴퓨터에 맞는 걸 클릭하고 권장 버전을 사용합니다. 인스톨러를 실행하여 설치합니다. 다른 건 필요 없고 지시에 따라서 확인 버튼을..

정적 검사 TypeScript는 정적 검사라는 걸 수행하는데 많은 언어에 있는 기능입니다. 실행하지 않고도 코드 내 오류를 잡는 기능입니다. 코드를 실행하는 건 JavaScript가 할 일입니다. TypeScript는 정적으로 검사합니다. 실행하기 전에 코드를 보고 문제가 있는지 알려줍니다. 그래서 정적 검사라고 합니다. TypeScript는 정적 타입 검사기로서, 실행하기 전에 프로그램 데이터의 종류나 타입을 검사합니다. 문자열, 숫자, 배열이나 특정한 프로퍼티를 가진 객체 등을 검사합니다. 그런 걸 모두 실행 전에 합니다. 왜 타입인가 첫 번째로 오류를 찾아줍니다. 가장 중요한 건데 실행 전에 오류를 찾을 수 있습니다. 개발 단계에서 작성과 동시에 분석을 함으로써 문제를 찾아 주고 실행할 필요가 없습..