타입스크립트란?
타입스크립트는 새로운 언어가 아니라 자바스크립트 + 타입지정 이라고 생각하면 편하다.
각각의 상황마다 사용하는 문법들이 다르기 때문에 찾아보기위해 정리해보자.
1. 타입의 종류
string, number, [], {}, undefined, null, any, boolean2. 변수에 지정하는 방법
let a : string = "kim"변수에 타입을 지정할때는 변수 뒤에 : 을 작성한뒤 타입을 지정해준다.
let a : [] = [1,2,3]
let b : {age : number} = { age : 10 }배열이나, 객체는 [], {key : value} 처럼 표현해준다.
let a : string[] = ["kim"]배열에 string만 포함하는 타입을 만들고 싶다면 string[] 이런식으로 표현한다.
3. Union type
let a : string | number = "kim"
let b : string | number = 100타입이 미리 지정하기 애매하고, 1가지 이상일경우 Union type을 사용하고 | 로 표현한다.
let a : (string | number)[] = [1,"kim"]
let b : {age : (number | string)} = {age : "100"}4. 함수에 지정하는 방법
함수에 타입은 크게 2곳에 지정이 가능하다.
1. 파라미터
2. 리턴값
function abc(x :number) :number {
return x * 2
} () 안에는 들어올 값의 타입을 지정, () 밖에는 리턴할 값의 타입을 지정
리턴할 자료가 필요 없을땐?
function abc(x :number) :void {
return x * 2
} void를 쓰는 경우는 return할 자료가 없는 함수의 타입일때 사용
파라미터가 옵션일땐?
function abc(x? :number){
} ? 표를 붙여줘서 사용
Union type 사용시 에러
function abc(x :number | string){
return x + 1
} x의 타입이 number | string 타입이라 number, string 에서 할수 있는 + 1 을 해줄수가 없다.
Uniton type은 number | string 이라는 타입이 되기때문!
이럴땐 Narrowing 작업을 해준다.
5. Narrowing
function abc(x :number | string){
return x + 1
} 이런경우 Narrowing이 필요하고 사용하는 방법은 간단하다.
function abc(x :number | string){
if (typeof x === 'number') {
return x + 1
}
else if (typeof x === 'string') {
return x + 1
}
else {
return 0
}
}if 문으로 하나씩 지정해주면서 사용한다.
6. type alias
type alias?
타입을 변수에 담아서 사용할수 있다.
let abc :string | number | undefined;비슷한 타입을 여러번 사용하거나, 타입이 길어지면 보기 힘들수 있다.
이럴때 type alias 사용이 가능하다.
type Abc = string | number | undefined;
let abc : Abc이런식으로 미리 지정후 사용도 가능하다.
type alias(배열, 객체)
당연히 객체, 배열 보두 미리 저장해서 사용이 가능하다.
type Abc = string[]
let abc : Abc = ["kim", "Lee"]type Abc = {
name : string,
age : number,
}
let abc : Abc = { name : "Kim", age : 14}2개의 type alias 합치기
type Abc = string;
type Def = number;
type NewOne = Abc | Def; type X = { x: number };
type Y = { y: number };
type X & Y = X & Y
let location :X & Y = { x : 1, y : 2 }7. Literal type
string, number 이런것 뿐만 아니라 "ABCD" , "DEFG" 이런것으로 type 지정이 가능하다.
literal type은 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입이다.
function Abc(a : 'hello') : 1 | 0 | -1 {
return 1
}함수로 예를 들면 파라미터에는 hello라는 문자열밖에 들어올수 없고, 리턴은 1,0,-1 3가지중 하나만 return 값으로 가진다는 의미이다.
8. Interface
object 타입 지정시 interface를 사용해서 타입지정이 가능하다.
interface Abc {
A :string,
B :number,
} type alias와 동일한 기능을 하며 지정된 interface를 가지고 다른 변수에서 사용이 가능하다.
type alias 와 interface의 차이점?
- extends
type alias 사용시 2개의 타입을 합치려면 & 로 합칠수 있었는데 interface는 extends라는 문법 사용이 가능하다.
interface Abc {
name :string,
}
interface Def extends Abc {
age :number
}extends 는 복사한다는 의미를 담고 있다. Abc 라는 interface의 값들을 복사해올수 있다.
복사해왔기에 Def는 아래처럼 타입을 가질수 있다.
interface Def {
name :string,
age :number,
}- 중복선언
type은 중복선언 안되고, interface는 가능하다.
interface Abc {
X :string
}
interface Abc {
Y :number
}이렇게 interface는 중복선언 가능하고 이것은 extends한것처럼 2가지의 속성을 둘다가질수 있다.
type Abc = {
X :string
}
type Abc = {
Y :number
}type은 이런것을 허용하지 않는다.
9. rest 파라미터 타입지정하는 방법
함수의 파라미터로 몇개가 들어올지 미리 정의가 불가능할경우 rest 파라미터를 사용한다.
function Abc(...a){
console.log(a)
}... 3개로 파라미터를 작성해주면 파라미터가 잔뜩 들어올수 있다.
rest 파라미터는 배열로 들어오기에 타입지정은 아래처럼 진행한다.
function Abc(...a: number[]){
console.log(a)
}10. Generic
Generic은 함수의 파라미터로 타입을 입력하는것이다.
function abc(x:unknown[]){
x[0]
}
let a = abc()
console.log(a[0] + 1)위와같은 예제가 있다고 했을때 console.log를 실행하면 에러가 난다.
그 이유는 a[0]은 unknown 타입이기 때문
해결책은 Narrowing을 사용하거나, Generic을 사용하는 것이다.
Generic을 사용하면 타입을 파라미터로 입력할수 있다.
function abc<T>(x:T[]): T{
return x[o]
}
let a = abc<number>([4,2])
let b = abc<string>(["4","2"])이런식으로 타입을 파라미터로 받을수 있다.
아래처럼 extends를 이용해 타입을 제한할수도 있다.
function abc<T extends number>(x:T){
return x - 1
}
let a = abc(100)extends는 커스텀 타입으로도 활용할수 있다.
interface LengthCheck{
letngh: number
}
function abc<T extends LengthCheck>(x:T){
return x - 1
}
let a = abc<string[]>(["100"])출처 : 코딩애플 타입스크립트 강의
https://codingapple.com/course/typescript-crash-course/
