변수
TYPE
let course: string | number = 'react';
let userName: string | string[];
주의
: 함수의 파라미터 타입으로 유니온 타입들로 정의했을 때 두 유니온 타입에 공통적으로 들어있는 속성만 접근 가능
let course = 'react';
course = 123; // 오류. string type.
type Person = {
name: string;
age: number;
};
let person: Person;
let person: Person[];
let person: {
name: string;
age: number;
}; // 이런 식으로 정의
// 그러나 이와 같이 작성하는 방법이 더 좋다
const person = {
name: 'Mike',
age: 30
};
person = {
name: 'Max',
age: 32
};
let people: {
name: string;
age: number;
}[]; // 객체 배열
type A = B & C; // B + C = A
7-1 partial
: 특정 타입의 부분 집합을 만족하는 타입을 정의
type MayHaveEmail = partial<Address>;
7-2 pick
: 특정 타입에서 몇 개의 속성을 선택해 타입 정의
const human: Pick<Hero, 'name'>
7-3 omit
: 지정된 속성만 제거한 타입을 정의
const chingtao: Omit<AddressBook, 'address'|'company'>
선언
배열 선언
let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3];
변수형 선언
let name: string;
function add(a: number, b: number) {
return a + b;
}
function add(a: number, b: number): number
// function의 타입은 반환 값의 타입에서 추론됨
function add(a: number, b: number): number {
return a + b;
}
인자로 타입을 받는 함수
미리 알 수 없는 타입이 들어올 땐 제네릭을 쓴다. 미리 알 수 없는 타입이 들어온다고 any
를 쓰게 되면 타입 추론이 발생하지 않으니 주의해야 한다.
<T>
삽입<T>
를 적고, 함수의 인자와 반환값에 T
를 적으면 타입스크립트가 타입을 추론함function inserAtBeginning<T>(array: T[], value: T) {
// array와 value의 값은 같은 타입이라는 걸 알려줌
const newArray = [value, ...array];
return newArray;
}
let arr: Array<number> = [1,2,3];
: 상호 간에 정의한 약속 혹은 규칙을 의미
함수, 객체의 구조. 객체를 설명하는 데 사용.
구체적인 값 할당 X
interface Person {
name: string;
age: number; // 세미콜론으로 분리
}
let user1: Person;
user1 = {
name: 'Max', // 쉼표로 분리
age: 30,
}
let person = { name: 'capt', age: 28 };
function logAge(obj: { age: number }) {
console.log(obj.age); //28
}
logAge(person); // 28
- 인자를 받을 때 객체의 속성까지 정의 가능
interfafce personAge {
age: number;
function logAge(obj: personAge) {
console.log(obj.age);
}
let person = { name: 'capt', age: 28 };
logAge(person);
- 인터페이스를 적용한 모습
: logAge()의 인자는 personAge라는 타입을 가져야 한다고 명시
: 인터페이스를 인자로 받아 사용할 때 속성, 인자의 갯수를 일치시키지 않아도 됨.
정의된 속성, 타입의 조건만 만족시키면 됨.
interface 인터페이스_이름 {
속성? : 타입;
}
// 속성 끝에 ?를 붙임
장점
읽기 전용 속성
값 변경 불가능
interfave CraftBeer {
readonly brand: string;
}
읽기 전용 배열
ReadonlyArray<T>
let arr: ReadonlyArray<number> = [1,2,3];
1.
let myBeer = { brandon: 'What' }';
brewBeer(myBeer as CraftBeer);
2.
interface CraftBeer {
brand?: string;
[propName: string]: any;
interface A extends B // B = interface
interface AddFn {
(a: number, b: number): number;
}
: 특정 값들의 집합을 의미하는 자료형
enum Direction {
A = 1,
B,
C}
=> A -> 1, B -> 2, C -> 3
(초기값부터 1씩 증가. 초기값을 주지 않으면 0부터~)
주의! 선언 시 이넘 값에 다른 타입의 값을 주면 첫 번째 값에 초기화 해야 함
리버스 매핑
키로 값을 얻을 수 있고 값으로 키를 얻을 수 있음
enum Avengers { Capt, IronMan, Thor }
// 0, 1, 2 / Avengers.Capt, Avengers.IronMan, Avengers.Thor
let hero: Avergers = Avengers[0];
React - typescript
const Todos: React.FC<{items: string[]}> = (props) => {
~
}
// <>사이에는 필요한 형태의 props 정의
<element>
<HTMLinputElement>
를 적어줌d.ts
tsc
! / ?
!
사용JS와의 차이
&
접근 제한자(Acess modifier)
static
추상 class / abstract
const car = new Car("red") // (X)
class Bmw extends Car // (O)
keyof
interface User{
id: number;
name: string;
}
type UserKey = keyof User;
const uk: userkey = "age";
partial<T>
?
모든 변수에 써준 것과 같은 효과Required<T>
tsc 파일이름.ts
<script>
에 입력된 .js 파일을 생성클래스의 이름은 첫문자가 대문자
super
getter
클래스 VS 인터페이스
class Person implements interface, AnotherInterface{
// code..
}
타입 단언
타입스크립트를 쓸 때 타입 단언(as
, !
)은 지양해야 한다. 잘못 사용하게 되면 자바스크립트로 실행되어 런타임 에러까지 발생하기 때문에 타입스크립트를 쓴 의미가 없어진다.