<div id="readability-page-1" class="page"><div><blockquote>
<p>Velopert 선생님의 강의를 보고 만든것 입니다!</p>
</blockquote>
<h3 id="타입스크립트-초기설정">타입스크립트 초기설정</h3>
<p>먼저 cmd를 켜서 아래와 같이 쳐줍시다. 쳐주고나면 리액트 타입스크립트 환경이 완성됩니다.</p>
<pre><code>$ npx create-react-app [파일명] --template typescript</code></pre>
<h4 id="packagejson을-만들려면">package.json을 만들려면?</h4>
<pre><code>$ yarn init -y</code></pre>
<h4 id="tsconfigjson을-만들려면">tsconfig.json을 만들려면?</h4>
<pre><code>$ yarn global add typescript
$ tsc --init</code></pre>
<h4 id="타입스크립트-패키지를-다운하려면">타입스크립트 패키지를 다운하려면?</h4>
<pre><code>$ yarn add typescript</code></pre>
<h4 id="yarn을-깔려면">yarn을 깔려면?</h4>
<pre><code>$ yarn</code></pre>
<h4 id="리액트를-실행하려면">리액트를 실행하려면?</h4>
<pre><code>$ yarn start</code></pre>
<h4 id="함수에서의-타입-지정-하기">함수에서의 타입 지정 하기</h4>
<div><p><img src="https://media.vlpt.us/images/jce1407/post/2d6fab27-1bb6-4ffc-9cbd-cd5bdb18779f/image.png"><br>
매개변수로 타입지정을 하면 함수를 사용할때 타입이 뜨는것</p><p>

아무것도 반환 하지 않을때 - <code>void</code><br>
<img src="https://media.vlpt.us/images/jce1407/post/0fbfed37-dac9-4754-a73b-8d53b8185bb5/image.png"></p></div>
<h4 id="interface-찍어먹기">Interface 찍어먹기</h4>
<blockquote>
<p>클래스에서도 쓰고 객체타입지정할때도 쓰는것<br>
파라미터에서 public / private 지정해주면 일일히 선언할 필요가 없음</p>
</blockquote>
<pre><code>//Shape 라는 interface 선언
interface Shape {
    getArea(): number;
}

class Circle implements Shape {
    constructor(public radius: number) {
    // implements를 써서 해당 클래스가 Shape interface의 조건을 충족하겠다는 것을 명시
        this.radius = radius;
    }

    getArea() {
        return this.radius * this.radius * Math.PI;
    }
}

class Rectangle implements Shape {
    constructor( private width: number, private height: number) {
        this.width = width;
        this.height = height;
    }
    getArea() {
        return this.width * this.height;
    }
}

const shapes: Shape[] = [new Circle(5), new Rectangle(10, 5)];

shapes.forEach(shape =&gt; {
    console.log(shape.getArea());
});

export {};</code></pre>
<h4 id="객체에서-interface-써보기">객체에서 interface 써보기</h4>
<pre><code>interface Person {
    name: string;
    age?: number;
}

interface Developer {
    name: string;
    age?: number;
    skills: string[];
}

const person: Person = {
    name: '김사랑',
    age: 20
};

const expert: Developer = {
    name: '김개발',
    skills: ['javascript', 'react']
};

const people: Person[] = [person, expert];

export {};
</code></pre>
<h4 id="type-alias-써보기">Type Alias 써보기</h4>
<blockquote>
<p>타입에 별명 정해주는것</p>
</blockquote>
<p>type 과 interface는 서로 비슷하다. 구버전에서는 차이가 많았으나 업데이트 되면서 점차 줄어감.라이브러리를 만들거나 다른 라이브러리를 위한 타입 지원 파일을 쓸때는 interface를 사용하는것이 권장 되고 있습니다.</p>
<pre><code>type Person = {
  name: string;
  age?: number; // 물음표는 값을 받아도 되고 안받아도 된다는뜻
};

// &amp;는 Intersection 으로서 두개 이상의 타입들을 합쳐줍니다.

type Developer = Person &amp; {
  skills: string[];
};

const person: Person = {
  name: "김사람",
};

const expert: Developer = {
    name: '김개발',
    skills: ['javascript', 'react']
};

type People = Person[]; // Person[]를 써서 앞으로 People 이라는 타입으로 사용가-능
const people: People = [person, expert];

type Color = 'red' | 'orange' | 'yellow';
const color: Color = 'red';
const colors: Color[] = ['red', 'orange'];
</code></pre>
<h4 id="제네릭-써보기">제네릭 써보기</h4>
<blockquote>
<p>타입을 이름으로써서 자동으로 타입추론 해주는것</p>
</blockquote>
<pre><code>function merge<span><span><span>&lt;</span>A,</span> <span>B</span><span>&gt;</span></span>(a: A, b: B): A &amp; B { 
    return {
        ...a,
        ...b
    };
}

