[1장] 타입스크립트 알아보기 (아이템 1 ~ 아이템 5)

[dahye1013]

[1장 퀴즈]

타입스크립트 알아보기 (아이템 1~ 아이템 5)

아래 마크다운을 복사 붙여넣기해서 코멘트로 퀴즈를 달아주세요 :)
객관식, 주관식에 상관없이 편하게 만들어주세요!

부가 설명을 달고 싶다면, 해설을 정답과 함께 옵션으로 작성하시면 됩니다. ☺️

예시

### 아이템 N 

퀴즈 내용 객관식의 정답을 골라보세요!
(퀴즈 내용)
1. 1번 
2. 2번
3. 3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답은 1번!
</div>
</details>

[areumsheep]

아이템 3 - 코드 생성과 타입이 관계없음을 이해하기

ES5 또는 더 이전 버전을 대상으로 할 때 타입스크립트로 async/await를 사용할 수 있을까요?

퀴즈 정답

할 수 있습니다!

https://ui.toast.com/weekly-pick/ko_20181220

아이템 3장(p.13)에서 타입스크립트 컴파일러는 두 가지 역할을 수행할 수 있다고 했습니다.

1. 최신 TS/JS가 브라우저에서 동작할 수 있도록 구 버전의 자바스크립트로 트랜스파일한다.
2. 코드의 타입 오류를 체크한다.

ES5 또는 더 이전 버전을 대상으로 할 때, 타입스크립트 컴파일러는 async와 await가 동작하도록 정교한 변환을 수행합니다.

즉, 타입스크립트는 런타임에 관계없이 async/await를 사용할 수 있습니다.

[yeomgahui]

아이템 1

자바스크립트와 타입스크립트의 관계에 대해서 설명해주세요!

퀴즈 정답

타입스크립트는 자바스크립트의 상위집합(superset)이라고 정의 합니다. 사실 이 말은 옛말에 가깝고 최근 TS의 공식 홈페이지에서는 타입스크립트를 "타입 구문을 가지는 자바스크립트"로 정의합니다.

[yeomgahui]

아이템 3

다음중 타입스크립트의 컴파일러에 대한 설명중 옳지 않은 것을 고르세요.

1. 타입스크립트를 브라우저에서 동작 할 수 있도록 구버전의 JS로 트랜스파일 한다.
2. 코드의 타입 오류를 체크합니다.
3. 타입 오류가 있는 코드도 컴파일이 가능하다.
4. 런타임에는 타입 체크가 불가능하다.
5. 타입 연산은 런타임에 영향을 주지 않는다.
6. 런타임 타입은 선언된 타입과 다를 수 있다.
7. 타입스크립트 타입으로 함수를 오버로드 할 수 있다.
8. 과도한 타입 선언은 런타임 성능에 영향을 준다.

퀴즈 정답

정답은 8번! 타입과 타입 연산자는 자바스크립트 변환 시점에 제거가 되기 때문에, 런타임의 성능에 아무런 영향도 주지 않습니다!

[yeomgahui]

아이템 4

객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는 이 방식은 무엇일까요?

퀴즈 정답

- 덕타이핑(= 구조적 타이핑)

[dahye1013]

아이템 2

타입스크립트는 타입 정보를 가질 때 가장 효과적입니다.
되도록 noImplictAny 설정을 통해 타입을 명시하여 가독성과 생산성을 향상시키는 것이 좋습니다.
noImplictAny를 해제하는 경우는 주로 어떤 경우일까요?

퀴즈 정답

주로 자바스크립트에서 타입스크립트로 마이그레이션하는 경우 사용됩니다.

[dahye1013]

아이템 3

아래 예시는 타입 오류가 발생하는 코드입니다. 타입 오류가 발생하는 코드도 컴파일이 가능할까요?

let hello = 'hello';
hello = 3;

퀴즈 정답

타입 오류가 있는 코드도 컴파일이 가능합니다.

• 컴파일은 타입 체크와 독립적으로 동작합니다.
• 타입스크립트의 오류는 경고와 비슷합니다. 문제가 있음을 알려 주지만, 빌드를 멈추지는 않습니다.
• 만약 오류가 있는 경우, 컴파일하지 않으려면 noEmitOnError를 설정 혹은 빌드 도구에 적용시키면 됩니다.

위의 예시는 아래와 같은 결과로 컴파일 됩니다.

"use strict";
let hello = 'hello';
hello = 3;

[dahye1013]

아이템 4장

sayHi 함수가 Animal 타입을 인자를 받아도 타입 에러를 발생시키지 이유는 타입스크립트의 어떠한 특징 때문인가요?

interface Person {
    name: string;
    age: number;
}
interface Animal {
    name: string;
    age: number;
}

function sayHi (person: Person) {
    console.log(`안녕하세요~ ${person.name}!`)
} 

const me: Person = {
    name: 'dahye',
    age: 99,
}
const daji: Animal = {
    name: 'daji',
    age: 6,
}

sayHi(me);
sayHi(daji);

퀴즈 정답

