<div id="readability-page-1" class="page"><div><blockquote>
Typescript 복습을 시작했다. 
Typescript Documentation을 참고하였다.
</blockquote>
시작하기는 <a href="https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html">Typescript For Javascript Programmers</a> 항목을 참고하였다.
Typescript는 기본적으로 Javascript에 타입 시스템을 제공한다. 자바스크립트에서도 <code>string</code>이나 <code>number</code>와 같은 타입이 존재하기는 하지만, 자바스크립트에서는 실제로 타입이 올바로 쓰였는지(오류를 발생시키지 않는지)에 대한 확인을 하지는 않는다.
예를 들어,
<pre><code>let str = 'string';
str = 1;
console.log(1)</code></pre>
자바스크립트에서는 이런식으로 string으로 처음 선언된 <code>str</code>이라는 변수에 number를 할당할 수 있으며,
<pre><code>const getSquared = (n) =&gt; n**2;
console.log(getSquared(2)) // 4
console.log(getSquared('a')) // NaN</code></pre>
Integer을 parameter로 받는 함수에 <code>string</code>을 넣어도 코드를 실행하기 전까지는 어떤 문제가 발생하는 지 알 수 없다.
<blockquote>
→ 타입스크립트에서는 타입시스템을 통해 자바스크립트에서 발생할 수 있는 여러 오류들을 미리 잡아준다.
</blockquote>
<h2 id="타입-선언하기">타입 선언하기</h2>
<blockquote>
타입을 규정할 때에는 1. Type By Inference 와 2. Defining Type의 두가지 방법이 있다.
</blockquote>
1. Type By Inference 
대부분의 변수들은 자동으로 타입이 결정된다.
<pre><code>let helloWorld = "Hello World";</code></pre>
위의 경우에서 변수 <code>helloWorld</code>를 호버하면 <code>string</code> type이라는 메시지를 얻을 수 있다.
2. Defining Types 
물론 직접 타입을 선언할 수도 있다. 예를 들어 <code>interface</code>를 통해 <code>object</code>를 규정할 때 이렇게 직접 타입을 선언하는 방법을 이용할 수 있다.
<pre><code>interface User {
 name: string;
 id: number;
}

const user: User = {
 name: 'Gayoung',
 id: 0,
}</code></pre>
<h3 id="타입의-종류">타입의 종류</h3>
기본적으로 자바스크립트에는 아래의 타입들이 존재한다.
<ul>
<li>boolean</li>
<li>bigint(number값이 안정적으로 나타낼 수 있는 최대치인 2^53-1보다 큰 정수를 표현)</li>
<li>null</li>
<li>number</li>
<li>string</li>
<li>symbol</li>
<li>undefined</li>
</ul>
타입스크립트에서는 추가적으로
<ul>
<li>any</li>
<li>unknown</li>
<li>never</li>
<li>void</li>
</ul>
를 지원한다.
추가적으로 type을 생성하기 위해서는 <code>interface</code>와 <code>type</code>, 두가지의 방법이 존재하는데 <code>interface</code>를 쓰는 것이 좋다.
<hr>
좀 더 복잡한 타입으로 <code>union</code>과 <code>generic</code>이 있다.
<ul>
<li><code>union</code> : 여러가지 타입들 중 하나의 타입이 될 수 있음을 의미한다.</li>
</ul>
<pre><code>type WindowStates = "open" | "closed";</code></pre>
: <code>WindowStates</code> 타입의 변수들은 "open" 또는 "closed"의 값을 갖는다.
<ul>
<li><code>generics</code> : 타입을 변경할 수 있도록 한다.</li>
</ul>
가장 대표적인 예시가 <code>Array</code>. Array는 <code>Array&lt;string&gt;</code>, <code>Array&lt;number&gt;</code> 등 <code>Array&lt;Type&gt;</code>의 Type자리에 다양한 타입을 넣음으로써 서로 다른 type을 처리하는 Array를 만들 수 있다.
같은 방식으로 generic을 이용하여 interface를 선언할 수도 있다.
<pre><code>interface Backpack&lt;Type&gt; {
 add: (obj: Type) =&gt; void;
 get: () =&gt; Type;
}</code></pre>
위 <code>Backpack</code> interface에서 <code>Backpack&lt;Type&gt;</code>를 선언할 때의 Type에 따라 함수 <code>add</code> 파라미터의 타입과 함수 <code>get</code>의 리턴타입이 결정된다.
<hr>
<h2 id="structural-type-system">Structural Type System</h2>
두개의 Object가 같은 모양_shape_을 가지고 있다면, 그 두개의 object는 같은 type으로 간주된다. → Duck Typing 또는 structural typing
<pre><code>interface Point {
 x: number;
 y: number;
}

function logPoint(p: Point) {
 console.log(`${p.x}, ${p.y}`);
}

const point = {x: 12, y: 7}
logPoint(point);</code></pre>
위에서 하단부에 선언된 <code>point</code>는 <code>Point</code> type으로 선언되지 않았지만 같은 shape를 가지기에 같은 타입으로 간주됐다.
재미있는 것은,
<pre><code>const point = {x: 12, y: 7, z:1}
logPoint(point);</code></pre>
위처럼 <code>point</code>에 <code>z</code>라는 변수를 추가해도 정상적으로 작동한다. <code>Point</code> object를 구성하기 위한 required properties(이 경우 <code>x: number, y: number</code>)가 존재한다면 <code>Point</code> object이다.
하지만 <code>point</code>가 <code>Point</code>로 간주되었다 하여도 반대는 성립하지 않을 수 있다.
<pre><code>interface Point {
 x: number;
 y: number;
 a: number;
}

