Typescript - 기본문법

오늘의 한마디

사람은 반복문을 쓰고, 신은 재귀함수를 쓴다.
(L. Peter Deutsch, PDF Interpreter, Ghostscript, PostScript의 창시자)

타입스크립트 설치방법

npm install -g typescript

타입스크립트로 React프로젝트 시작방법

npx create-react-app my-app --template typescript

1. 기본문법 (변수)

const 변수명 : string = "kim" // 변수명 : 타입

사용가능한 변수명으로 string, number, boolean, bigint, null, undefined, [], {} 있다.

const 변수명 : string[] = ["a","b"] // 변수명 : 타입[] = []
const 변수명 : { age : number } = { age : number }

배열이나 객체도 가능하다.

let 변수명 :string | number = 'kim';

변수에 여러가지 타입의 데이터가 들어올수 있다면 or 연산자로 표현할 수 있다. 혹은

type NameType = string | number;
let 이름 :nameType = 'kim';

type키워드를 통하여 만들 수도 있으며 타입명은 대문자로 적어주는게 일반적임.

2. 기본문법 (함수)

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

함수는 파라미터 타입과 return값의 타입도 지정가능.
return 타입으로 void를 설정가능
void : return이 없는지 체크할 수 있는 타입.

//에러
function 함수명(x :number | string) {
  return x * 2
}

//가능
function 함수명(x :number | string) {
  if (typeof x === 'number'){
    return x * 2
  } 
}

타입스크립트는 변수의 타입이 확실하지않으면 연산이 안됨.
항상 타입이 무엇인지 미리체크하는 narrowing 또는 assertion 문법을 사용해야 허락해줌.

narrowing?
타입스크립트 프로그램에서 변수는 덜 정확한 타입에서 더 정확한 타입으로 변할 수 있습니다.
이 과정을 type narrowing이라고 합니다.

ex) 위에 처럼 typeof 매서드를 이용하여 if문으로 걸러준는것 등

3. tuple타입

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

array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면
tuple 타입을 쓰면 됩니다. 대괄호 [ ] 안에 들어올 자료의 타입을 차례로 적어주면 됩니다.

4. object타입

type MyObject = {
  name? : string,
  age : number
}
let 철수 :MyObject = { 
  name : 'kim',
  age : 50
}

object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능합니다.
type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방합니다. 차이점은 별로 없습니다.
특정 속성이 선택사항이면 물음표를 기입가능합니다.

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

object안에 어떤 속성이 들어갈지 아직 모른다면
그냥 전부 싸잡아서 타입지정도 가능합니다.
index signature라고 합니다.