기본타입

타입스크립트의 필수 기본 문법을 대충 살펴보는 글 ㅇㅇ

타입스크립트 기본

let 이름: string = 'kim'

변수면: 타입명이런식으로 사용한다.

타입으로 쓸 수 있는것은
string, number, boolean, bigint, null, undefined,[], {} 등등

타입을 지정하면 의도치않게 변경될 경우 에러 메세지를 띄워준다.
덕분에 타입관련 버그를 사전에 차단한다.

array, object

어레이나 오브젝트 자료는

let name :string[] = ['kim', 'park']
let age :{ age : number } = { age : number }

이런식으로 타입지정이 가능하다.

만약, array자료안에 순서를 포함해 어떤 자료가 들어올지 정하고 싶으면
tuple타입을 쓰자.

type Member = [number, boolean];
let john:Member = [100, false]

objec타입도 정의가 너무 길면 type키워드로 변수에 담아 사용 가능
type키워드 말고 비교적 최근에 나온 interface키워드도 가능
차이점 별로없음
특성 속성이 선택사항이면 물음표 기입가능

type MyObject = {
  name? : string,	// 이거 있을수도 없을수도 있암
  age : number
}
let 철수 :MyObject = { 
  name : 'kim',
  age : 50
}

object에 어떤 속성이 들어갈지 모르면
싸잡아 타입지정도 가능

type MyObject = {
  [key :string] : number,
}
let 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

index signature이라고 한다.

|

만약, 변수에 여러가지 타입의 데이터가 들어올수도 있으면
|기호를 이용해서 or연산자를 표현할 수 있다.

let 이름 :string | number = 'kim';

type 키워드

type키워드를 이용해 타입을 변수처럼 담아서 사용 할 수도 있다.

type nameType = string | number;
let name : nameType = kim;

type키워드를 사용할때 나만의 타입을 만들어 사용가능하다.
원하는 글자나 숫자를 입력하면 그 변수에는 그 글자나 숫자만 들어갈 수 있다.
이걸 literal type이라고 한다.

type NameType = 'kim' | 'park';
let name : NameType = 'kim';

함수

function 함수명(x :number) :number{
  return x * 2
}

함수는 파라미터와 리턴값이 어떤 타입일지 지정이 가능
실수로 다른타입이 들어오면 에러
함수는 리턴타입으로 void설정이 가능한데
리턴이 없는지 체크할 수 있는 타입

ts에서는 지금변수 타입이 확실하지 않으면 마음대로 연산할 수 없다.
항상 타입이 무엇인지 체크하는 narrowing이나 assertion문법을 사용해야 한다.

class

클래스도 타입설정 가능하다.
중괄호 내에 미리 name이런 변수를 만들어야 constructor안에서 this.name이렇게 사용이 가능하다.

class Person {
  name;
  constructor(name : string) {
    this.name = name;
  }
}

ts팁

변수 생성시 ts가 타입을 자동 부여해줘서 굳이 다 적지는 않아도 된다.

let name = 'kim';
let age = 20;

이런거 다 알아서 타입이 지정된다.

심지어 변수만 만들고 나중에 값을 넣어도 타입이 자동으로 지정된다.
간단한 변수들은 타입을 생략하자

tsc -w명령어 실행중인 터미널에 에러가 나온다.
간결하게 보려면 터미널 옆 problems탭에 나온다.