안녕하세요 동기 여러분! 오늘은 타입스크립트가 변수의 타입을 어떻게 알아내는지 알아보고 그것을 이용해서 배열에 새로운 요소를 넣는 방법에 대해 알아봅시다. Array Type Inference 타입스크립트가 변수의 타입을 알아내는 방법은 상당히 단순한데 그것은 바로 첫 번째 값의 타입으로 알아낸다는 것입니다. 아래의 코드를 봅시다. let yesOrNo= [true, false, true]; 위 배열의 타입은 무엇일까요? boolean[]일까요 아니면 [boolean, boolean, boolean]일까요? 이런 경우에는 항상 boolean[]이 타입으로 설정이 됩니다. 왜냐하면 튜플 형식의 타입은 따로 선언을 해주어야 하기 때문입니다. boolean[]타입으로 설정이 된다는 사실을 가지고 아래와 같은 ..
안녕하세요 동기 여러분! 오늘은 다른 여러 차원의 배열에 대해 알아봅시다! 살짝 헷갈리기 때문에 집중해야 합니다. Multi-dimensional Arrays 코드는 항상 간결하고 깔끔하면 좋겠지만 아닌 경우도 있습니다. 배열에서 배열 안에 배열이 있는 경우가 그런데요, 아래의 코드를 보도록 합시다. let protossUnits: string[] = [['광전사', '파수기'], ['불사조', '공허 포격기']]; 위 코드를 컴파일링 하면 에러가 나타납니다. 아니 이게 무슨 소리야 전부 string인데??? 이 문제는 string [] 뒤에 []를 하나 더 붙여주면 에러가 사라집니다. 아래의 결과를 봅시다. let protossUnits: string[][] = [['광전사', '파수기'], ['불사조..
안녕하세요 동기 여러분! 저번 시간에 알아본 자바스크립트에서 배열의 값 중에 다른 종류에 타입이 있을 경우 함수에 for문과 if문을 넣어서 에러를 띄우는 방법에 대해 알아봤습니다. 오늘은 타입스크립트에서 배열에 타입을 선언하여(타입 주석 달기, Array type annotation) 간단하게 에러를 띄워보겠습니다. 타입스크립트가 얼마나 편리하고 대단한 녀석 인지 다시 한번 느껴보면서 가자구요! Array Type Annotations 배열에 타입을 선언하는 방법은 함수나 매개 변수에 타입을 선언하는 방법과 비슷합니다. let terranUnits : string[] = ['해병', '공성전차', '유령', '의료선']; 짠 ~ 변수 옆에 : (colon)을 넣고, 타입인 string 그리고 [](대괄..
안녕하세요 동기 여러분! 오늘은 타입스크립트가 없는 자바스크립트의 환경에서 배열의 불편한 점을 알아보고 다음시간부터 또 타입스크립트가 얼마나 편리하고 대단한 친구인지 알아봅시다! Arrays Introduction 아래에 배열을 보도록 합시다. let LoLChampsList = ['렉사이', '리신', 503981, '엘리스', '니달리', '신 짜오', 557813, '샤코', '탈론', 224873, '카서스']; LolChampsList라는 배열의 값들을 보면 중간 중간에 타입 숫자로 이루어진 값들을 찾아낼 수 있습니다. 오류 찾아내기 자바스크립트에서는 숫자로 이루어진 값들을 찾아내어 에러를 띄우려면 어떻게 해야 할까요? 함수, for문, if를 이용해 에러 문구를 띄울 수 있습니다. 함수 만들기..
안녕하세요 동기 여러분! 오늘은 함수에서 리턴할 값이 없는 경우에 함수에 타입선언(Type annotation)을 무엇으로 해야하는지 알아보도록 합시다! Void Return Type 아래의 코드를 보도록 합시다. function printDongi(saySomething: string){ console.log(`동기 코딩님! ${saySomething}!`); } printDongi라는 함수는 현재 리턴값이 없는 함수입니다. 지금까지 우리는 타입 선언(Type annotation, 타입 주석 달기)이 얼마나 유용하고 깔끔하게 코드를 정리할 수 있는지 알아봤었습니다. 이러한 이유 때문에 리턴값이 없는 함수에도 타입 선언(Type annotation, 타입 주석 달기)을 하여 코드를 알차게 만들어 주어야 ..
안녕하세요 동기 여러분! 오늘은 리턴값의 타입을 명확하게 하는 방법에 대해 알아봅시다! Explicit Return Types 만약에 우리가 함수의 리턴값의 타입을 명확하게 하고 싶다면 소괄호(parenthesis) 뒤에 : (colon)과 타입(type)을 적어 리턴값의 타입을 정해줄 수 있습니다. 일반 함수에서 function maxRamen(counts: number): string { return `${counts}개의 라면을 먹을 수 있다.`; } 화살표 함수에서 const arrowMaxRamen = (counts: number): string => { return `${counts}개의 라면을 먹을 수 있다.`; } 타입스크립트에서 컴파일링 할 때 에러 구경하기 리턴값은 문자(string)인..
안녕하세요 동기 여러분! 오늘은 타입스크립트가 리턴되어 오는 값의 타입도 추론하여 에러를 띄운다는 사실에 대해 알아봅시다! Inferring Return Types function sayHi(name: string) { return `Hi! ${name}!`; } const dongiHi = sayHi('Dongi'); sayHi라는 함수에 매개 변수 name에 타입 문자(string)을 선언하였고 리턴값으로 Hi ${name}!을 설정해두었습니다. 새로운 변수를 선언하는데 변수의 이름을 dongiHi로 그의 값은 함수 sayHi와 독립 변수로 Dongi를 넣어두었습니다. 실행 시 어떻게 이 값들이 이동하는지 알아봅시다. 값들이 어떻게 이동하는지를 숙지하고 다음 코드를 봅시다. 리턴값 추론 functio..
안녕하세요 동기 여러분! 오늘은 매개 변수에 기본 값을 넣어 응용하는 방법에 대해 알아봅시다! Default Parameters 만약 매개 변수에 기본 값을 넣어 주었다면 타입스크립트는 그 기본값을 추론하여 어떤 타입인지 알아냅니다. function iWant(thing = 'love') { console.log(`I want ${thing}.`); } 함수 iWant에 매개 변수 thing의 기본값이 'love'로 설정되고 I want thing. 에서 thing에 사용자가 지정한 값이나 기본 값이 출력될 수 있게 만들었습니다. 위와 같은 상황에서 매개 변수 thing는 값으로 문자(string)이나 언디파인드(undefined) 받을 수 있습니다. -> 하지만 다른 타입의 값을 받을 경우 타입스크립트..
안녕하세요 동기 여러분! 오늘은 타입스크립트 매개변수에 타입을 설정하여 적절한 에러를 뜰 수 있게끔 하는 방법에 대해 알아봅시다! Parameter Type Annotations 저번 시간에 알아본 코드를 살펴보면 문자를 넣고 싶은 매개 변수에 숫자를 넣었더니 결괏값으로 언디파인드가 나왔었습니다. 하지만 오늘은 매개 변수의 타입을 string(문자)로 설정하여 실행해 제대로 된 에러를 띄워 보겠습니다. 이전에 배운 변수 타입 선언(Variable Type Annotation, 변수 타입 주석 달기)이랑 똑같은 방식입니다. 타입스크립트 코드에 아래와 같이 작성합니다. function howManyLetters(words: string) { console.log(words.length); } howManyL..
안녕하세요 동기 여러분! 오늘은 자바스크립트의 버그를 하나 알아보고 앞으로 배울 타입스크립트가 얼마나 대단한지 깨닫는 시간을 가져보도록 합시닼ㅋㅋ Unexpected result 아래의 코드를 보도록 합시다. function howManyLetters(words) { console.log(words.length); } howManyLetters(10); howManyLetters라는 함수를 선언하는데 매개 변수는 words입니다. console.log(words.length);로 매개 변수 words의 길이를 출력하도록 설정을 마쳤습니다. ※ .length는 string(문자) 프로퍼티라서 문자에게만 사용이 가능합니다!!! 함수를 불러오는데 독립 변수는 숫자 10으로 설정을 했습니다. ★ 잠깐 매개 변수..
- Total
- Today
- Yesterday
- 실수
- function
- 프로그래머스
- Python
- javascript
- 자바스크립트
- Typescript
- method
- Array
- html
- HTML 기본
- 반복문
- for문
- 동기코딩
- html table
- if문
- Object
- CSS
- 함수
- 파이썬
- Type
- 타입스크립트
- 객체
- CSS 포지션
- 타입 좁히기
- css position
- em
- Margin
- 메서드
- padding
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |