본문 바로가기
카테고리 없음

타입스크립트 쓰는 이유 & 필수 문법 10분 정리

by 문자메일 2024. 10. 22.
// 1. 간단한 변수 타입 지정
// 아래 변수에는 string type만 들어올 수 있다.
let 이름 :string = 'kim';
// 아래는 에러 발생
이름 = 123;


// 2. array 타입지정
// 이 변수엔 string 담긴 array만 들어올 수 있다.
let 이름 :string[] = ["kim", "park"];
// 아래는 에러 발생
let 이름 :string[] = [123, 'park'];


// 3. object 타입지정
// 아래에서 name 뒤에 ? 붙이면, name이라는 속성이 들어올 수도, 안 들어올 수도 있다는 문법이다.
let 이름 :{ name? : string } = { name : 'kim' }


// 4. 다양한 타입이 들어올 수 있게 하려면 Union type
// 아래 이름 변수는 스트링이 담긴 배열이나, 숫자가 할당될 수 있다.
let 이름 :string[] | number = 123;


// 5. 타입은 변수에 담아쓸 수 있음 / Type alias , 타입 지정하는 문법이 길면
type Name = string | number;
let 이름 :Name = 123;


// 6. 함수에 타입지정 가능
// 아래 함수는 파라미터로 number, return 값으로 number가 되어야 한다.
function 함수(x :number) :number {
  return x * 2
}


// 7. array에 쓸 수 있는 tuple 타입
// 무조건 첫 째는 number, 둘 째는 boolean
type Member = [number, boolean]
let join:Member = [123, true]
// 아래는 에러 발생
let john:Member = ['123', true]


// 8. object에 타입지정해야할 속성이 너무 많으면
// 글자로 된 모든 object 속성의 타입은 :string
type Member = {
  [key :string] : string, 
}
let john :Member = { name : 'kim', age : '123' }


// 9. class 타입지정 가능
class User{
  name :string;
  constructor(name :string){
    this.name = name;
  }
}

 

 

https://codingapple.com/unit/how-to-install-typescript-in-local-vue-react/?id=11721

 

https://www.youtube.com/watch?v=xkpcNolC270

 

 

댓글