안녕하세요 lika-7입니다
오늘은 TypeScript의 타입을 정리하였습니다
타입을 사용하는 이유
우리가 TypeScript를 사용하는 이유는 JavaScript의 문법에 정적 타입을 명시 하기 위해 사용합니다.
TypeScript의 타입은 변수, 상수, 함수 매개변수, 함수 반환값 등의 값의 종류나 형태를 정의하는 데 사용하는 중요한 개념입니다
타입의 분류
타입은 크게 2가지로 나뉩니다.
자바스크립트에서 볼 수 있었던 타입과 볼 수 없던 타입으로 나뉩니다
자바스크립트에서 볼 수 있었던 타입
✅
1. 문자
2. 숫자
3. 불린
4. Null/Undefined
5. 배열
6. 객체
7. 함수
자바스크립트에서 볼 수 없었던 타입
✅
1. Any
2. Unknown
3. Tuple
4. Void
5. Never
6. Union
7. Intersection
타입의 종류
문자
문자 타입의 정의 방법은 아래와 같습니다
let hello: string = 'Hello world!'
숫자
숫자 타입의 정의 방법은 아래와 같습니다
let num: number = 12
불린
불린 타입의 정의 방법은 아래와 같습니다
let isBoolean: boolean
null, undefined
null, undefined 타입의 정의 방법은 아래와 같습니다
let nul: null
let nud: undefined
배열
배열 타입의 정의 방법은 아래와 같습니다
const fruits: string[] = ['apple', 'banana','cherry']
const numbers: number[] = [1,2,3,4,5,6,7]
const unions: (string|number)[] = [1,2,3,4,5,6,7,'banana']
객체
객체 타입의 정의 방법은 아래와 같습니다
const obj: object = {}
const arr: object = []
const func: object = function(){}
const userA: {
name: string,
age: number,
isValid: boolean
} = {
name: 'heropy',
age: 85,
isValid: true
}
const userB: {
name: string,
age: number,
isValid: boolean
} = {
name: 'Neo',
age: 25,
isValid: false
}
interface User {
name: string,
age: number,
isValid: boolean
}
const userC: User = {
name: 'Ela',
age: 29,
isValid: false
}
✅
1. userA와 userB 타입은 name: string, age: number, isValid: boolean의 속성을 동일하게 이용합니다.
2. 그렇기에 User 라는 인터페이스를 선언하여 같은 타입의 내용을 이용하는 userC를 선언하였습니다.
함수
함수 타입의 정의 방법은 아래와 같습니다
함수를 나타내는 방법1
//함수 1
const add: (x: number, y: number) => number = function(x, y){
return x + y
}
const a: number = add(1,2)
const hellos: () => void = function (){
console.log('Hello world~')
}
const h: void =hellos()
✅
1. 타입 어노테이션을 사용하여 함수 표현을 하였습니다
2. 함수 표현 식을 사용하고, 함수의 타입을 변수 선언 시 직접 명시합니다
3. 함수의 타입과 구현을 함께 표현 하고 싶을 때 사용합니다
함수를 나타내는 방법2
//함수 2
const add= function(x:number, y:number):number{
return x + y
}
const a: number = add1(1,2)
const hellos= function ():void{
console.log('Hello world~')
}
const h: void =hellos()
✅
1. 함수 타입 선언과 타입 어노테이션을 별도로 사용하였습니다
2. 함수 선언을 사용하고, 함수의 타입을 함수 본문 외부에서 별도로 명시합니다
3. 함수의 구현과 타입 정보를 분리하여 작성하고 싶을 때 사용합니다
문자
문자 타입의 정의 방법은 아래와 같습니다
let hello: string = 'Hello world!'
any
any 타입의 정의 방법은 아래와 같습니다
let helloS: any = 'hello world'
helloS= 12
helloS= false
helloS= null
helloS= {}
helloS= []
helloS= function (){}
any 타입은 JavaScript에서 볼 수 없던 타입입니다.
어느 데이터를 넣어도 상관 없을 때 사용합니다
unknown
unknown 타입의 정의 방법은 아래와 같습니다
const anything: any = 123
const unknownThing: unknown =123
데이터에 어느 타입이 들어올지 모를 때 사용합니다.
any는 어느 타입이 들어오던지 상관하지 않겠다의 의미이고 unknown 은 어떤 데이터 타입이 들어올지 예상 할 수 없을 때 사용합니다
tuple
tuple 타입의 정의 방법은 아래와 같습니다
const tuple: [string, number, boolean] = ['a', 1, false]
const users: [number, string, boolean][] = [[1, 'neo',false],[2, 'ujin',false],[3, 'lewis',true]]
튜플은 배열과 비슷하지만, 각 요소에 대한 타입을 미리 지정할 수 있는 데이터 구조입니다.
튜플은 배열과 마찬가지로 여러 요소를 하나의 변수에 저장 할 수 있지만, 각 요소가 다른 타입을 가질수 있으며, 요소의 순서가 중요하게 다루어집니다.
void
void 타입의 정의 방법은 아래와 같습니다
function helloo(msg: string): void{
console.log(`Hello ${msg}`)
}
const hi: void = helloo('world')
보통 함수의 return 값이 없을 때 void 타입을 사용 합니다
never
never 타입의 정의 방법은 아래와 같습니다
const nev: [] = []
nev.push(2)
절대 발생하지 않을 값 의미 하며
보통 직접 사용할 일은 없습니다
union
union 타입의 정의 방법은 아래와 같습니다
let unions: string | number // 문자데이터도 항당될수 있고 숫자데이터도 항당될수 있다
unions = 'hello'
unions = 123
합집합을 의미합니다
unions 변수는 string 타입과 number 타입 둘다 사용 가능하다는 내용 입니다
intersection
intersection 타입의 정의 방법은 아래와 같습니다
interface Users{
name: string,
age: number
}
interface Validations{
isValid: boolean
}
const heropy: Users & Validations = {
name: 'neo',
age: 12,
isValid: true
}
교집합을 의미합니다
heropy 변수의 타입은 Users 인터페이스와 Validations 인터페이스를 모두 충족해야 한다는 내용입니다