function logPoint(p: Point) {
 console.log(`${p.x}, ${p.y}`);
}

const point = {x: 12, y: 7}
logPoint(point); // error</code></pre>
아래와 같은 에러가 발생한다. 
<img src="https://images.velog.io/images/jujube0/post/be912b57-8b72-4b03-a97a-1454496f5cd4/7253DBB4-F917-4675-88E0-506C0BE92AAC.png"></div></div>

jujube0

Typescript 복습을 시작했다.
Typescript Documentation을 참고하였다.
시작하기는 Typescript For Javascript Programmers 항목을 참고하였다.
Typescript는 기본적으로 Javascript에 타입 시스템을 제공한다. 자바스크립트에서도 string이나 number와 같은 타입이 존재하기는 하지만, 자바스크립트에서는 실제로 타입이 올바로 쓰였는지(오류를 발생시키지 않는지)에 대한 확인을 하지는 않는다.
예를 들어,
let str = 'string';
str = 1;
console.log(1)
자바스크립트에서는 이런식으로 string으로 처음 선언된 str이라는 변수에 number를 할당할 수 있으며,
const getSquared = (n) => n**2;
console.log(getSquared(2)) // 4
console.log(getSquared('a')) // NaN
Integer을 parameter로 받는 함수에 string을 넣어도 코드를 실행하기 전까지는 어떤 문제가 발생하는 지 알 수 없다. 
→ 타입스크립트에서는 타입시스템을 통해 자바스크립트에서 발생할 수 있는 여러 오류들을 미리 잡아준다. 
타입 선언하기
타입을 규정할 때에는 1. Type By Inference 와 2. Defining Type의 두가지 방법이 있다.
1. Type By Inference
대부분의 변수들은 자동으로 타입이 결정된다.
let helloWorld = "Hello World";
위의 경우에서 변수 helloWorld를 호버하면 string type이라는 메시지를 얻을 수 있다. 
2. Defining Types
물론 직접 타입을 선언할 수도 있다. 예를 들어 interface를 통해 object를 규정할 때 이렇게 직접 타입을 선언하는 방법을 이용할 수 있다.
interface User {
 name: string;
 id: number;
}
const user: User = {
 name: 'Gayoung',
 id: 0,
}
타입의 종류
기본적으로 자바스크립트에는 아래의 타입들이 존재한다. 
boolean
bigint(number값이 안정적으로 나타낼 수 있는 최대치인 2^53-1보다 큰 정수를 표현)
null
number
string
symbol
undefined
타입스크립트에서는 추가적으로
any
unknown
never
void
를 지원한다.
추가적으로 type을 생성하기 위해서는 interface와 type, 두가지의 방법이 존재하는데 interface를 쓰는 것이 좋다. 
좀 더 복잡한 타입으로 union과 generic이 있다.
union : 여러가지 타입들 중 하나의 타입이 될 수 있음을 의미한다. 
type WindowStates = "open" | "closed";
WindowStates 타입의 변수들은 "open" 또는 "closed"의 값을 갖는다.
generics : 타입을 변경할 수 있도록 한다. 
가장 대표적인 예시가 Array. Array는 Array<string>, Array<number> 등 Array<Type>의 Type자리에 다양한 타입을 넣음으로써 서로 다른 type을 처리하는 Array를 만들 수 있다. 
같은 방식으로 generic을 이용하여 interface를 선언할 수도 있다.
interface Backpack<Type> {
 add: (obj: Type) => void;
 get: () => Type;
}
위 Backpack interface에서 Backpack<Type>를 선언할 때의 Type에 따라 함수 add 파라미터의 타입과 함수 get의 리턴타입이 결정된다.
Structural Type System
두개의 Object가 같은 모양_shape_을 가지고 있다면, 그 두개의 object는 같은 type으로 간주된다. → Duck Typing 또는 structural typing
interface Point {
 x: number;
 y: number;
}
function logPoint(p: Point) {
 console.log(`${p.x}, ${p.y}`);
}
const point = {x: 12, y: 7}
logPoint(point);
위에서 하단부에 선언된 point는 Point type으로 선언되지 않았지만 같은 shape를 가지기에 같은 타입으로 간주됐다. 
재미있는 것은,
const point = {x: 12, y: 7, z:1}
logPoint(point);
위처럼 point에 z라는 변수를 추가해도 정상적으로 작동한다. Point object를 구성하기 위한 required properties(이 경우 x: number, y: number)가 존재한다면 Point object이다. 
하지만 point가 Point로 간주되었다 하여도 반대는 성립하지 않을 수 있다.
interface Point {
 x: number;
 y: number;
 a: number;
}
function logPoint(p: Point) {
 console.log(`${p.x}, ${p.y}`);
}
const point = {x: 12, y: 7}
logPoint(point); // error
아래와 같은 에러가 발생한다.

TypeScript : 시작하기

댓글