const merged2 = merge({foo: 1}, {bar: 1});</code></pre>
<h4 id="알게된것">알게된것</h4>
<blockquote>
<ul>
<li>지정한 타입 이외의것을 넣으면 오류나버림</li>
<li>" | " 를 사용해서 타입을 이것아니면 저것으로 설정 가-능</li>
<li>리액트에서 써먹을때는 TSX 아니면 TS</li>
<li>" ? "를 써서 받아도 되고 안받아도 되는것 가-능</li>
<li>type alias 랑 interface는 비슷하다 나한텐 interface가 더 잘맞는듯</li>
<li>any는 아무타입이나 들어올수있음</li>
</ul>
</blockquote></div></div>

Clzzi.log

Clzzi

Velopert 선생님의 강의를 보고 만든것 입니다! 
타입스크립트 초기설정
먼저 cmd를 켜서 아래와 같이 쳐줍시다. 쳐주고나면 리액트 타입스크립트 환경이 완성됩니다.
$ npx create-react-app [파일명] --template typescript
package.json을 만들려면?
$ yarn init -y
tsconfig.json을 만들려면?
$ yarn global add typescript
$ tsc --init
타입스크립트 패키지를 다운하려면?
$ yarn add typescript
yarn을 깔려면?
$ yarn
리액트를 실행하려면?
$ yarn start
함수에서의 타입 지정 하기
매개변수로 타입지정을 하면 함수를 사용할때 타입이 뜨는것
아무것도 반환 하지 않을때 - void
Interface 찍어먹기
클래스에서도 쓰고 객체타입지정할때도 쓰는것
파라미터에서 public / private 지정해주면 일일히 선언할 필요가 없음
//Shape 라는 interface 선언
interface Shape {
    getArea(): number;
}
class Circle implements Shape {
    constructor(public radius: number) {
    // implements를 써서 해당 클래스가 Shape interface의 조건을 충족하겠다는 것을 명시
        this.radius = radius;
    }
    getArea() {
        return this.radius * this.radius * Math.PI;
    }
}
class Rectangle implements Shape {
    constructor( private width: number, private height: number) {
        this.width = width;
        this.height = height;
    }
    getArea() {
        return this.width * this.height;
    }
}
const shapes: Shape[] = [new Circle(5), new Rectangle(10, 5)];
shapes.forEach(shape => {
    console.log(shape.getArea());
});
export {};
객체에서 interface 써보기
interface Person {
    name: string;
    age?: number;
}
interface Developer {
    name: string;
    age?: number;
    skills: string[];
}
const person: Person = {
    name: '김사랑',
    age: 20
};
const expert: Developer = {
    name: '김개발',
    skills: ['javascript', 'react']
};
const people: Person[] = [person, expert];
export {};
Type Alias 써보기
타입에 별명 정해주는것
type 과 interface는 서로 비슷하다. 구버전에서는 차이가 많았으나 업데이트 되면서 점차 줄어감.라이브러리를 만들거나 다른 라이브러리를 위한 타입 지원 파일을 쓸때는 interface를 사용하는것이 권장 되고 있습니다.
type Person = {
  name: string;
  age?: number; // 물음표는 값을 받아도 되고 안받아도 된다는뜻
};
// &는 Intersection 으로서 두개 이상의 타입들을 합쳐줍니다.
type Developer = Person & {
  skills: string[];
};
const person: Person = {
  name: "김사람",
};
const expert: Developer = {
    name: '김개발',
    skills: ['javascript', 'react']
};
type People = Person[]; // Person[]를 써서 앞으로 People 이라는 타입으로 사용가-능
const people: People = [person, expert];
type Color = 'red' | 'orange' | 'yellow';
const color: Color = 'red';
const colors: Color[] = ['red', 'orange'];
제네릭 써보기
타입을 이름으로써서 자동으로 타입추론 해주는것 
function merge<A, B>(a: A, b: B): A & B { 
    return {
        ...a,
        ...b
    };
}
const merged2 = merge({foo: 1}, {bar: 1});
알게된것
지정한 타입 이외의것을 넣으면 오류나버림
" | " 를 사용해서 타입을 이것아니면 저것으로 설정 가-능
리액트에서 써먹을때는 TSX 아니면 TS
" ? "를 써서 받아도 되고 안받아도 되는것 가-능
type alias 랑 interface는 비슷하다 나한텐 interface가 더 잘맞는듯
any는 아무타입이나 들어올수있음

타입스크립트 찍먹해보기

댓글