• 자바스크립트는 본질적으로 덕 타이핑(duck typing)기반입니다.
  (매개변수 값이 제대로 주어지면, 어떻게 만들어졌는지 신경쓰지 않습니다.)
• 타입스크립트 덕 타이핑 기반으로 구조적 타이핑(structure typing)으로 모델링 되어있습니다.
  (요구 사항을 만족하면 타입이 무엇인지 신경쓰지 않습니다.)

[areumsheep]

아이템 1 - 타입스크립트와 자바스크립트의 관계 이해하기

타입스크립트는 자바스크립트의 ㅁㅁㅁ 동작을 ㅁㅁㅁ하는 타입 시스템을 가지고 있기 때문에 런타임 오류를 발생시키는 코드를 찾아내려고 합니다.

위 빈칸에 들어갈 가장 알맞은 보기를 고르세요.

1. 컴파일, 추상화
2. 런타임, 추상화
3. 컴파일, 모델링
4. 런타임, 모델링

퀴즈 정답

정답은 4번!

타입스크립트는 자바스크립트의 런타임 동작을 모델링하는 타입 시스템을 가지고 있기 때문에 런타임 오류를 발생시키는 코드를 찾아내려고 합니다. 그러나 모든 오류를 찾아내리라 기대하면 안 됩니다. 타입 체커를 통과하면서도 런타임 오류를 발생시키는 코드는 충분히 존재할 수 있습니다.

[tooooo1]

아이템 5

any 타입을 지양해야 하는 이유는?

퀴즈 정답

1. 타입 안정성이 없어서 2. 함수 시그니처를 무시해서 3. 언어 서비스가 적용되지 않아서 4. 코드 리팩터링 시 버그를 감춰서 5. 타입 설계를 감춰서 6. 타입시스템의 신뢰도를 떨어트려서

[tooooo1]

아이템 3

function asNumber(val:number | string): number {
  return val as number;
}

위 코드는 잘못된 방법이에요. 정상적인 코드는?

퀴즈 정답

return typeof(val) === 'string' ? Number(val) : val;

return 값에 대해 타입 정제 과정이 필요해요.

[tooooo1]

아이템 1

모든 타입스크립트가 자바스크립트인가요?

퀴즈 정답

정답은 아니요! 모든 자바스크립트는 타입스크립트지만, 모든 타입스크립트가 자바스크립트는 아니에요. 타입스크립트가 문법적으로 자바스크립트의 상위집합이에요.

[sooooo-an]

아이템 1

타입 시스템은 정적 타입의 정확성을 보장해준다

1. O
2. X

퀴즈 정답

정답은 2번

[sooooo-an]

아이템 3

런타임에 타입정보를 유지하는 방법이 아닌 것은 무엇일까요?
(퀴즈 내용)

1. 속성 유무 체크
2. 태그 기법
3. 인터페이스 및 타입 선언
4. 클래스 생성

// 1) 속성 유무 체크 
if ('date' in study) {
  return study.date;
} else {
  return new Date();
}

// 2) 태그기법
interface Study {
  kind: 'typescript'
}

interface Class {
  kind: 'javascript'
}

if (study.kind === 'typescript') {
  return 'ing';
} else {
  return 'end';
}

// 3) 인터페이스 및 타입 선언
interface Person {
  name: string;
  age: number;
}

class Soo implements Person {

}

// 4) 클래스 생성
class Study {}
class Coding {}
type Todo = Study | Coding;

퀴즈 정답

정답은 3번! 인터페이스 및 타입은 런타임에서는 코드가 지워져 타입 정보를 유지하지 못합니다.

[sooooo-an]

아이템 5

any 타입을 지양해야 하는 이유가 아닌 것은?

1. 타입 안정성
2. 함수 시그니처 무시
3. 성능 저하

퀴즈 정답

정답은 3번! any타입을 사용했을 때, 성능 저하가 일어나진 않습니다. 런타임에러를 방지하지 못해줄뿐,,

[MINGDY98]

아이템 1

자바스크립트는 타입스크립트이다.(O,X)

퀴즈 정답

정답은 O 타입스크립트는 자바스크립트의 상위 집합이기에 이 명제는 옳다. 그래서 기존 자바스크립트 코드를 타입스크립트로 마이그레이션하는데 이점이 있다. (일부분에만 타입스크립트 적용 가능

[MINGDY98]

아이템 2

다음 코드를 node로 실행하면 어떤 결과가 나오는가?

function greet(who: string){
  console.log("Hello",who);
}

퀴즈 정답

정답은 오류 출력 노드로 타입 구문을 사용한 코드를 구동하면 타입스크립트 영역으로 들어가게되어서 오류를 출력한다. 모든 타입스크립트는 자바스크립트가 아닌 것과 이어진다.

[MINGDY98]

아이템 3

타입 오류가 있는 코드도 컴파일이 가능하다.(O/X)

퀴즈 정답

정답은 O 타입스크립트 컴파일은 타입 체크와 독립적으로 동작하기 때문에, 타입 오류가 있는 코드도 컴파일이 가능하다. 만약 오류가 있을 때 컴파일하지 않으려면, tsconfig.json에 noEmitOnError를 설정하거나 빌드 도구에 동일하게 적용하면 된다.

[areumsheep]

아이템 2

다음 코드 중 strictNullChecks 설정이 허용된 아래 코드에서 어떤 결과가 나와야 하는지 보기에서 고르시오.

const x: number = null;

1. 정상, null은 유효한 값입니다.
2. 'null' 형식은 'number' 형식에 할당할 수 없습니다.

퀴즈 정답

정답은 2번!

strictNullChecks는 null과 undefined가 모든 타입에서 허용되는지 확인하는 설정이다.

[seojihwan]

아이템 1

타입스크립트는 런타임에 오류를 체크한다.

퀴즈 정답

X 타입스크립트는 정적 타입 시스템 언어이다.

[seojihwan]

아이템 2

tsconfig.json 옵션 strict: true 는 다음과 같은 옵션들을 기본으로 설정한다. (O/X)

alwaysStrict
strictNullChecks
strictBindCallApply
strictFunctionTypes
strictPropertyInitialization
noImplicitAny
noImplicitThis
useUnknownInCatchVariables

퀴즈 정답

O strict: true 옵션은 typescript 2.3버전에 처음 추가되었으며 포함하는 옵션들은 계속 추가되고있다. (typescript 버전 업데이트를 주기적으로 확인하자) 2.3버전 당시 초기 옵션 [strictNullChecks](https://www.typescriptlang.org/tsconfig#strictNullChecks) [noImplicitAny](https://www.typescriptlang.org/tsconfig#noImplicitAny) [noImplicitThis](https://www.typescriptlang.org/tsconfig#noImplicitThis) [alwaysStrict](https://www.typescriptlang.org/tsconfig#alwaysStrict)

[seojihwan]

아이템 4

incremental build를 사용하면 타입스크립트 빌드시간이 단축된다.

퀴즈 정답

O 디스크에 저장되는 .tsbuildinfo파일을 캐싱 할때 빌드 시간이 단축된다.

[jlee0505]

아이템 1

아래 코드를 각각 자바스크립트와 타입스크립트에서 실행했을 때 나타나는 결과로 알맞게 짝지어지지 않은 것은?

const a = null + 7; 
const b = [] + 12; 
alert('Hello', 'TypeScript'); 

1. 7 // ~~~~ Operator '+' cannot be applied to types ...
2. 12 // ~~~~~~~ Operator '+' cannot be applied to types ...
3. SyntaxError // ~~~~~~~~~~~~ Expected 0-1 arguments, but got 2

퀴즈 정답

정답은 3번! > Javascript 는 타입 체킹에 있어서 자유분방하다. 인자를 하나만 와야할 메서드에 2개가 와도 알아서 하나까지만 처리하고 alerts "Hello" 를 반환한다.

[jlee0505]

아이템 2

아래 코드는 타입 체킹을 통과할 수 있나요?

function add(a, b) {
return a + b;
}
add(10, null);

퀴즈 정답

정답은 "모른다" 입니다. 어떤 타입 옵션을 지정했는지 알기 전엔 알 수 없어요!

[jlee0505]

아이템 5

책에 나온 any 를 지양해야할 이유가 아닌 것은?

1. 타입안정성이 떨어진다.
2. 앱이 실시간으로 꺼질 수 있다.
3. 타스의 최대 장점 중 하나인 Language Services(자동완성기능)을 받을 수 없다.
4. 코드 리팩토링 시 버그를 놓칠 수 있다.
5. 타입 확신에 대한 자신감을 높여준다.

퀴즈 정답

정답은 5번! 컴파일 타임에 실수를 잡아줌으로써 자신감을 "높여준다"

[parksil0]

아이템 1

// 1. 변수 city의 타입은 명시하지 않았는데도 string 타입임을 알 수 있다. 그 이유는 무엇인가?
let city = 'new york city';
// 2. 아래 코드의 밑줄은 타입 체커가 알려주는 에러 하이라이팅이다. 왜 에러를 발생시키는가?
console.log(city.toUppercase());
              //~~~~~~~~~~~~~ Error!

퀴즈 정답

1. 타입스크립트의 타입 추론 때문이다.
2. 타입스크립트의 string 타입에는 toUppercase라는 메서드가 없기 때문이다. 모든 문자를 대문자로 변환하기 위해서는 toUpperCase라는 메서드를 사용해야한다. (다른 의미로 타입체커는 오탈자도 확인해준다.)

[parksil0]

아이템 3

타입스크립트에서 자바스크립트로 컴파일되는 과정에서 제거되지 않는 것은?

1. 타입, 인터페이스
2. 타입 구문
3. 타입 가드

퀴즈 정답

정답은 3번! 타입 가드는 런타임에도 제거되지 않는다.

[parksil0]

아이템 4

자바스크립트는 덕 타이핑 기반이고, 타입스크립트가 이를 모델링하기 위해 OOO 타이핑을 사용한다.

퀴즈 정답

정답 : 구조적