
1. 데이터 타입
- 타입을 알려주지 않으면 Type Script가 추론해줌
let a = "hello" // a는 String으로 추론함
a = "hi" // 가능
- 명시적으로 알려주기
: 타입명
let b : boolean = false // Type Checker와 소통하는 방법
- 종류
- number : 정수
let a : number = 1
let b : string = "il"
let c : boolean = true
let a : number[] = [1,2,3]
let b : string[] = ["a","b"]
let c : boolean[] = [true]
- null일 가능성이 있는 변수 명 뒤에 ? 붙이기 // Dart 언어와 동일하게 없으면 null 처리 해줌
변수 명? // 없을 수도 있음
const player: {
name: string,
age?: number
} = {
name: "min"
}
}
if(player.age && player.age <10) { // 먼저 존재하는지 확인 조건도 필요함
- Player라는 타입을 정의하고 다른 객체가 Player 타입이라고 선언
- 객체가 아닌 어느 타입에서도 가능함
Type Player = {
name: string,
age?: number
}
const min : Player = {
name: "min"
}
const soo : Player = {
name: "soo",
age : 30
}
2. return
- 객체 리터럴 축약 문법 : 키와 값이 같은 이름을 가질 때 축약 가능
function playerMaker(name:string) {
return {
name: name // 같은 이름을 가진 다면 name만 적어도 됨
}
}
- 함수 안의 값을 반환하며, Player 타입을 따르기에 없는 age를 사용해도 오류 안남
- min 객체에 age 추가됨
Type Player = {
name: string,
age?: number
}
function playerMaker(name:string) : Player{
return {
name: name // 같은 이름을 가진 다면 name만 적어도 됨
}
}
const min = playerMaker("min")
min.age = 32 // min 객체에 age 추가됨
3. readonly
- JS에는 없지만 TS에는 가능함
- 읽기 전용 속성
readonly 변수 명 // 읽기만 가능하고 수정은 불가능 함
Type Player = {
name: string,
age?: number
}
function playerMaker(name:string) : Player{
return {
readonly name: name // 수정을 시도하면 에러남
}
}
const min = playerMaker("min")
min.age = 32 // min 객체에 age 추가됨
- push, filter, map 등 불가능
const numbers: readonly number[] = [1, 2, 3, 4]
numbers.push(5) // 읽기 전용이기에 오류남
4. Tuple
- JS에는 없음
- array를 생성할 수 있고 최소한의 길이가 있고 특정 위치에 특정 타입이어야만 함
// 최소 3개의 아이템, 각 칸의 타입이 정해져 있음
const player: [string, number, boolean] = ["min", 30, true]
player[0] = 1 // string 타입이 아니라 오류남
// 읽기 전용 속성을 추가할 경우
const player: readonly [string, number, boolean] = ["min", 30, true]
player[0] = "hi" // 수정이 불가능하기에오류남
5. Null/Undefined
- JS에도 있음
- 선택적 타입(?)은 undefined이 될 수 있음
let a : undefined = undefined
let b : null = null
6. any
- TS에서 빠져나올 때 쓰는 타입 = 모든 것을 비활성화시킴
- 어떤 타입이나 될 수 있음
let a = (any) []
const a : any[] = [1, 2, 3, 4]
const b : any = true
a+b // 타입이 다른데도 허용됨
7. void
- 아무것도 return하지 않음
- 함수 안에 return이 없으면 :void를 붙어지 않아도 TS가 void로 처리함
function hell() {
console.log('x')
}
const a = hello(); // 아무것도 return하지 않음
a.toUpperCase() // 아무것도 없기에 에러남
8. never
- 절대 return하지 않을 때 사용
function hello(): never {
return "x" // 에러남
}
function hello(): never {
throw new Error("xxx") // return이 없어야 정상 작동함
}
- 일부만 never이 적용될 경우
function hello(name: string | number) {
if (typeof name === "string") {
name; // name은 string 타입으로 추론
} else if (typeof name === "number") {
name; // name은 number 타입으로 추론
} else {
name; // 이 코드는 절대 실행되지 않음, never 타입으로 추론
}
}
9. unknown
let a: unknown
// a 타입을 확인후 사용할 수 있음
if(typeof a === 'number'){
let b = a + 1;
}
if(typeof a === 'string'){
let b = a.toUpperCase();
}
Share article