Typescript 기초 문법 정리

설치 🪛

npm install -g typescript

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

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

문법

let 이름 :string = 'kim'

변수를 만들 때 타입지정하기.변수명 : 타입명 이렇게 쓴다

타입으로 쓸 수 있는 것들은 string, number,boolean, bigint, null, undefined,[], {} 등이 있습니다.

let 이름 :string = 'kim';
이름 = 123;

타입을 지정해놓으면 타입이 의도치 않게 변경될 경우 에러메세지를 띄워준다.
야! 이거 숫자야!

let 이름 :string[] = ['kim', 'Hong']
let 나이 :{ age : number } = { age : number }

array 혹은 object 자료는 이렇게 타입지정이 가능

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

이 변수에 여러가지 타입의 데이터가 들어올 수 있다면 | 기호를 이용해 or 연산자를 표현

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

type 키워드를 이용해 타입을 변수처럼 담아서 사용가능

type NameType = 'kim' | 'Hong';
let 이름 :NameType = 'kim';

string number 이런 것 뿐만 아니라 나만의 타입을 만들어 사용가능하다.
원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim' 또는 'Hong'만 들어올 수 있는데, 이걸 literal type이라고 함

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

함수는 파라미터와 return 값이 어떤 타입일지를 지정할 수 있다.
다른 타입이 파라미터로 들어오거나 return될 경우 야 너 틀렸어! 라고 함
함수는 return 타입으로 void를 설정가능한데 return이 없는지 체크한다. (쭉~ 밑에 기입)

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

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

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

참고하기 : https://velog.io/@boorook/TypeScript-Narrowing-Assertion

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

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

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 라고 함

타입 지정하기

let 이름 = 'kim';
let 나이 = 20;

이렇게만 써도 자동으로 이름변수는 string,
나이 변수는 number를 가진다
(변수명에 마우스 올려보면 바로바로 확인가능)
array, object 만들 때도 자동으로 알아서 됨
굳이 복잡하게 타입 명시할 필요 없음

let 이름;
이름 = 'kim'; 

심지어 변수만 만들고
나중에 가서 여기에 'kim'을 할당해도 타입이 자동으로 string으로 변함

object 자료형

let favorite :{ song :string, singer :string } = { song : '비밀의 화원', singer : 'IU' }

let project :{
  member : string[],
  days : number,
  started : boolean,
} = {
  member : ['kim', 'Hong'],
  days : 20,
  started : true,
}

---

함수

함수에서 타입지정 가능한 부분은 두 개

• 함수로 들어오는 자료 (파라미터)
• 함수에서 나가는 자료 (return)

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

1. 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적는다.
2. 함수가 실행된 후 남는 값 (return 우측에 있는 값) 타입지정하고 싶으면 함수명() 우측에 적으면 됩니다.

함수에 멋있게 타입 실드를 장착했기 때문에 파라미터와 리턴값이 이상해지면 뭐라뭐라 오류가 난다~

• 파라미터에 타입을 지정하면 필수 파라미터가 됨.
  그러니까 파라미터를 옵션으로 두고 싶으면 물음표를 쓰면 된당

function 내함수(x? :number) { 

}
내함수(); //가능
내함수(2); //가능

x? x : number | undefined란 의미라고 생각하면 됨.

void

void 는 '아무것도 없이 공허함'을 뜻하는 타입인데 return할 자료가 없는 함수의 타입으로 사용하면 된다.

function 내함수(x :number) :void { 
  return x * 2 //여기서 에러남 
}

그럼 이제 이 함수에서 뭔가를 return하려고할 때 에러를 냅니다.
함수에 return 방지장치를 주고 싶을 때 void 타입을 활용하면 된다.
아직은 참 의아한 기능..?

union type

function 자릿수세기(x :number | string){ 
  return x + 1 
} 

이렇게 or 연산자를 사용해서 파라미터 타입을 지정하면 에러가 뜬당
타입스크립트에서는 이런 경우를 금지 시킴
왤까? 타입이 확실하지가 않으니까 이 파라미터 자체를 일단 못 쓰게 하는 것이다.

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

이런 코드도 안된다고 나온다.
number 맞는데 왜?
x라는 파라미터는 옵션이고, 옵션인 파라미터는 number | undefined 이런 식으로 타입정의가 되기 때문에
그래서 아직 x라는 파라미터가 뭔지 확실하지 않기 때문에 에러 낸다...

과제

1

이름을 파라미터로 입력하면 콘솔창에 "안녕하세요 홍길동"을 출력해주고, 아무것도 파라미터로 입력하지 않고 함수를 사용하면 "이름이 없습니다" 를 출력하는 함수

function sayHi(x? :string ){
  if (x) {
    console.log('안녕하세요 ' + x)
  } else {
    console.log('왜입력안함')
  }
} 

2

함수에 숫자 또는 문자를 집어넣으면 자릿수를 세어 출력해주는 함수

function 자릿수세기(x :number | string) :number {
  return x.toString().length
} 

3

결혼 가능 확률을 알려주는 함수 (언짢)

1. 함수의 파라미터로 월소득(만원단위), 집보유여부(true/false), 매력점수 ('상' or '중' or '하') 를 입력할 수 있어야합니다.
2. 월소득은 만원 당 1점, 집보유시 500점 & 미보유시 0점, 매력점수는 '상'일 때만 100점으로 계산합니다.
3. 총 점수가 600점 이상일 경우 "결혼가능"을 return 해줘야합니다. 그 외엔 아무것도 return하지 않습니다.

function 결혼가능하냐(money :number, house :boolean, charm :string) :string|void{
  let score :number = 0;
  score += money;
  if (house === true){
    score += 500
  }
  if (charm === '상'){
    score += 100
  }
  if (score >= 600){
    return '결혼가능'
  } 
}
console.log(결혼가능하냐(100,true,'상')) 

string이 아니라 '상' '중' '하' 라는 글자만 입력할 수 있게
더욱 엄격한 타입지정도 가능
(Literal type)