Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- 쌓임맥락
- 프로그래머스 데브코스 프론트엔드
- vue mixin
- Spacer
- intersection opserver
- 폼 입력 바인딩
- 리액트
- netlify redirect
- 프로그래머스 프론트엔드 데브코스
- Vue
- SCSS forward
- 고양이 사진 검색기
- flex
- vuex map
- postcss
- git 같은계정 다른 컴퓨터
- 리스트 렌더링
- SCSS import
- 이벤트 수식어
- SCSS extend
- vue 이벤트 수신
- 프로그래머스 K_Digital Training
- 프로그래머스 데브코스
- vue 지역 컴포넌트
- KDT 프로그래머스
- KDT 프로그래머스 데브코스 프론트엔드
- SCSS use
- react next
- nextjs사용법
- 다른컴퓨터에서 git사용
Archives
- Today
- Total
혼자 적어보는 노트
[TypeScript] 기본 타입 / 타입 별칭 / 유니온 타입 / 인터섹션타입 본문
기본 타입(타입주석)
const num: number = 3;
const str: string = "하이";
const boal: boolean = false;
let age: number | undefined;
let person: string | null;
function find():number | undefined{
return undefined;
}
let name:'Jay' = 'Jay'; // 값으로 지정할 수도 있다.
// 가능하면 쓰지 말기 3종
let empty: null
let notSure: unknown = 0;
let anything: any = 0;
// object = {} = []
// 이런 식으로 쓰지 말고 object는 정의해서 쓰자
let obj: object;
함수
// 함수에서 아무 값도 리턴하지 않을 때
function print():void {
console.log();
return;
}
// never 절대 리턴할 수 없다. 에러나 while문
function throwError(massage: string):never {
throw new Error("error");
}
// Optional
function printName(firstName: string, lastName?:string){
console.log(firstName, lastName);
}
printName('Jay', 'Jon'); // Jay Jon
printName('Jay'); // Jay undefined
printName('Jay', undefined); // Jay undefined
// Default parameter
function printMessage(message: string = 'default'){
console.log(message);
}
// Rest parameter
function addNumbers(...numbers: number[]){
const sum = numbers.reduce((acc, v)=> acc+v);
console.log(sum);
}
addNumbers(1,2,3) // 6
Array
const fruits: string[] = ['banana', 'apple'];
const numbers: Array<number> = [1, 2, 3];
Tuple
배열의 길이가 고정되고 요소의 타입이 지정되어 있는 형식
let arr: [string, number] = ['Jay', 10];
readonly
function readFruits(fruits: readonly string[]){
fruits[1] = "orange"; // 안됨
}
readonly에서는 Array<number>와 같은 제네릭 형태는 허용되지 않는다.
Type Aliases
특정 타입이나 인터페이스를 정의할 수 있다.
// Type Aliases
// 타입을 정의할 수 있다.
type Text = string;
const name: Text = "Jay";
type Num = number;
const age: Num = 18;
// Object Type 정의
type Student = {
name: string;
age: number;
};
const jay: Student = {
name: 'jay',
age: 20
};
// String Literal Types
// 값을 타입으로 정의하기
type Name = 'name';
const name:Name = 'name';
정의한 타입에 대해 에디터 상에서 확인을 할 수 있다.
Union Type
OR 연산자와 같이 A이거나 B라는 의미
type Success = {
response: 'true';
data: {
massage: string;
}
};
type Fail = {
response: 'false';
error: string;
};
type Result = Success | Fail
function getData(result: Result){
if(result.response === 'true'){
console.log(result.data.massage);
} else {
console.log(result.error);
}
}
getData({
response: 'false',
error: '데이터가 너무 많음'
})
저번 영화검색기를 만들 때 response값으로 데이터가 제대로 들어왔는지
확인하는 로직이 있었어서 생각하며 작성해봤는데 이렇게 작성해볼 수도 있을 듯 하다.
Intersection Type
& 와 같은 개념으로 여러 타입을 만족하는 하나의 타입을 의미
type User = {
name: string;
age: number;
};
type Info = {
address: string;
}
function userInfo(user: User & Info){
console.log(user);
}
userInfo({
name: 'jay',
age: 20,
address: "Uijeongbu"
})
'Typescript' 카테고리의 다른 글
[Typescript] Type Guard로 타입 좁히기 (0) | 2022.07.13 |
---|---|
[Typescript] React에서 Typescript 사용하기 (0) | 2022.05.24 |
[TypeScript] 제네릭(Generics) (0) | 2022.05.23 |
[TypeScript] 인터페이스(interface) / Type과의 차이점 (0) | 2022.05.22 |
[TypeScript] enum / 타입추론 (0) | 2022.05.21 |
Comments